Dropdownliste
Hajo
- css
Hallo Gemeinde,
gerade las ich den Thread von Steffanie zu diesem Thema. Auch ich bin Anfänger und habe fast das selbe Problem. Nun bin ich auf der Suche zu dem Beispiel <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=Navigation für moderne Browser> und der von mir nachgebauten Liste. Denn bei mir funktioniert das Dropdown zwar unter Opera und Firefox, aber nicht unter IE8.
Hier der HTML-Teil:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link rel="stylesheet" href="list_prob.css" type="text/css" media="all" />
<title>Browser-Problem</title>
</head>
<body>
<div id="rahmen">
<ul id="navi">
<li id="first">
<a>1</a>
<ul id="sub">
<li>
<a>1a</a>
</li>
<li>
<a>1b</a>
</li>
</ul>
</li>
<li>
<a>2</a>
</li>
<li>
<a>3</a>
</li>
</ul>
</div>
</body>
</html>
und der CSS-Teil:
/* CSS Document */
body
{
font-family: Arial;
font-size: 10pt;
}
div
{
clear: left;
}
#navi li
{
display: block;
float: left;
width: 20%;
border: 1px solid;
position: relative;
padding: 0.2em;
}
#sub
{
display: none;
padding: 0;
margin: 0;
position: absolute;
top: 25px;
left: 0.4em;
}
#sub li
{
width: 100;
margin: 0;
padding: 0.2em;
float: none;
}
#sub li a
{
width: 100;
}
ul#navi li:hover ul
{
display:block;
}
ul#navi li:hover
{
color: maroon;
}
Was fehlt da bei mir (ausser Wissen) ?
mit freundlichen Güssen
Hajo
...ups,
Nun bin ich auf der Suche zu dem Beispiel <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=Navigation für moderne Browser> und der von mir nachgebauten Liste.
sollte natürlich heissen:
Nun bin ich auf der Suche zu dem Beispiel <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=Navigation für moderne Browser> und der von mir nachgebauten Liste auf einen Unterschied gestoßen, den ich nicht finde.
Gruß Hajo
»...übrigens habe ich noch hrefs eingefügt - leider ohne Erfolg.
Gruß
Hajo
Nach vielem Vergleichen bin ich auf die allererste Zeile gestoßen. Dort stand bisher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Das habe ich nun gegen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
ausgetauscht - und schon funktioniert hover, d.h. das Dropdown wird angezeigt. Aber nun stimmen plötzlich sämtliche Abstände nicht mehr. Was ist das denn?
Gruß
Hajo
Nach vielem Vergleichen bin ich auf die allererste Zeile gestoßen. Dort stand bisher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
>
> Das habe ich nun gegen
>
> ~~~html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
>
ausgetauscht - und schon funktioniert hover, d.h. das Dropdown wird angezeigt. Aber nun stimmen plötzlich sämtliche Abstände nicht mehr. Was ist das denn?
Gut!
In der strict Version (oder im almost standars mode für transitional mit Adressangabe) werden besonders margins bei floats anders behandelt. Betroffen ist auch eine Regel für kollabierende margins. Im Detail kann ich das jetzt nicht aufzählen.
Natürlich rendert dann auch MSIE gemäss den Erwartungen.
mfg Beat
Hallo Beat,
danke für die Antwort und den Hinweis:
In der strict Version (oder im almost standars mode für transitional mit Adressangabe) werden besonders margins bei floats anders behandelt. Betroffen ist auch eine Regel für kollabierende margins. Im Detail kann ich das jetzt nicht aufzählen.
Natürlich rendert dann auch MSIE gemäss den Erwartungen.
Hab schon fast an meinem Verstand oder meinen Augen gezweifelt. Dann werde ich das mit den margins wohl auch noch hinbekommen.
Gruß Hajo
@@Beat:
nuqneH
Natürlich rendert dann auch MSIE gemäss den Erwartungen.
Dass MSIE gemäß den Erwartungen rendert, ist eher unnatürlich.
Qapla'
@@Hajo:
nuqneH
Was ist das denn?
’ne Super-Ingrid. ;-)
Qapla'
Hi Gunnar.
Was ist das denn?
Steht doch dran: ne Dropdownliste.
;-)
Viele Gruesse,
der Bademeister