wyclef
22nd May 07, 10:40 PM
Hey, I'm having trouble with #nav overlapping #primary-content. I can push it down with a fixed height using padding but then if you increase the text size and the #nav breaks onto 2 lines it overlaps again. Suggestions?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin: 0; padding: 0; }
html, body, #container-page {
height: 100%;
margin: 0; padding: 0 2em;
}
body {
font-size: small;
line-height: 1.56em;
font-family: "Lucida Grande", "Trebuchet MS", Tahoma, Arial, sans-serif;
color: #666;
background: #CCC;
}
#container-page {
margin: 0 auto; padding: 0;
min-width: 650px;
max-width: 845px;
}
* html #container-page {
width: 760px;
}
#inner-wrap {
position: relative;
min-height: 100%;
margin: 0; padding: 0;
background: #FFF;
}
/* HACK: IE 6 doesn't understand min-height */
* html #inner-wrap {
height: 100%;
}
h1 {
font: 200% Georgia, Palatino, Times, serif;
border-bottom: 1px solid #E5E5E5;
margin: 0; padding: 0;
}
/* HACK: IE 6 needs this to display border-bottom */
* html h1 {
position: relative;
}
h2 {
font-size: 115%;
font-weight: normal;
margin: 0; padding: 15px 0;
}
#banner {
height: 120px;
background: #FFC;
}
/* Global Nav
-----------------------------------------------------------------------------*/
#nav {
/* height: 3em;
background: #B31B1B;
Original Height was causing problems with alignment of hover state
Background color allowed nav text to slide OVER #emblem
*/
}
#nav ol {
font-size: 75%;
list-style: none;
width: 100%;
}
ol#menu {
margin: 0; padding: 0;
background: #B31B1B;
}
#nav li {
float: left;
margin: 0; padding: 0;
letter-spacing: 1px;
}
#nav li a {
float: left;
padding: 10px 6px;
color: #FFF;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
border: none;
}
#nav ol li a:hover {
color: #fff;
background-color: #870016;
}
#menu {
position: absolute;
z-index: 2;
}
/* You are here - Main Nav */
body#home #home-nav a { background: #C72F2F; margin-left: 8px;}
#primary-content {
padding: 0 15px;
}
/* Top and Bottom Content Margin */
#divider-margintop {
background: #F6F4ED;
height: 15px;
}
/* Emblem Float */
#emblem {
position: absolute;
top: 100px; right: 0;
background: black;
width: 20%; height: 80px;
z-index: 2;
}
</style>
</head>
<body id="home">
<div id="container-page">
<div id="inner-wrap">
<!-- masthead in -->
<div id="masthead">
<div id="banner"></div>
<!-- navigation in -->
<div id="nav">
<ol id="menu">
<li id="home-nav"><a href="/">Section 00</a></li>
<li id="abou-nav"><a href="/">Section 01</a></li>
<li id="undr-nav"><a href="/">Section 02</a></li>
<li id="grad-nav"><a href="/">Section 03</a></li>
</ol>
<!-- emblem in -->
<div id="emblem"></div>
<!-- emblem out -->
</div>
<!-- navigation out -->
<div id="divider-margintop"></div>
</div>
<!-- masthead out -->
<!-- content in -->
<div id="primary-content">
<h1>Heading</h1>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse purus. Sed ante leo, mollis ut, hendrerit ac, sodales ut, diam. Suspendisse et nunc.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse purus. Sed ante leo, mollis ut, hendrerit ac, sodales ut, diam. Suspendisse et nunc. Ut non nisl. Aenean volutpat velit eget nibh. Duis ac est ac nunc consectetuer sagittis. Nulla mollis nulla non eros. Ut mi augue, aliquam tempor, aliquet et, fringilla ac, felis. Nulla ut turpis eget augue tincidunt molestie. Donec a urna ut massa facilisis molestie. Pellentesque feugiat magna a sapien. Nullam tincidunt viverra quam. Fusce facilisis consequat augue. Mauris vel mauris. Pellentesque sollicitudin gravida enim. Fusce condimentum. Proin mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
<!-- content out -->
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin: 0; padding: 0; }
html, body, #container-page {
height: 100%;
margin: 0; padding: 0 2em;
}
body {
font-size: small;
line-height: 1.56em;
font-family: "Lucida Grande", "Trebuchet MS", Tahoma, Arial, sans-serif;
color: #666;
background: #CCC;
}
#container-page {
margin: 0 auto; padding: 0;
min-width: 650px;
max-width: 845px;
}
* html #container-page {
width: 760px;
}
#inner-wrap {
position: relative;
min-height: 100%;
margin: 0; padding: 0;
background: #FFF;
}
/* HACK: IE 6 doesn't understand min-height */
* html #inner-wrap {
height: 100%;
}
h1 {
font: 200% Georgia, Palatino, Times, serif;
border-bottom: 1px solid #E5E5E5;
margin: 0; padding: 0;
}
/* HACK: IE 6 needs this to display border-bottom */
* html h1 {
position: relative;
}
h2 {
font-size: 115%;
font-weight: normal;
margin: 0; padding: 15px 0;
}
#banner {
height: 120px;
background: #FFC;
}
/* Global Nav
-----------------------------------------------------------------------------*/
#nav {
/* height: 3em;
background: #B31B1B;
Original Height was causing problems with alignment of hover state
Background color allowed nav text to slide OVER #emblem
*/
}
#nav ol {
font-size: 75%;
list-style: none;
width: 100%;
}
ol#menu {
margin: 0; padding: 0;
background: #B31B1B;
}
#nav li {
float: left;
margin: 0; padding: 0;
letter-spacing: 1px;
}
#nav li a {
float: left;
padding: 10px 6px;
color: #FFF;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
border: none;
}
#nav ol li a:hover {
color: #fff;
background-color: #870016;
}
#menu {
position: absolute;
z-index: 2;
}
/* You are here - Main Nav */
body#home #home-nav a { background: #C72F2F; margin-left: 8px;}
#primary-content {
padding: 0 15px;
}
/* Top and Bottom Content Margin */
#divider-margintop {
background: #F6F4ED;
height: 15px;
}
/* Emblem Float */
#emblem {
position: absolute;
top: 100px; right: 0;
background: black;
width: 20%; height: 80px;
z-index: 2;
}
</style>
</head>
<body id="home">
<div id="container-page">
<div id="inner-wrap">
<!-- masthead in -->
<div id="masthead">
<div id="banner"></div>
<!-- navigation in -->
<div id="nav">
<ol id="menu">
<li id="home-nav"><a href="/">Section 00</a></li>
<li id="abou-nav"><a href="/">Section 01</a></li>
<li id="undr-nav"><a href="/">Section 02</a></li>
<li id="grad-nav"><a href="/">Section 03</a></li>
</ol>
<!-- emblem in -->
<div id="emblem"></div>
<!-- emblem out -->
</div>
<!-- navigation out -->
<div id="divider-margintop"></div>
</div>
<!-- masthead out -->
<!-- content in -->
<div id="primary-content">
<h1>Heading</h1>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse purus. Sed ante leo, mollis ut, hendrerit ac, sodales ut, diam. Suspendisse et nunc.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse purus. Sed ante leo, mollis ut, hendrerit ac, sodales ut, diam. Suspendisse et nunc. Ut non nisl. Aenean volutpat velit eget nibh. Duis ac est ac nunc consectetuer sagittis. Nulla mollis nulla non eros. Ut mi augue, aliquam tempor, aliquet et, fringilla ac, felis. Nulla ut turpis eget augue tincidunt molestie. Donec a urna ut massa facilisis molestie. Pellentesque feugiat magna a sapien. Nullam tincidunt viverra quam. Fusce facilisis consequat augue. Mauris vel mauris. Pellentesque sollicitudin gravida enim. Fusce condimentum. Proin mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
<!-- content out -->
</div>
</div>
</body>
</html>