nicht angemeldet
float:left-Problem oder Bug?
Habe folgenden Code:
<html>
<head>
<title>Test</title>
<style type="text/css">
ul {
list-style:none;
margin:0; padding:0;
background:green;
overflow:auto;
}
ul li {
float:left;
}
ul li a {
background:yellow;
float:left;
padding:1em;
}
ul li a:hover { background:gray; }
</style>
</head>
<body>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</body>
</html>
Problem: Wenn ich im Firefox auf einen der Links klicke erscheint rechts ein Scrollbalken, hervorgerufen durch overflow:auto.
Ich frage mich nun schon seit mehreren Tagen, warum das so ist und wie ich es wegbekomme.
Notiz: Das ganze soll später mal ein horizontales Navigationsmenü werden.
-
Hallo,
Problem: Wenn ich im Firefox auf einen der Links klicke erscheint rechts ein Scrollbalken, hervorgerufen durch overflow:auto.
Ich frage mich nun schon seit mehreren Tagen, warum das so ist und wie ich es wegbekomme.Bei der Angabe overflow:auto überlässt du das Verhalten dem Browser. Firefox regelt das eben so.
Viele Grüße
Thorsten-
Na doll, und wenn ich <ul> einen Rahmen oder eine Hintergrundfarbe geben will?
-
-
Hi Kuno,
Ich frage mich nun schon seit mehreren Tagen, warum das so ist und wie ich es wegbekomme.
indem du das overflow:auto weglässt (welchen Nutzen sollte das hier haben?).
Im Übgrigen reicht die float Angabe für die <li>s. Deine <a>s sollten display:block bekommen, damit sie ihr jeweiliges <li> komplett ausfüllen. Anstatt mit float kannst du sonst auch mit display inline für die <li>s arbeiten. Guck hier:CSS-basierte Navigationsleisten
Gruß
Antipitch-
Die Antwort ist eher unbefriedigend da sie nicht berücksichtigt, dass ich einen Rahmen um das Menü haben möchte.
<html> <head> <title>Test</title> <style type="text/css"> div.menue { border:1px solid red; } ul { list-style:none; margin:0; padding:0; } ul li { float:left; } ul li a { background:yellow; float:left; padding:1em; } ul li a:hover { background:gray; } </style> </head> <body> <div class="menue"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> </body> </html>es hätte ja auch sein können, dass ich einfach nur dem <ul>-einen Rahmen hätte geben wollen. Dies ist ohne overflow:auto jedoch nicht möglich.
-
Servus,
es hätte ja auch sein können, dass ich einfach nur dem <ul>-einen Rahmen hätte geben wollen. Dies ist ohne overflow:auto jedoch nicht möglich.
Doch, mit overflow:hidden.
Gruss
Patrick--
sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:|
-
-
habe nun mal das beispiel mit dem display:inline ausprobiert und nun taucht ein anderes Problem im Firefox auf:
<html> <head> <title>Test</title> <style type="text/css"> div.menue { border:1px solid red; padding:1em; } ul { width:40em; list-style:none; margin:0; padding:0; } ul li { display:inline; padding:1em; } ul li a { padding:1em; background:yellow; display:inline; } ul li a:hover { background:gray; } </style> </head> <body> <div class="menue"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> </body> </html>Problem: Unter jedem Link ist eine weisse, 1-Pixel-Hohe weisse Linie die auch beim a:hover nochmal deutlich wird. Wo kommt der Scheiss denn jetzt schonwieder her?
-