Problems with nav and spaces at top and bottom of page

**cgacfox** · Apr 25, 2012 10:14

I have not working on a site that has the header, nav, and footer running the width of page in a very long time. I am having problems with a space at the top and bottom of the page and my nav is not behaving correctly. When I shrink the page the nav moves to the left and stacks. I don't want this to happen. The live view is at http://foxdenwebsolutions.com/CACNR/index.html. Please take a look at my code and tell me what I have messed up!

Don't yell at me...I use DW CS5.5 and used one of its HTML5 layouts to start me out. I know I messed up somewhere, I just can't find it. I also know the sidebar, content, and aside are not alligned correctly. That is another fix to work on. I have included a mockup of what I am building. centennialnoisemockupI.jpg

The HTML

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/cacnr.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
	<div id="container">
    <div id="header">
      <h1>Centennial Airport Community Roundtable</h1>
    </div> <!--end header-->
    <div id="nav_container">
    <div id="nav">
      <ul>
        <li><a href="#">Link one</a></li>
        <li><a href="#">Link two</a></li>
        <li><a href="#">Link three</a></li>
        <li><a href="#">Link four</a></li>
        <li><a href="#">Link five</a></li>
        <li><a href="#">Link six</a></li>
      </ul>
  </div>
  </div>
<div id="content_container">
<div id="slider"></div> <!--end image slider-->
  <div id="sidebar">
    <section>
      <h3>Lorem Ipsum</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
      <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
    </section>
    </div> <!-- end sidebar -->

  <div id="content">
    <section>
      <h3>Lorem Ipsum</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
      <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
      <p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
       <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
    </section>
    </div> <!-- end content -->
      <div id="aside">
    <section>
      <h3>Lorem Ipsum</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
      <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
    </section>
    </div> <!-- end aside -->
    </div> <!--end content container-->
<div id="footer">
  <p class=footer>copyright &copy; 2012 Centennial Airport Community Noise Roundtable</p>
  </div> <!--end footer-->
  </div> <!--end container-->
</body>
</html>

The CSS

Code:

@charset "utf-8";
body {
	font: 100%/1.4 Tamoma, Arial, Helvetica, sans-serif;
	background: #B3A693;
	margin: 0;
	padding: 0;
}
ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 15px;
	padding-right: 15px;
	padding-left: 15px;
}
h1 {
	text-indent: -9000px;
	background-image: url(../images/header.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 450px;
}
h2 {
	background: url(../images/post_header.png);
	background-repeat: no-repeat;
	text-indent: -9000px;
	height: 42px;
	width: 362px;
	margin-left: 30px;
}
.footer  {
	padding: 25px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
}
a img {
	border: none;
}
a:link {
	color: #42413C;
	text-decoration: underline;
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	text-decoration: none;
}
#container {
	width: 100%;
	margin: auto;
	padding: 0;
	overflow: hidden;
}
#header {
	margin: auto;
	padding: 0;
	background-image: url(../images/header_bg.png);
	background-repeat: repeat-x;
	height: 474px;
}
#nav {
	margin: auto;
	padding: 0;
	background-image: url(../images/menu_bg.png);
	background-repeat: repeat-x;
	height: 76px;
	width: 100%;
	overflow: hidden;
}
#nav_container ul {
	height: 76px;
	width: 100%;
	padding-left: 15px;
	padding-top: 11px;
	float: left;
	font-family: Tahoma, helvetica, sans-serif;
}
#nav_container ul li {
	display: inline;
}
#nav_container ul li a {
	color: #FFF;
	text-decoration: none;
	border-right: 1px solid #000;
	padding-top: 2px;
	padding-right: 50px;
	padding-bottom: 2px;
	padding-left: 130px;
}
#nav_container ul li a:hover {
	color: #F03;
}
#slider {
	background-image: url(../images/image_slider.png);
	background-repeat: no-repeat;
	height: 379px;
	width: 731px;	
	margin-left: 125px;
	}
#content_container {
	margin: auto;
	padding: 0;
	width: 1012px;
	background-image: url(../images/content_bg.png);
	background-repeat: repeat-y;
	overflow: hidden;
}
#sidebar {
	float: left;
	padding: 5px;
	width: 175px;
	margin-left: 20px;
}
#content {
	padding: 5px;
	width: 350px;
	float: left;
	margin-left: 20px;
}
#aside {
	float:left;
	padding: 5px;
	width: 175px;
	margin-left: 20px;
}
#footer {
	clear: both;
	background-image: url(../images/footer_bg.png);
	background-repeat: repeat-x;
	height: 263px;
	width: 100%;
	overflow: hidden;
}
header, section, footer, aside, nav, article, figure {
	display: block;
}

**RyanReese** · Apr 25, 2012 12:02

You don't set widths on anything, and when there isn't enough space (because you set massive padding), it has to wrap.

Try making these changes (adding/removing)

Code:

#nav_container ul li{display:block;float:left;text-align:center;width:16%}
#nav_container ul li a{padding:2px 0;display:block;

It will still wrap at very small widths, although the page is hardly usable at that point.

If you are still worried, you can set a min-width: on "#nav_container ul"

I'd set the min-width of that, to the minimum width that your content will go to.That way upon resize, it'll stay proportionate to the content area

. Right now you have the content area set to a fixed width of 1000+ pixels. Not a good idea, but going along with my idea, you'd set the min-width of the nav to 1000px. Small screen users will hate you though if you stick with that approach. And users who don't keep their screens at full width

.

**cgacfox** · Apr 25, 2012 12:33

Thanks for your help, Ryan. I have removed the fixed width of the content area....now I need to align the slider, sidebar, content, and aside correctly. I made the content background position center top (which I think is incorrect). That moved the content background image but the actual text area is still to the left. If I float is that better? I keep playing with it and messing it up even more! OMG my brain!!!

**RyanReese** · Apr 25, 2012 20:00

What exactly do you want where? Wasn't clear where you wanted the stuff

.

If you want the text area to the left, float:left probably won't change much. Text by default starts at the top left most range and works from there.

Pictures are worth a thousand words

. I find it easier to see what people want via images. I'm not a bright kid when it comes to understanding people.

**cgacfox** · Apr 25, 2012 20:24

Ryan, I did attach a mockup of what I am working on in the beginning thread. There is a white background with shadow for the main content area. That is the image that was 1012px. I removed the CSS code for that. There will be the slider and below that 3 columns. Hope this helps clear up any misunderstanding.

**dresden_phoenix** · Apr 25, 2012 22:33

BTW, the space at the top and bottom is caused by margin collapse.
either give #header border-top or padding-top to prevent the collapse OR remove the top element's margin manually #header h1{margin-top:0;}. As you develop your site you may see more of these "strange gaps" occurring since you essentially set a lot of general margins: h1, h2, h3, h4, h5, h6, p {margin-top: 15px;}( padding-top: might have been easier to manage.

**cgacfox** · Apr 26, 2012 06:26

Thanks dresden. I will give this a try. As for the general margins, this is what DW generated. I have not finished cleaning it up yet. If I remove the general margins now, would I still use your suggestion?

**cgacfox** · Apr 26, 2012 21:36

I am cleaning up the code and changing px to % and it is coming together nicely. I am currently reading Responsive Web Design by Ethan Marcotte and downloaded Skeleton for a boilerplate. Web design is an ever changing medium and I love learning new things. I appreciate all the help that I have received here and hopefully can return that help in the near future.

User Tag List

Thread: Problems with nav and spaces at top and bottom of page

Thread Tools

Display

Problems with nav and spaces at top and bottom of page

Bookmarks

Bookmarks

Posting Permissions