I’m trying to get the navigation bar to go the length of the container any help?
Just learning. LOL
It depends on how you want this to look, but the easiest thing to do is to change this:
#nav {
background: #FF5B00;
[COLOR="#FF0000"]float: left;[/COLOR]
margin: 0;
padding: 0;
z-index: 11;
}
to this:
#nav {
background: #FF5B00;
[COLOR="#FF0000"]overflow: hidden;[/COLOR]
margin: 0;
padding: 0;
z-index: 11;
}
Doing this the drop down menu will not work.
For clarification, are you asking for the nav bar to stretch to the full width of the page and remain on one line instead of wrapping (I see it wrapping in FF)?
If so, what browser are you using and what is your browser’s default font size?
Yes that is what I want.
Browser Firefox 16 font size.
See if this appeals to you…
I added the code for a modern version of clearfix and added it to #navWrapper by adding the class “cf”. If you are seriously supporting IE6 and 7, you will have to replace it with an earlier version.
Deleted the background: property from ul#nav because it isn’t needed.
Changed the horizontal padding on the anchor elements from 18px to 9px.
Changed the z-indexes associated with the menu items, too.
It’s a close fit, but it works “as designed”. Users who zoom text-only will still experience the same wrapping problem, though.
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*
CSS Reset
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
End of CSS Reset
*/
body {
background-color: #1414cc;
background-image: url(images/body-bg.png);
background-repeat: repeat-x;
}
#mainwrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
#headerwrapper {
height: 160px;
}
#logowrapper {
margin-left: 10px;
padding-top: 4px;
float: left;
}
.phone {
width: 350px;
margin-left: 540px;
padding-top: 40px;
text-align: center;
}
.number {
color: #1414cc;
font-family: helvetica,arial,sans-serif;
font-size: 2.4em;
line-height: 1.1em;
}
.jobs {
font-size: 0.8em;
font-family: helvetica,arial,sans-serif;
line-height: 0;
}
/* rotator in-page placement */
div.rotator {
position:relative;
height:218px;
}
/* rotator css */
div.rotator ul li {
float:left;
position:absolute;
list-style: none;
}
/* rotator image style */
div.rotator ul li img {
background: #FFF;
}
div.rotator ul li.show {
z-index:500;
}
/* ------ modern clearfix ----- */
.cf:before,
.cf:after {
content:"";
display:table;
line-height:0;
}
.cf:after {
clear:both;
}
/* ----------------------------- */
#navWrapper {
background-color: #ff5b00;
}
#nav {
float: left;
margin: 0; padding: 0;
}
#nav li a, #nav li {
float: left;
}
#nav li {
list-style: none;
position: relative;
}
#nav li a {
padding-left: 9px;
padding-right: 9px;
text-decoration: none;
padding-top: 8px;
padding-bottom: 8px;;
text-decoration: none;
color: #ffffff;
background: #ff5b00;
background: -moz-linear-gradient(top, #ff5b00 2px, #ff5b00 18px, #ff5b00 16px);
background: -webkit-gradient(linear, left top, left 25, from(#ff5b00), color-stop(4%, #ff5b00), to(#ff5b00));
/*
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
*/
}
#nav li a:hover {
background: #ff5b00;
background: -moz-linear-gradient(top, #2a0d65, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
right : 0;
bottom: 0;
}
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0; margin: 0;
z-index: 1;
}
#nav li:hover > ul {
display: block;
}
#nav li ul li, #nav li ul li a {
float: none;
}
#nav li ul li {
_display: inline; /* for IE6 */
}
#nav li ul li a {
width: 170px;
display: block;
}
/* SUBSUB Menu */
#nav li ul li ul {
display: none;
}
#nav li ul li:hover ul {
left: 100%;
top: 0;
}
#nav li ul {
}
#centercontent {
width: 675px;
float: left;
border-right-width: 1px;
border-right-style: solid;
padding: 10px;
}
#rightside {
}
#footer {
clear:both;
}
</style>
</head>
<body>
<div id="mainwrapper">
<div id="headerwrapper">
<div id="logowrapper"> <img src="images/logo.png" /> </div>
<div class="phone">
<p class="number"><strong>423.288.6924</strong></p>
<p class="jobs"><strong>Residential & Commercial / Remodels / Repairs / Installations</strong></p>
</div>
</div>
<!-- End of Header Wrapper -->
<div id="navWrapper" class="cf">
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="about.php">Our Company</a></li>
<li><a href="technicians.php">Our Technicians</a></li>
<li><a href="testimonials.php">Testimonials</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Residential Service</a></li>
<li><a href="#">Commercial Service</a></li>
<li><a href="protection.php">Home Protection Plan</a></li>
</ul>
</li>
<li><a href="">Contact Us</a>
<ul>
<li><a href="contact.php">Contact Precision Electrical</a></li>
<li> <a href="employment.php">Employment Oppertunities</a></li>
</ul>
</li>
<li><a href="products.php">Products</a></li>
<li><a href="#">Energy Island</a>
<ul>
<li><a href="powersupply.php">Whole House Power Supply</a></li>
<li><a href="#">Solar Energy</a></li>
<li><a href="#">Wind Generation</a></li>
</ul>
</li>
<li><a href="#">Commercial Energy Services</a>
<ul>
<li><a href="#">Lighting Upgrades</a></li>
<li><a href="tax.php">Tax Benefits</a></li>
</ul>
</li>
<li><a href="request.php">Service Request</a></li>
</ul>
</div>
<div id="content">
<div id="centercontent">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum lorem et nulla posuere lacinia. Phasellus leo turpis, feugiat eu sapien et, eleifend facilisis lectus. Maecenas volutpat nunc ac dolor fringilla lacinia. Etiam dapibus sollicitudin mi, a auctor libero iaculis eu. Mauris cursus molestie commodo. Mauris ut tempor metus. In nec pulvinar magna, vel gravida nunc. Etiam fringilla ipsum leo, sit amet vulputate nunc porttitor vitae. </p>
<p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus non ante id nisi fermentum accumsan sed et diam. Vestibulum odio arcu, porta ut purus ac, vehicula adipiscing mauris. Suspendisse in tortor nec risus pretium malesuada. Nulla facilisi. Maecenas posuere velit nec dolor pellentesque tempus. Mauris tempus accumsan rutrum. Sed laoreet congue felis tristique tristique. Sed eu odio in urna ultricies scelerisque. Aenean lacinia metus sed tortor viverra porta quis a diam. Curabitur sed tristique tortor, vestibulum fermentum massa. Nulla fermentum ligula nisi, eu ornare massa interdum vel. </p>
</div>
<!-- End of Center Content -->
<div id="rightside">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum lorem et nulla posuere lacinia. Phasellus leo turpis, feugiat eu sapien et, eleifend facilisis lectus. Maecenas volutpat nunc ac dolor fringilla lacinia. Etiam dapibus sollicitudin mi, a auctor libero iaculis eu. Mauris cursus molestie commodo. Mauris ut tempor metus. In nec pulvinar magna, vel gravida nunc. Etiam fringilla ipsum leo, sit amet vulputate nunc porttitor vitae. </p>
</div>
<!-- End of Rightside -->
<div id="footer">ttt </div>
<!-- End of Footer -->
</div>
<!-- End of Content -->
</div>
<!-- End of Main Wrapper -->
</body>
</html>
That worked. Thanks
Thanks for the feedback.