qasabah
11-07-2006, 07:18 PM
I'm updating my personal site from tables. Although I've had experience and success with both two column and three column css layouts, now that I'm trying to incorporate a tabbed navigation bar based on a float in the header of the document (thanks ALA's sliding doors (http://www.alistapart.com/articles/slidingdoors/) ) I'm struggling.
Problem 1: the "right" div (red) is going all the way to the top of the page not staying under the header.
Problem 2: the "content" div is picking up some mystery formatting.
Maybe I've got the order of something wrong. Maybe I should be using relative or absolute positioning. Any assistance geatfully accepted.
Here's the site http://jazplanet.com/redes/tabs.html (validates)
the css http://jazplanet.com/redes/jaz.css
or the code if you'd prefer<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Jazplanet</title><link rel="stylesheet" href="jaz.css" type="text/css" title="jaz" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Jazplanet</h1>
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<p>aksjdha</p>
</div>
<div id="right">
<p>dfhqejbwd,</p>
<p>dfhqejbwd,</p>
<p>dfhqejbwd,</p>
<p>dfhqejbwd,</p>
</div>
<div style="clear: both;">
</div>
</div>
</body>
</html>
and the css
body { text-align: center; margin: 0;}
#container { max-width: 65em;
padding: 0 0 10px 0;
margin: 5px auto;
text-align: left;
font-size: 0.75em;
font-family: Verdana, sans-serif;
border: 1px solid #ddd;
background-color: #fefefe;
width:expression(document.body.clientWidth > 800? "800px": "auto" );}
#header { float:left;
width:100%;
background:url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;}
#header a { display:block;
color: #fff;
text-decoration: none;
font-weight: bold;
background:url("norm_right2.gif") no-repeat right top;
padding:5px 15px 4px 6px; }
#header a:hover { text-decoration: underline; }
#header #current { background-image:url("norm_left_on.gif"); }
#header #current a { background-image:url("norm_right_on.gif");
color: #000;
padding-bottom:5px; }
#header h1 {font-size: 4em;
padding: 3px 10px;
margin: 0;
font-family: trebucet, serif;}
#header li {float:left;
background:url("norm_left2.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;}
#header ul { margin:0;
padding: 10px 10px 0 0;
list-style:none; }
#content { float:left;
width: 500px;
margin: 0 0 10px 10px;
padding: 0;
background-color: #00f;}
#right { margin-left: 510px;
padding: 0;
background-color: #f00;}
Problem 1: the "right" div (red) is going all the way to the top of the page not staying under the header.
Problem 2: the "content" div is picking up some mystery formatting.
Maybe I've got the order of something wrong. Maybe I should be using relative or absolute positioning. Any assistance geatfully accepted.
Here's the site http://jazplanet.com/redes/tabs.html (validates)
the css http://jazplanet.com/redes/jaz.css
or the code if you'd prefer<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Jazplanet</title><link rel="stylesheet" href="jaz.css" type="text/css" title="jaz" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Jazplanet</h1>
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<p>aksjdha</p>
</div>
<div id="right">
<p>dfhqejbwd,</p>
<p>dfhqejbwd,</p>
<p>dfhqejbwd,</p>
<p>dfhqejbwd,</p>
</div>
<div style="clear: both;">
</div>
</div>
</body>
</html>
and the css
body { text-align: center; margin: 0;}
#container { max-width: 65em;
padding: 0 0 10px 0;
margin: 5px auto;
text-align: left;
font-size: 0.75em;
font-family: Verdana, sans-serif;
border: 1px solid #ddd;
background-color: #fefefe;
width:expression(document.body.clientWidth > 800? "800px": "auto" );}
#header { float:left;
width:100%;
background:url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;}
#header a { display:block;
color: #fff;
text-decoration: none;
font-weight: bold;
background:url("norm_right2.gif") no-repeat right top;
padding:5px 15px 4px 6px; }
#header a:hover { text-decoration: underline; }
#header #current { background-image:url("norm_left_on.gif"); }
#header #current a { background-image:url("norm_right_on.gif");
color: #000;
padding-bottom:5px; }
#header h1 {font-size: 4em;
padding: 3px 10px;
margin: 0;
font-family: trebucet, serif;}
#header li {float:left;
background:url("norm_left2.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;}
#header ul { margin:0;
padding: 10px 10px 0 0;
list-style:none; }
#content { float:left;
width: 500px;
margin: 0 0 10px 10px;
padding: 0;
background-color: #00f;}
#right { margin-left: 510px;
padding: 0;
background-color: #f00;}