asked on

Trying to get a top "bar" and a "leftnav" to work....

Hello Experts!

I'm trying to make a new webpage using XHTML and CSS. What I would like to start is a "bar" going across the top of the page that is always 100% of the page. Then I want to have another "bar" on the left that begins just underneath the top bar and goes down to fill the rest of the page. Please look at my code and tell me what I'm doing wrong! (what I am doing seems logical to me)

Thanks! -neo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <meta name="author" content="Neomage" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <meta name="robots" content="all" />

      <title></title>

      
      <script type="text/javascript"></script>

      <style type="text/css" media="all">
            @import "sample.css";

            * {margin:0;}
            body {
                  background:            white;
                  font-family:      verdana;
                  font-size:            10px;
                  font-color:            black;
            }

            #topbar {
                  width:100%;
                  height:20px;
                  background:blue;
                  border-bottom: 1px solid black;
            }

            #leftnav {
                  width:100px;
                  height:100%;
                  background:green;
            }

      </style>

</head>

<body onload="window.defaultStatus='Default Window Status Message';" id="">

<div id="topbar"></div>
<div id="leftnav"></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>

</body>
</html>

ASKER CERTIFIED SOLUTION

GrandSchtroumpf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GrandSchtroumpf

lol, i had not even noticed the part about the 100% height.

antny13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Neomage" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />

<title></title>


<script type="text/javascript"></script>

<style type="text/css" media="all">
@import "sample.css";

* {margin:0;}
body {
background: white;
font-family: verdana;
font-size: 10px;
font-color: black;
}

#topbar {
width:100%;
height:20px;
background:blue;
border-bottom: 1px solid black;
}

#leftnav {
width:100px;
background:green;
}

</style>

</head>

<body onload="window.defaultStatus='Default Window Status Message';" id="">

<div id="topbar"></div>
<script>document.write("<div id='leftnav' style='height:"+screen.availHeight+"px'>")</script></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>
<div id=""></div>

</body>
</html>

Eternal_Student

That doesnt work on IE6. ^ It takes the layer beyond the window so you have to scroll.

Surely this would work ?

html, body { height:100%; margin:0; padding:0; }

#leftnav{
top: 20px;
left: 0px;
height: 100%;
position: relative;
visibility: visible;
z-index : 1;
width:100px;
background:green;
}

COBOLdinosaur

This:
<script>document.write("<div id='leftnav' style='height:"+screen.availHeight+"px'>")</script></div>
is about the worst kind of hack imaginable. Fortunate is does not work, because it would be totally worthless in a flexible page because whatever height it ends up setting (almost never 100 of the canvas) will not respond to dynamic content changes, resizing or changes in user preferences.

Cd&

neomage23

ASKER

Hey Cobol, thanks for giving me some input on this thread. I kind of abandoned the design I was seeking to accomplish with this question. I wish I was better with CSS, I feel like i'm missing some "fundamentals"...I guess I just need to practice more.

BTW, I would never use that script, I don't like it when things are needlessly complicated.

COBOLdinosaur

A lot of developers struggle with the transition to CSS. It is not that the coding or concepts are difficult. What is difficult is re-training your eyes and brain to see web pages differently. Most formal training, books and past practice treat the page as a two dimensional object, and everything resolves to some form of grid.

The trick is to take the page, break it down into components; and decide what the most important component is; usually content. Now just forget about everything you were taught about layout and build the page to give the most important component dominance, and work the rest of the design around it. Don't compromise on give the user the best presentation of what is important. The rest of the components will fit in somewhere, and they are there to support the primary component. What you end up with is a page layout that looks odd when compared to the standard sort of ebay, cnn, or Expert-exchange presentations, but it is exactly what you need to give YOUR users the best experience possible on your site.

The best CSS based sites do not win a lot of "pretty design" awards; but they hold users, and get a high percentage of return visitors becasue they deliver content that meets the user's needs. In the end analysis, the user don't care how great a page looks. They want good content well presented and easy to use.

Youe will find the top-experts in the CSS topic will all take a lot of time to help you through the tough spots if you don't mind blunt criticism and you put the needs of the end user ahead of your own preferences.

Cd&

GrandSchtroumpf

<:°)

Trying to get a top &quot;bar&quot; and a &quot;leftnav&quot; to work....

Trying to get a top "bar" and a "leftnav" to work....