Hi. Ich habe mir eine Navigationsleiste erstellt:
HTML
<div id="mainMenu" align="center">
<ul class="liste">
<li class="active left">
<a href="/index.php">Forum</a>
</li>
<li class="inactive">
<a href="/regeln.php">Regeln</a>
</li>
<li class="inactive">
<a href="/mitglieder.php">Mitglieder</a>
</li>
<li class="inactive">
<a href="/team.php">Team</a>
</li>
<li class="inactive">
<a href="/ucp.php">UCP</a>
</li>
</ul>
</div><!-- mainMenu -->
Alles anzeigen
und wollte diese mittig setzen. Das klappte auch. Nur bekomme ich den Abstand zwischen den <li>s nicht weg.
Bisher ist mein Code so.
CSS
* {margin: 0px; padding: 0px;}
mainMenu .liste li {
margin: 150 px;
padding: 0.5em;
display: inline-block;
list-style: none;
transition: background-color 0.4s;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#mainMenu .liste li.left {
border-left: none;
}
#mainMenu .liste li.active {
background: #CCCCCC;
border-bottom: none;
}
#mainMenu .liste li.inactive {
background: #AAAAAA;
}
#mainMenu .liste li.active:hover {
background: #AAAAAA;
}
#mainMenu .liste li.inactive:hover {
background: #CCCCCC;
}
#mainMenu .liste li a {
color: #000000;
text-decoration: none;
}
#mainMenu .liste li a:hover {
text-decoration: underline;
}
Alles anzeigen
Habe schon mit float:left und text-align:center versucht wie mir gesagt wurde doch dann war der Abstand weg, nur es war alles links
Bitte seit nicht zu streng mit wir weil der Code unprofessionell ist. Bin noch ein Anfänger. Doch bitte helft mir.
MFG Acrio