[thelist] CSS expert opinion needed
Rosalie Sennett
rsennett at brainlink.com
Sun Jan 2 12:51:30 CST 2005
I consider myself an educated intermediate. (Been in the web tech area since
early 90's but haven't had to be a coder for years...) and that link to
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html uses some
concepts that are absolutely proper, but over the head of a rank beginner.
The concept isn't explained there that I can find, but the examples are
excellent.
This however:
http://www.brainjar.com/css/positioning/default.asp
which I found just now looking for a deep explanation of positioning for you
is much more basic... and explains all... check out the paragraph on page 2
that refers to "Float". Page 3 discusses adding width to floated boxes.
Then consider the following example.
Granted, divContainer and divNavigate don't need background color because
they're just containers, but I put it there to make the point...
Also, the experts will chime in with whether you need to size all of the
divs as I have. Better to specify than leave it up to chance since that is
one area where browsers begin to differ.
I also tried this by floating the divAboveNavBar and divNavBar independently
and leaving divNavigate as just a 'holder' and that worked too.
Again, hopefully the experts will elaborate on the pitfalls.
And if I were you, I'd find another coder. He's gotta think outside the
box... about the box. ;-)
<style type="text/css">
<!--
#divContainer {
height: 150px;
width: 1024px;
background-color: black;
}
#divLogo {
float: left;
height: 150px;
width: 500px;
background-color: red;
}
#divNavigate {
height: 150px;
width: 524px;
float: right;
background-color: yellow;
}
#divAboveNavBar {
width: 524px;
height: 90px;
background-color: green;
}
#divNavBar {
width: 524px;
height: 60px;
background-color: blue;
}
-->
</style>
</head>
<body>
<div id="divContainer">
<div id="divLogo"> </div>
<div id="divNavigate">
<div id="divAboveNavBar"> </div>
<div id="divNavBar"> </div>
</div>
</div>
</body>
rose
-----------------
c:/dos
c:/dos/run
run/dos/run
>>
-----------------
More information about the thelist
mailing list