...

View Full Version : Spread horizontal navigation bar



bradz1993
10-28-2011, 03:36 PM
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:




#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;
}









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

resdog
10-28-2011, 03:53 PM
Assuming you are staying with the four links, edit the css:



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

bradz1993
10-28-2011, 04:03 PM
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?

teedoff
10-28-2011, 05:00 PM
Do you have a link to your site?

resdog
10-28-2011, 05:04 PM
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?

bradz1993
10-28-2011, 05:28 PM
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.

teedoff
10-28-2011, 05:43 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum