Axel Richter: position:relative;

Beitrag lesen

Hallo,

Folgendes problem:
Ich möchte gerne ein submenue auf der linken seite meiner hp erstellen. (mehrere links untereinander)
Die einzelnen links sollten beim hover-effekt nach links (in spaltenbreite!) farblich unterlegt werden.
Um es einfacher zu machen, hätte ich gerne die sich ändernden links in einer tabelle mit gleicher classe definert.

So?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Menü</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
ul.submenu {width:140px; list-style-type:none; margin:0; padding:0;}
ul.submenu li {text-align:right; height:20px; background-color:#00AEAD;}
ul.submenu a,
ul.submenu a:link,
ul.submenu a:visited,
ul.submenu a:active,
ul.submenu a:focus {color:#000; text-decoration:none; display:block; width:100%;}
ul.submenu a:hover {background-color:#003031; color:#FFF;}
-->
</style>
</head>
<body>
<ul class="submenu">
 <li><a href="#">SubMenu Link</a></li>
 <li><a href="#">Bitte!</a></li>
</ul>
</body>
</html>

Beim position:absolute; funktioniert es ja - aber leider bekomme ich es mit *relative; nicht hin. Obwohl sich hier doch nur das elternelement (tabelle) ändert.

Nein. Die Eigenschaften position:absolute und position:relative sind _völlig_ unterschiedlich.

position:absolute
Die Werte der Eigenschaften left, right, top, bottom beziehen sich auf das umgebende Element, sind absolut zum umgebenden Element. Das ist das Element, innerhalb welchem das positionierte Element steht und welches selbst einen von position:static abweichenden Wert hat. Gibt es ein solches umgebendes Element nicht, dann ist der Anzeigebereich des Browserfensters das umgebende Element.

position:relative
Die Werte der Eigenschaften left, right, top, bottom beziehen sich auf die static-Position des positionierten Elements selbst, sind relativ zur normalen Elementposition. Mit position:relative; top:10px; wird das Element also 10px tiefer dargestellt, als es sich aus dem normalen Elementfluss ergeben würde.

http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning

http://www.w3.org/TR/CSS21/visuren.html#relative-positioning

viele Grüße

Axel