<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body{ margin:0px; background-color:#fff; }
#logo{ float:left; background-color:#658da8; }
#header{ text-align:right; padding-right:30px; background-color:#658da8; height:65px; }
#mainnav{ text-align:right; padding-right:75px; background-color:#415B79; }
#subnav{ color:#faa13c; text-align:right; padding-right:100px; background-color:#000; }
</style>
</head>
<body>
<div id="logo"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"><img src="images/logo.gif" alt="" width=187 height=65 border=0></a></div>
<div id="header">Some additional links</div>
<div id="mainnav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"features.html"><img src="images/featureson.gif"alt="" width=100 height=17 border=0></a><a href="about.html"><img src="images/aboutus.gif"alt="" width=100 height=17 border=0></a></div>
<div id="subnav">Management <a href=http://www.webdeveloper.com/forum/archive/index.php/"track.html" class="subnav">Tracking</a></div>
</body>
</html>
Here's a relatively simple CSS layout. The problem I'm having is that when I add the height to the 'header' DIV, I get about a 3px
gap between the 'logo' and 'header' DIVs. If I take out the height, the gap closes but the other two DIVs move up under the 'header'
DIV.
Can someone show me the CORRECT way to do this layout. (and if possible make it render approximately in NS4)
It validated OK for 4.01 transitional but failed CSS validation and I don't understand why!
line 8: Parse error - UnrecognizedThe following code validates:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nedals Code</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body { margin: 0px; padding: 0px; background-color:#fff; }
#logo { float:left; background-color:#658da8; }
#header { text-align:right; padding-right:30px; background-color:#658da8; height: 65px;}
#mainnav { text-align:right; padding-right:75px; background-color:#415B79;}
#subnav { color:#faa13c; text-align:right; padding-right:100px; background-color:#000; }
</style>
</head>
<body>
<div id="logo">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"><img src="images/logo.gif" alt="Logo" width=187 height=65></a>
</div>
<div id="header">Some additional links</div>
<div id="mainnav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"features.html"><img src="images/featureson.gif" alt="Features" width=100 height=17></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about.html"><img src="images/aboutus.gif" alt="About" width=100 height=17></a></div>
<div id="subnav">
Management <a href=http://www.webdeveloper.com/forum/archive/index.php/"track.html" class="subnav">Tracking</a></div>
</body>
</html>
If I take out the height
The other two divs do not move "under" the #header. header ends at the height determined by its content. To make the flow propoer, you will have to use clear: left
Note that doing this will cause space with white background (background color of body).Some helpful links:
<!-- m --><a class="postlink" href="http://devedge.netscape.com/viewsource/2002/img-table/">http://devedge.netscape.com/viewsource/2002/img-table/</a><!-- m --> (mysterious gaps with images)
<!-- m --><a class="postlink" href="http://www.saila.com/usage/layouts/">http://www.saila.com/usage/layouts/</a><!-- m --> (layouts and FAQ)
<!-- m --><a class="postlink" href="http://www.glish.com/css/">http://www.glish.com/css/</a><!-- m --> (layouts)
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/thr.col.stretch.html">http://www.positioniseverything.net/thr ... retch.html</a><!-- m --> (column stretch)
<!-- m --><a class="postlink" href="http://www.treetrybe.com/imm/tests/nn4_3cols_x.html">http://www.treetrybe.com/imm/tests/nn4_3cols_x.html</a><!-- m --> (NS4 safe)
This is what I'd do:
<div id="header">
<p>Some more additional links</p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"><img src="images/logo.gif" alt="Logo" width=187 height=65></a>
</div>
#header {text-align: left; padding-right:30px; background:#658da8}
#header p {float: right; text-align: right}
Didn't check with NS4.7
BTW, I did some experiment of my own
<!-- m --><a class="postlink" href="http://www.prism.gatech.edu/~gte207x/experiment/page1.html">http://www.prism.gatech.edu/~gte207x/ex ... page1.html</a><!-- m -->
XHTML file is the same, just uses 6 different CSS for different layouts. Didn't get time to finetune things.Thanks, I really appreciate your help.
I added the clear:left to the mainnav DIV and that closed the gap, moved the the mainnav and subnav DIVs to the correct position, and, as you mentioned, left space below the header DIV..
This is what I'd do:
Does make things a little simpler, doesn't it
. And thanks for the links.
I ran that code (with the new doctype), HTML validates but I'm still getting the same CSS validation error...
line 10: Parse error - Unrecognized (line 8 in my code)These are the *warnings* I got (no error)
Line : 1 Level : 1 You have no color with your background-color : body
Line : 2 Level : 1 You have no color with your background-color : #logo
Line : 3 Level : 1 You have no color with your background-color : #header
Line : 4 Level : 1 You have no color with your background-color : #mainnavStrange....
I'm testing here, using exactly the code you posted..
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator">http://jigsaw.w3.org/css-validator/validator</a><!-- m -->
and this is what I get......
Errors
URI : <!-- m --><a class="postlink" href="file://localhost/C">file://localhost/C</a><!-- m -->:\Documents\Internet\test.html
Line: 11 Parse error - Unrecognized :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Nedals Code</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript"><meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css"> body { margin: 0px; padding: 0px; background-color:#fff; }
Warnings
URI : <!-- m --><a class="postlink" href="file://localhost/C">file://localhost/C</a><!-- m -->:\Documents\Internet\test.html
Line : 12 Level : 1 You have no color with your background-color : #logo
Line : 13 Level : 1 You have no color with your background-color : #header
Line : 14 Level : 1 You have no color with your background-color : #mainnavYou need to test only the CSS code, not the HTML file. I copy-pasted the CSS part into the text-area in the CSS validator - its valid. The HTML file needs to be validated at validator.w3.org.
The example that you have given is one of the places where its easier for a beginer to use tables than CSS - adjecant divs extending right upto the bottom.
BTW, Cingular's new site <!-- m --><a class="postlink" href="http://www.cingular.com">http://www.cingular.com</a><!-- m --> is done using XHTML and CSS. Its nice to see mainstream .coms making use of the technology.
- Niket
<html><head><title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body{ margin:0px; background-color:#fff; }
#logo{ float:left; background-color:#658da8; }
#header{ text-align:right; padding-right:30px; background-color:#658da8; height:65px; }
#mainnav{ text-align:right; padding-right:75px; background-color:#415B79; }
#subnav{ color:#faa13c; text-align:right; padding-right:100px; background-color:#000; }
</style>
</head>
<body>
<div id="logo"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"><img src="images/logo.gif" alt="" width=187 height=65 border=0></a></div>
<div id="header">Some additional links</div>
<div id="mainnav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"features.html"><img src="images/featureson.gif"alt="" width=100 height=17 border=0></a><a href="about.html"><img src="images/aboutus.gif"alt="" width=100 height=17 border=0></a></div>
<div id="subnav">Management <a href=http://www.webdeveloper.com/forum/archive/index.php/"track.html" class="subnav">Tracking</a></div>
</body>
</html>
Here's a relatively simple CSS layout. The problem I'm having is that when I add the height to the 'header' DIV, I get about a 3px
gap between the 'logo' and 'header' DIVs. If I take out the height, the gap closes but the other two DIVs move up under the 'header'
DIV.
Can someone show me the CORRECT way to do this layout. (and if possible make it render approximately in NS4)
It validated OK for 4.01 transitional but failed CSS validation and I don't understand why!
line 8: Parse error - UnrecognizedThe following code validates:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nedals Code</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body { margin: 0px; padding: 0px; background-color:#fff; }
#logo { float:left; background-color:#658da8; }
#header { text-align:right; padding-right:30px; background-color:#658da8; height: 65px;}
#mainnav { text-align:right; padding-right:75px; background-color:#415B79;}
#subnav { color:#faa13c; text-align:right; padding-right:100px; background-color:#000; }
</style>
</head>
<body>
<div id="logo">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"><img src="images/logo.gif" alt="Logo" width=187 height=65></a>
</div>
<div id="header">Some additional links</div>
<div id="mainnav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"features.html"><img src="images/featureson.gif" alt="Features" width=100 height=17></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about.html"><img src="images/aboutus.gif" alt="About" width=100 height=17></a></div>
<div id="subnav">
Management <a href=http://www.webdeveloper.com/forum/archive/index.php/"track.html" class="subnav">Tracking</a></div>
</body>
</html>
If I take out the height
The other two divs do not move "under" the #header. header ends at the height determined by its content. To make the flow propoer, you will have to use clear: left
Note that doing this will cause space with white background (background color of body).Some helpful links:
<!-- m --><a class="postlink" href="http://devedge.netscape.com/viewsource/2002/img-table/">http://devedge.netscape.com/viewsource/2002/img-table/</a><!-- m --> (mysterious gaps with images)
<!-- m --><a class="postlink" href="http://www.saila.com/usage/layouts/">http://www.saila.com/usage/layouts/</a><!-- m --> (layouts and FAQ)
<!-- m --><a class="postlink" href="http://www.glish.com/css/">http://www.glish.com/css/</a><!-- m --> (layouts)
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/thr.col.stretch.html">http://www.positioniseverything.net/thr ... retch.html</a><!-- m --> (column stretch)
<!-- m --><a class="postlink" href="http://www.treetrybe.com/imm/tests/nn4_3cols_x.html">http://www.treetrybe.com/imm/tests/nn4_3cols_x.html</a><!-- m --> (NS4 safe)
This is what I'd do:
<div id="header">
<p>Some more additional links</p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"><img src="images/logo.gif" alt="Logo" width=187 height=65></a>
</div>
#header {text-align: left; padding-right:30px; background:#658da8}
#header p {float: right; text-align: right}
Didn't check with NS4.7
BTW, I did some experiment of my own
<!-- m --><a class="postlink" href="http://www.prism.gatech.edu/~gte207x/experiment/page1.html">http://www.prism.gatech.edu/~gte207x/ex ... page1.html</a><!-- m -->
XHTML file is the same, just uses 6 different CSS for different layouts. Didn't get time to finetune things.Thanks, I really appreciate your help.
I added the clear:left to the mainnav DIV and that closed the gap, moved the the mainnav and subnav DIVs to the correct position, and, as you mentioned, left space below the header DIV..
This is what I'd do:
Does make things a little simpler, doesn't it
. And thanks for the links.I ran that code (with the new doctype), HTML validates but I'm still getting the same CSS validation error...
line 10: Parse error - Unrecognized (line 8 in my code)These are the *warnings* I got (no error)
Line : 1 Level : 1 You have no color with your background-color : body
Line : 2 Level : 1 You have no color with your background-color : #logo
Line : 3 Level : 1 You have no color with your background-color : #header
Line : 4 Level : 1 You have no color with your background-color : #mainnavStrange....
I'm testing here, using exactly the code you posted..
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator">http://jigsaw.w3.org/css-validator/validator</a><!-- m -->
and this is what I get......
Errors
URI : <!-- m --><a class="postlink" href="file://localhost/C">file://localhost/C</a><!-- m -->:\Documents\Internet\test.html
Line: 11 Parse error - Unrecognized :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Nedals Code</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript"><meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css"> body { margin: 0px; padding: 0px; background-color:#fff; }
Warnings
URI : <!-- m --><a class="postlink" href="file://localhost/C">file://localhost/C</a><!-- m -->:\Documents\Internet\test.html
Line : 12 Level : 1 You have no color with your background-color : #logo
Line : 13 Level : 1 You have no color with your background-color : #header
Line : 14 Level : 1 You have no color with your background-color : #mainnavYou need to test only the CSS code, not the HTML file. I copy-pasted the CSS part into the text-area in the CSS validator - its valid. The HTML file needs to be validated at validator.w3.org.
The example that you have given is one of the places where its easier for a beginer to use tables than CSS - adjecant divs extending right upto the bottom.
BTW, Cingular's new site <!-- m --><a class="postlink" href="http://www.cingular.com">http://www.cingular.com</a><!-- m --> is done using XHTML and CSS. Its nice to see mainstream .coms making use of the technology.
- Niket