...

View Full Version : CSS Layout Help



wyclef
05-23-2007, 12:36 AM
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>

harbingerOTV
05-23-2007, 01:43 AM
<!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
-----------------------------------------------------------------------------*/


#menu {
margin: 0;
padding: 0;
background: #B31B1B;
font-size: 75%;
list-style: none;
float: left;
width: 100%;
}

#menu li {
float: left;
margin: 0; padding: 0;
letter-spacing: 1px;
}

#menu li a {
float: left;
padding: 10px 6px;
color: #FFF;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
border: none;
background-color: #C72F2F;
}

#menu li a:hover {
color: #fff;
background-color: #870016;
}





/* You are here - Main Nav */
body#home #home-nav a { background: #C72F2F; margin-left: 8px;}


#primary-content {
padding: 0 15px;
clear: both;
}

/* 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">




<div id="banner"></div>

<!-- navigation in -->


<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 -->

<!-- navigation out -->

<div id="divider-margintop"></div>



<!-- 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>


took out #nav as #menu is all you needed. #menu needs to be floated to encase the floated LI's and needs a 100% width so it's happy. No need to absolute position it since that affects the content as it ignores it. since menu sits under banner in the code, it will on the page. since it's floated, just have the the content area clear the float. I removed #masthead as well as it didnt seem to serve any purpose.

see if that does anything for you.

and this


<div id="divider-margintop"></div>

whats that supposed to do? it's underneath the menu and was when i took the code so I'm not sure.

wyclef
05-23-2007, 11:28 PM
Some of the extraneous tags were just leftover from the bigger template I stripped down for simplicity. This seems to work great even without clearing the float in #primary-content. Thanks! That helps a lot.

Maybe you have some input into another issue I've been looking into. If there are more nav links, the #emblem div which is going to be a PNG graphic overlaps the nav making it unusable. Any ideas how I could solve this and slide the #emblem underneath the nav text but over the red bar?

_Aerospace_Eng_
05-23-2007, 11:38 PM
Is the red bar supposed to be the height of just the nav? I'm guessing you want the emblem to overlap the red bar. If this is the case then give your menu a right padding equal to or greater than the width of the emblem.

wyclef
05-23-2007, 11:54 PM
Yes, the emblem should overlap the red bar. The problem is the emblem is positioned absolutely. So padding the menu won't effect the emblem.

_Aerospace_Eng_
05-24-2007, 12:04 AM
Yeah it will. It won't let any menu items go behind it so new menu items drop down to two lines. Like this

#nav ol {
font-size: 75%;
list-style: none;
}

ol#menu {
margin: 0; padding: 0 20% 0 0;
background: #B31B1B;
}

wyclef
05-24-2007, 12:18 AM
I see what you're saying. Hmmm...maybe the earlier way is better than your last post then. Not sure. I guess I'll have to explore this a little more.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum