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