PHP interesse |
|
Hoi,
Ik zit even met een klein probleempje.
Ik heb met html/css een menubar gemaakt, werkt allemaal prima. Echter krijg ik het menu niet mooi in het midden (het liefst ook nog justifyd).
Hier mijn voorbeeld: Klik hier
Voorbeeld zoals het zou moeten zijn: Klik hier
mijn html:
<div id="menu">
<ul>
<li><a href="#">Frontpage</a></li>
<li class="break">
<li><a href="#">About</a></li>
<li class="break">
<li><a href="#">News</a></li>
<li class="break">
<li><a href="#">Coverage</a></li>
<li class="break">
<li><a href="#">Staff</a></li>
<li class="break">
<li><a href="#">Matches</a></li>
<li class="break">
<li><a href="#">Archievements</a></li>
<li class="break">
<li><a href="#">Events</a></li>
<li class="break">
<li><a href="#">Sponsors</a></li>
<ul>
</div>
<li><a href="#">Frontpage </a></li> <li><a href="#">About </a></li> <li><a href="#">Coverage </a></li> <li><a href="#">Staff </a></li> <li><a href="#">Matches </a></li> <li><a href="#">Archievements </a></li> <li><a href="#">Events </a></li> <li><a href="#">Sponsors </a></li>
mijn css:
#menu
{
text-align: center;
float: left;
width: 980px;
height: 28px;
margin-bottom: 5px;
background: url( '../images/menu.png' ) top left repeat-x;
}
#menu ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#menu li
{
float: left;
margin: 0;
}
#menu .break
{
display: block;
width: 1px;
height: 28px;
height: 28px;
background-color: #333333;
}
#menu a
{
display: block;
width: auto;
height: 22px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
color: #eeeeee;
padding: 6px 10px 0 10px;
}
#menu a:hover
{
color: #333333;
background: url( '../images/menuHover.png' ) top left repeat-x;
}
#menu { text-align: center; float: left; width: 980px; height: 28px; margin-bottom: 5px; background: url( '../images/menu.png' ) top left repeat-x; } #menu ul { list-style-type: none; margin: 0; padding: 0; } #menu li { float: left; margin: 0; } #menu .break { display: block; width: 1px; height: 28px; height: 28px; background-color: #333333; } #menu a { display: block; width: auto; height: 22px; font-size: 10px; font-weight: bold; text-transform: uppercase; text-decoration: none; color: #eeeeee; padding: 6px 10px 0 10px; } #menu a:hover { color: #333333; background: url( '../images/menuHover.png' ) top left repeat-x; }
bvd, rob.
|