nicht angemeldet
Listenabstand zu groß!
Hallo!
Ich versuche mich gerade an einem CSS Menü, das bei hover die Farbe wechselt:
#nav ul {
list-style-type:none;
margin:0;
padding:0;
background-color:#C5C5C5;
width:170px;
border:1px solid;
}
#nav li {
border: solid 2px #C5C5C5;;
padding:5px 5px 5px 10px;
height:10
}
#nav a {
display:block;
padding:5px 5px 5px 15px;
text-decoration:none;
}
nav a:visited {
font-family:Arial;
font-size:12pt;
color:#000000;
}
nav a:active{
font-family:Arial;
font-size:12pt;
color:#000000;
}
#nav a:hover {
background-color:#3D598B;
color:#FFFFFF;
font-weight:bold;
background-image:url(tux-small.jpg);
background-position:center left;
background-repeat:no-repeat;
border-top:1px solid;
border-bottom:1px slid;
border-color:#9A9A9A;
}
#current {
border-bottom:1px solid #5D5D5D;
border-top: 1px solid #5D5D5D;
background-color:#D7D7D7;
}
Liste:
<div id="nav">
<ul>
<li><a href="#" id="current">home</a></li>
<li><a href="#">html - css</a></li>
<li><a href="#">linux</a></li>
<li><a href="#">visual basic</a></li>
<li><a href="#">guestbook</a></li>
<li><a href="#">forum</a></li>
<li><a href="#">kontakt</a></li>
<li><a href="#">links</a></li>
<li><a href="#">sonstiges</a></li>
</ul>
</div>
Das Problem besteht jetzt darin, dass der Abstand zwsichen den einzelnen li Elementen sehr groß ist! Was kann ich da machen, dass diese kleiner werden?
Grüße,
Fabian
-
Hi,
#nav li {
border: solid 2px #C5C5C5;;
padding:5px 5px 5px 10px;
height:10Das ist kein gültiger Wert.
<div id="nav">
Welchen Zweck hat das div?
Alles, was Du mit dem div machst, kannst Du auch direkt mit dem ul machen.Das Problem besteht jetzt darin, dass der Abstand zwsichen den einzelnen li Elementen sehr groß ist! Was kann ich da machen, dass diese kleiner werden?
da Du ja keine Angaben dazu gemacht hast, richtet sich der margin nach den Angaben im Browser-Stylesheet.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/-
Danke für deine Antwort!
Ich dummer hab das px vergessen. Entschuldigung!
Jetzt funzt es im Mozilla und Firefox aber den IE interessiert das ganze nur wenig :-( Was kann ich noch machen?
-
hi
das <li>-tag ebenso mit margin "stylen"
cu Gwolf
-
Hallo,
Jetzt funzt es im Mozilla und Firefox aber den IE interessiert das ganze nur wenig :-( Was kann ich noch machen?
das ist vielleicht auch noch der box-bug?
So etwas hilft: * html #nav ul li,* html #nav a { padding:0 } erstmal etwas bei deinem Beispiel, aber es hängt beim IE ja auch noch vom doctype ab, und vielleicht fehlt noch was anderes für den IE.
Manchmal hilft beim IE auch float, z.B. hier für den IE 6 eingesetzt: http://www.lipfert-malik.de/webdesign/tutorial/bsp/listenCSSmenu.html; da müsstest du aber hier im Archiv auch noch weitere Informationen zu Listen und IE finden.
Grüsse
Cyx23
-
hi
also ich hab es auch versucht auf allen vier browsern gleiche abstände in unsortierte liste zu bekommen, und auch den einzug -
und es geht:margin-top:0px;
margin-bottom:0px;
margin-left:20px;
margin-right:0px;
padding:0px;aber ich hab auch die schrift auf
margin-top:0px;
margin-bottom:0px;evtl liegts noch am line-height...
und:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-
Hallo,
evtl liegts noch am line-height...
mit line-height kann wohl beim problematischen IE 6 ein ähnliches Resultat
erzielt werden wie in dem von mir genannten Beispiel per float.Wenn ich meine früheren Tests richtig erinnere hat float Vorteile, aber ich
müsste das ggf. nochmal im Detail überprüfen.Grüsse
Cyx23
-
-
-
Hallo,
Jetzt funzt es im Mozilla und Firefox aber den IE interessiert das ganze nur wenig :-( Was kann ich noch machen?
#nav ul li { display:inline; }
sollte helfen.
Gruß,
Shaddai
-
-