[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