Ok so I'm trying a somewhat different technique for my navigation bar for a clients website and I'm completely stumped as to why it won't center. I also want it to shrink with the size of the page. I usually make the ul width=100%, but when I do that here it will make my links go to the next line without the image behind it. My idea is to have this fixed so it will always be there when people scroll through the page.
HTML
<div class="menu_wrap">
<div class="menu_links">
<ul>
<li><a class="first" href="home.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="start.html">Getting Started</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li>
<n><img src="img/logobar.jpg" width="250" height="150"/></n>
</li>
<li><a href="faqs.html">FAQ's</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</div>
</div>
CSS
/* start of navbar */
.menu_wrap {
float:left;
z-index: 60;
width: 100%;
height: 69px;
background-image: url(img/lw.jpg);
background-repeat:repeat;
box-shadow: 0px 2px 5px #000000;
position: fixed;
margin-top:40px;
}
.menu_links ul {
width: 100%;
height: 92px;
list-style: none;
box-shadow: 0px 2px 5px #000000;
}
.menu_links ul li {
display: inline;
float:left;
height: 92px;
}
.menu_links ul li n{
font-family: "Brush Script MT";
font-weight: normal;
font-size: 41px;
color: #FFF;
line-height: 1.2em;
letter-spacing: -.0.03em;
margin-top: -40px;
text-align:center;
text-decoration: none;
box-shadow: 0px 2px 5px #000000;
display: block;
border-right-width: 1px;
border-right-style: solid;
border-right-color:#000;
}
.menu_links ul li a {
float:left;
margin-top: 0px;
line-height: 70px;
padding-right: 20px;
padding-left: 20px;
color:#FFF;
font-weight:900;
font-size: 12px;
text-decoration: none;
text-shadow: -1px -1px 1px #333;
border-right-width: 1px;
border-right-style: solid;
border-right-color:#000;
display:inline-block;
}
.menu_links ul li a:hover {
color:#CCC;
text-shadow: -1px -1px 1px #EEE;
background-image: url(img/navbar.png);
background-position: center;
}
.menu_buttons {
float:right;
line-height: 50px;
height: 50px;
margin-right: 30px;
}
.menu_buttons ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu_buttons ul li {
display: inline;
height: 50px;
}
.menu_buttons ul li a {
float:left;
padding-right: 10px;
display: block;
border:none;
line-height: 50px;
padding-left: 10px;
height: 50px;
padding-top: 10px;
}
.first {
border-left-width: 1px;
border-left-style: solid;
border-left-color:#000;
}
.menu_links {
height: 50px;
float: left;
margin-left: 0px;
}
/*end of navbar */
I would give you a link to the page but it's being done in Dreamweaver and is not up yet. The logobar.jpg is the logo for the webpage. I love how it looks, but it needs to be centered and not be cut off or taken to the next line when I shrink my screensize.
Things I've tried are
float: right, left, none on almost all of the classes text-align: center on each class on the html side I have tried align=center on each class display: inline, inline-block on ul and li classes
no I didn't actually put float: right, left, none. I did them one by one and used float: right;. float:left;. then float:none;.
Thank you for your help!
A fantastic way to center elements on a page is to use:
margin:0 auto;on the element you'd like centered. For example:
HTML:
<div id="wrap">
<ul>
<!-- *list items here* -->
</ul>
</div>
CSS:
#wrap {
width:100%;
}
#wrap ul {
width:960px; /* or however wide you'd like your menu */
margin:0 auto;
}
I set up a fiddle to demonstrate at http://jsfiddle.net/m65rr/. Hope this helps.