PDA

Click to See Complete Forum and Search --> : CSS layout again.

Nedals
04-18-2003, 11:52 PM
<!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="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="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="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 - Unrecognized
nkaisare
04-19-2003, 12:49 AM
The 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="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="features.html"><img src="images/featureson.gif" alt="Features" width=100 height=17></a>
<a href="about.html"><img src="images/aboutus.gif" alt="About" width=100 height=17></a></div>
<div id="subnav">
Management <a href="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).
nkaisare
04-19-2003, 01:25 AM
Some helpful links:
http://devedge.netscape.com/viewsource/2002/img-table/ (mysterious gaps with images)
http://www.saila.com/usage/layouts/ (layouts and FAQ)
http://www.glish.com/css/ (layouts)
http://www.positioniseverything.net/thr.col.stretch.html (column stretch)
http://www.treetrybe.com/imm/tests/nn4_3cols_x.html (NS4 safe)

This is what I'd do:
<div id="header">
<p>Some more additional links</p>
<a href="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
http://www.prism.gatech.edu/~gte207x/experiment/page1.html
XHTML file is the same, just uses 6 different CSS for different layouts. Didn't get time to finetune things.
Nedals
04-19-2003, 11:11 AM
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)
nkaisare
04-19-2003, 03:12 PM
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 : #mainnav
Nedals
04-19-2003, 04:09 PM
Strange....
I'm testing here, using exactly the code you posted..

http://jigsaw.w3.org/css-validator/validator

and this is what I get......
Errors
URI : file://localhost/C:\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 : file://localhost/C:\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 : #mainnav
nkaisare
04-19-2003, 09:29 PM
You 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 http://www.cingular.com is done using XHTML and CSS. Its nice to see mainstream .coms making use of the technology.

- Niket