nicht angemeldet
display:block und elementstruktur
Hallo Forum,
mal eine technische Frage: von der HTML-Spezifikation her ist es nicht erlaubt, Blockelemente in Inlineelementen einzusetzen. Ändert man mit CSS die Eigenschaft display:inline in block, ist das dann erlaubt? Vielen Dankeschön.
mfg Dave
-
Hallo,
mal eine technische Frage: von der HTML-Spezifikation her ist es nicht erlaubt, Blockelemente in Inlineelementen einzusetzen.
Ja, das steht in der entsprechnden HTML-DTD.
Ändert man mit CSS die Eigenschaft display:inline in block, ist das dann erlaubt? Vielen Dankeschön.
Das siehst Du falsch. HTML-Inline-Elemene haben _nicht_ automatisch die CSS-Eigenschaft display:inline. Die CSS-Eigenschaften ändern den HTML-Elementstatus nicht. Sie ändern nur die Anzeige-Eigenschaften.
<a href="#"><img src="bild.gif" alt="Bild" style="display:block;"></a>
ist erlaubt.<a href="#"><p style="display:inline;">Text</p></a>
ist nicht erlaubt.viele Grüße
Axel
-
Hallo Axel,
ich wollte nicht noch einen Thread aufmachen: Kann man bei links mit :hover einen anderen z-index erzeugen? Ich habs mal ausprobiert, entweder es geht nicht oder ich machs falsch :-(
mfg Dave
-
Hallo Dave,
ich wollte nicht noch einen Thread aufmachen: Kann man bei links mit :hover einen anderen z-index erzeugen? Ich habs mal ausprobiert, entweder es geht nicht oder ich machs falsch :-(
Das sollte gehen. Allerdings braucht der IE irgendwas, was das :hover-Ereignis "anschubst". Das alleinige Ändern des z-index reicht nicht. Geckos (Mozilla, Netscape 7 ...) können das auch ohne zusätzliche "Trigger-Aktion".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hover</title>
<style type="text/css">
<!--
a {font-size:40px;}a.b1 {display:block; position:absolute; top:100px; left:100px; border:1px solid black; background-color:#00AEAD; z-index:0;}
a.b1:hover {background-color:#FF7D7B; z-index:2;}a.b2 {display:block; position:absolute; top:120px; left:120px; border:1px solid black; background-color:#AD00FF; z-index:1;}
a.b2:hover {background-color:#FF007B; z-index:2;}
-->
</style>
</head>
<body>
<a class="b1" href="#">Bereich 1</a>
<a class="b2" href="#">Bereich 2</a>
</body>
</html>viele Grüße
Axel
-
-