...

View Full Version : Resolved menu bar - wont center inline



mjbasford
06-08-2010, 01:15 AM
ok, i think im crazy but either i get the ul inline, or centered, never both. any suggestions
style portion


#mainnav {
position:absolute;
text-align:center;
width: 80%;
background: #1f395a;
top:100px;
left:10%;
border-style:solid;
border-color: transparent transparent #a0aec1;
border-width: 0 1px 4px;
}


#mainnav ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-align:center;
}

#mainnav li {
display: inline;
}

#mainnav a {
text-decoration: none;
display: block;
border-style: solid;
border-color: transparent transparent #a0aec1;
border-width: 0 1px 4px;
padding: 6px 15px 3px;
color: #fff;
font-weight: bold;
font-size: 75%;
}


and html


<ul id="mainnav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a> </li>
</ul>

and there are going to be more items in the li

Thanks in advance

cjsingsaas
06-08-2010, 02:46 AM
The text-align will just center the text inside the element if I'm not mistaken. I would place inside a <div> and center that using left and right auto margins.

mjbasford
06-08-2010, 02:58 AM
still cant get it to work then. I think i have some element of the style that cancels out to center maybe?

tinimic
06-08-2010, 03:10 AM
Try removing display:block; from #mainnav a

mjbasford
06-08-2010, 03:34 AM
Worked! thank you, i knew it was something stupid like that and ive been killing myself the last two nights trying to figure this one out.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum