Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Navigation bar vertical padding problem

    Basically I have a div with ID 'mainnav', inside this I have an unordered list with ID of 'unorderednav', problem being: if I set mainnav's height to auto, then I go to set the top and bottom padding of the mainnav, when it isn't set there is no space obviously, however when it is set regardless of the values there is a big space between the unorderednav and the top and bottom of mainnav

    Pictures to illustrate;
    http://www.sendspace.com/filegroup/I...rQ1XHhBX%2F63g

    Code:
    Code:
    <!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Home - William Holstein Professional Tree Services</title>
        <link rel="stylesheet" type="text/css" href="theme.css"/>
    	<script src="jquery.js" type="text/javascript"></script>
        <script src="animations.js" type="text/javascript"></script>
    </head>
    
    <body>
    	<div id="pagewrap">
        	<header id="pageheader">
                <h1 id="firstline">William Holstein<br/>
                <span id="secondline">Professional Tree Services</span></h1>
                <p id="numberhead">Tel: 0000 000000 Mob: 00000000000</p>
                <hr id="headersplit"/>
            </header>
            <div id="slideshow">
                <div>
                    <img src="images/image1.jpg"/>
                </div>
                
                <div>
                    <img src="images/image2.jpg"/>
                </div>
                
                <div>
                    <img src="images/image3.jpg"/>
                </div>
                
                <div>
                    <img src="images/image4.jpg"/>
                </div>
                
                <div>
                    <img src="images/image5.jpg"/>
                </div>
                
                <div>
                    <img src="images/image6.jpg"/>
                </div>
                
                <div>
                    <img src="images/image7.jpg"/>
                </div>                                                          
    		</div>
            <nav id="mainnav">
                <ul id="unorderednav">
                    <li class="leftmost"><a href="" class="current">Home</a></li>
                    <li><a href="About.html">About</a></li>
                    <li><a href="Services.html">Services</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="Contact.html">Contact</a></li>
                </ul>
            </nav>
    	</div>
        <footer id="mainfooter">
        </footer>
    </body>
    
    </html>
    Code:
    @charset "utf-8";
    body{
    	background-color: #333;
    	font-family: Verdana, Geneva, sans-serif;
    	padding: 0px;
    }
    
    #pagewrap {
    	border-top-left-radius: 20px;
    	background-color: #999;
    	margin-top: 2px;
    	margin-right: auto;
    	margin-bottom: 15px;
    	margin-left: auto;
    	height: 1200px;
    	width: 980px;
    	padding-top: 0px;
    	padding-right: 20px;
    	padding-bottom: 0px;
    	padding-left: 20px;
    	-moz-box-shadow:    0px 0px 20px #111;
    	-webkit-box-shadow: 0px 0px 20px #111;
    	box-shadow:         0px 0px 20px #111;
    }
    #firstline{
    	font-size: 47px;
    	text-align: right;
    	float: right;
    	color: #333333;
    	text-shadow: 1px 1px 5px #111;
    	font-weight: normal;
    	margin-bottom: 10px;
    }
    #secondline{
    	font-size: 16px;
    	letter-spacing: 6px;
    	text-shadow: 1px 1px 5px #111;
    }
    #numberhead{
    	color: #666666;
    	position: relative;
    	top: 80px;
    	font-size: 12px;
    }
    #headersplit{
    	width: 100%;
    	color: #DDADDD;
    	border: 0px;
    	border-top: 1px solid #888888;
    }
    #slideshow{ 
        margin: 20px auto; 
        position: relative; 
        width: 940px; 
        height: 400px; 
        padding: 0px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    	-moz-box-shadow: 0px 0px 20px 1x #777777;
    	-webkit-box-shadow: 0px 0px 20px 1px #777777;
    	box-shadow: 0px 0px 20px 3px #777777;
    }
    
    #slideshow > div{ 
        position: absolute; 
    }
    #mainnav{
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
            /*
            padding-top: 5px;
            padding-bottom: 5px;
            */
    	width: 940px;
    	height: auto;
    	background-color: #555555;
    	font-size: 14pt;
    	font-family: Georgia, "Times New Roman", Times, serif;
    
    }
    #unorderednav{
    	width: 740px;
    	margin-left: auto;
    	margin-right: auto;
    }
    #unorderednav li{
    	display: inline;
    	padding: 0px 40px;
    	border-right: 1px solid #cccccc;
    }
    #unorderednav .leftmost{
    	border-left: 1px solid #cccccc;
    }
    #unorderednav li a{
    	text-decoration: none;
    	color: #CCCCCC;
    }
    
    #mainfooter {
    	width: 980px;
    	text-align: center;
    	color: #888888;
    	margin-right: auto;
    	margin-left: auto;
    	font-size: 13px;
    	margin-bottom: 0px;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello harvs899,
    It's kind of difficult to explain what you're seeing but you've run into the uncollapsing border bug.

    By adding padding, you reveal the default 18px top and bottom margin on all ul's. Try making your CSS look like this -
    Code:
    #mainnav {
    	display: block;
    	margin: 0 auto; 
      padding: 5px 0; 
    	width: 940px;
    	background-color: #555555;
    	font-size: 14pt;
    	font-family: Georgia, "Times New Roman", Times, serif;
    }
    #unorderednav {
    	width: 740px;
      margin: 0 auto;
    }
    That last line, margin: 0 auto; does away with the default top/bottom margin.

    ...
    You should also look into clearing floats here. Your <header> has uncleared floats.
    Try adding this to your CSS -
    Code:
    hr {clear: both;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok thank you that worked! Now for the problem of evenly spacing the items but I want them all to take up the full bar, similar to this but they would take up the whole bar http://www.sendspace.com/file/y9noiy, any ideas?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •