Tipps und Tricks: Menüs mit Schatten
Mit einem einfachen Trick kannst du Menüs im <div>-Container mit einem Schatten versehen und diese ohne absolute Positionierung im normalen Textfluss einfügen.
,
,
,
,
<html>
<head>
<title>Menüs mit Schatten</title>
<style type="text/css">
#shadow{
background-color:#bbbbbb;
width:120px;
height:220px;
margin:10px 0px 0px 10px;
}
#menu{
position:relative;
top:-230px;
width:120px;
height:220px;
background-color:#F0F4D6;
border:1px solid #000000;
}
</style>
</head>
<body>
<div id="shadow"></div>
<div id="menu">
<a href="#">HYPERLINK </a><br><br>
<a href="#">HYPERLINK </a><br><br>
<a href="#">HYPERLINK </a><br><br>
<a href="#">HYPERLINK </a><br><br>
<a href="#">HYPERLINK </a><br><br>
<a href="#">HYPERLINK </a><br><br>
<a href="#">HYPERLINK </a><br><br>
</div>
</body>
</html>
Du benötigst zwei <div>-Container mit gleicher Höhe und Breite. Der erste soll den Schatten darstellen und benötigt daher eine dunkle Hintergrundfarbe. Der zweite enthält das Menü. Um nun den Schatteneffekt herzustellen, muss der zweite <div>-Container versetzt über dem ersten stehen. Dies erreichst du mit der Positionsart relative. Normalerweise wird der zweite <div>-Container im Textfluss unter dem ersten plaziert. Die Positionsangabe top verschiebt den <div>-Container um den angegebenen Wert. In diesem Beispiel sind das -230 Pixel, also 230 Pixel nach oben. Da die Höhe 220 Pixel beträgt, steht dieser um 10 Pixel nach oben versetzt über dem ersten <div>-Container. Und dieser ist mit margin noch um 10 Pixel nach rechts verschoben.
Browser
Der Netscape 4 hat mit solche Dinge arge Probleme. Wenn dich das nicht stört, kannst du diesen Trick bedenkenlos einsetzen.