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 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Spread horizontal navigation bar

    I've created a horizontal navigation bar, however I can't seem to increase the bar across the whole width of the website, so that it lines up to the header.

    Style sheet:

    Code:
    #top
    {
    	margin: 0;
    	background: #fff;
    }
    
    #header
    {
    	background: #7A991A;
    	padding: 20px;
    }
    
    #header h1 { margin: 0; color: #FFFFFF; font-family:"Broadway"; font-size:40px; }
    
    #topnav ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    
    #topnav li
    {
    float:left;
    }
    
    #topnav a:link, #topnav a:visited
    {
    display:block;
    width:150px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:5px 93px 5px 93px;
    text-decoration:none;
    text-transform:uppercase;
    }
    
    #topnav a:hover,#topnav a:active
    {
    background-color:#7A991A;
    }
    
    
    
    .currentpage 
    {
    font-style:italic;
    }
    
    
    
    #content
    {
    	clear: left;
    	padding: 20px;
    }
    
    #content h2
    {
    	color: #000;
    	font-size: 160%;
    	margin: 0 0 .5em;
    }
    
    #footer
    {
    	background: #98bf21;
    	text-align: right ; 
    	padding: 0;
    	height: 70px;
    }
    
    #footer p
    {
    	font-style: italic;
    	padding: 15px 5px 0px 5px;
    }

    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>   
    <head>
    <title>Capability Berwick</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"/>
     
    
    <!-- The external style sheets -->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    
    <meta name="keywords" content="landscape maintenance, gardening, kent, capability berwick">
    <meta name="description" content="Capability Berwick - Landscape Maintenance">
    <meta name="author" content="Bradley Berwick">
    </head>
    
    
    <body>
    
    <div id="top">
    	<div id="header">
    		<h1>
    			Capability Berwick
    		</h1>
    	</div>
    	<div id="topnav">
    		<ul>
    			<li><a href="index.html" > <span class="currentpage"> Home </span> </a>
    			<li><a href="services.html" >Services</a>
    			<li><a href="gallery.html" >Gallery</a>
    			<li><a href="contact.html" >Contact Us</a>
    
    		</ul>
    	</div>
    </div>
    	<div id="content">
    		<h2>
    			Home
    		</h2>
    		<p>
    			About Us
    		</p>
    		<p>
    			N/A
    		</p>
    		<p>
    			Brief History
    		</p>
    		<p>
    		    N/A
    		</p>
    
    	</div>
    	<div id="footer">
        <p> Last updated on 28th Oct 2011<br>   
           Maintained by <a href="mailto:berwick_bradley@mail.com">
           Bradley Berwick</a>
        </p>
        </div>
    
    
    
    
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Assuming you are staying with the four links, edit the css:

    Code:
    #topnav li {
        float: left;
        width: 25%;
    }
    #topnav a:link, #topnav a:visited {
        background-color: #98BF21;
        color: #FFFFFF;
        display: block;
        font-weight: bold;
        padding: 5px 0;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        width: 100%;
    }
    Basically, I made the li have a width of 25% (100% divided by the number of links I have [4]). Then I made the a element have a width of 100% and removed the left and right padding.

    Now the links will span the entire image.

    If you add a link, then the width of each li would be 20%, and so on and so forth.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the reply. But the navigation block still does not span across the whole width to match with the end of both header and footer?

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Do you have a link to your site?
    Teed

  • #5
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    using the code you provided, I added those three changes and it worked on my local machine in Firefox. What browser are you using? And as teedoff asked, can you provide a link to the site?
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Yeah sorry I'm using Chrome and when I went on Firefox it worked fine. The website is not live, its for a uni project.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Ok wait, your other post about your footer, the code you provided there seems to work fine. The nav bar stretches the full width and lines up fine. lol

    You've changed something since then.
    Attached Thumbnails Attached Thumbnails Spread horizontal navigation bar-navbar.jpg  
    Teed


  •  

    Posting Permissions

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