PerlIsGood
Programmer
This is my first trip into "no-tables" design. I have a gap at the top of my page and I can't seem to get rid of it. I'm pretty sure the culprit is the relative-position menu bar I'm adding (div#menu). (example here).
So what am I doing wrong?
HTML:
CSS:
Notorious P.I.G.
So what am I doing wrong?
HTML:
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...text</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="menu">
<script type="text/javascript" src="tab_menu.js"></script>
</div>
<div id="logo">
<img src="picts/logo.jpg" alt="...text" />
</div>
<div id="flash">...flash</div>
<div id="content">
<h1>H1</h1>
<p>...text</p>
<p>...text</p>
<p>...text</p>
<h1>H1</h1>
<p>...text</p>
</div>
<div id="sub0"></div>
<div id="sub1">
<h2>H2</h2>
...text
</div>
<div id="sub2">
<h2>H2</h2>
...text
</div>
<div id="pipe">
<script type="text/javascript" src="menu.js"></script>
</div>
<div id="footer">
<script type="text/javascript" src="copyright.js"></script>
</p>
</div>
</body>
</html>CSS:
Code:
/* =========== */
/* PAGE LAYOUT */
/* =========== */
body {
margin: 0px;
background-color: #fff;
font-family: arial;
}
div {
margin: 0px;
border-style: solid;
border-width: 0px;
border-collapse: collapse;
}
div#logo {
background-color: transparent;
background-image: url("picts/pipe.jpg");
float: left;
text-align: left;
width: 70%;
height: 150px;
}
div#flash {
background-color: transparent;
background-image: url("picts/pipe.jpg");
float: right;
text-align: right;
width: 30%;
height: 150px;
clear: right;
}
div#menu {
position: relative;
top: 125px;
left: 279px;
background-color: transparent;
padding-bottom: 0px;
padding-top: 5px;
text-align: left;
height: 25px;
min-width: 100px;
max-width: 450px;
z-index: 1;
display: inline;
overflow: hidden;
}
div#pipe {
background-color: #0f4174;
padding-top: 0px;
text-align: center;
vertical-align: top;
height: 25px;
clear: both;
}
div#content {
padding: 8px;
background-color: #fff;
text-align: justify;
min-height: 150px;
width: 75%;
float: left;
}
div#sub0 {
background-color: transparent;
max-height: 3px;
min-height: 3px;
clear: right;
}
div#sub1 {
background-color: #0f4174;
width: 18%;
}
div#sub2 {
background-color: #888;
clear: right;
width: 18%;
}
div#sub1, div#sub2 {
text-align: left;
font-size: 10pt;
padding: 15px;
min-height: 185px;
float: right;
margin: 3px 2px 3px 0px;
-moz-border-radius-topleft: 2em;
-moz-border-radius-bottomleft: 2em;
-moz-border-radius-bottomright: 2em;
border-width: 1px 1px 1px 1px;
}
div#footer {
background-color: transparent;
background-image: url("picts/bottom-shade.gif");
background-repeat: repeat-x;
text-align: left;
width: 100%;
height: 20px;
clear: both;
}Notorious P.I.G.
