Menüschatten

von sjBlack | 13.01.2008 um 05:24 h

Typ: CSS Anwendungen
Stufe:Einfach

Vorschau - Klick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta name="robots" content="no-index, no-follow, no-cache" />

<meta name="autor" content="sjBlack" />

<meta name="description" content="css Menü-Schatten" />

<style type="text/css">

/* universal-Prolog */

*

{

	margin: 0;

}



html

{

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}



body

{

	margin: 0;

	padding: 25px;

	font: 11px verdana, arial, "courier new";

	color: #DDD;

}



div.menu_shadow

{

	padding: 0 2px 2px 0;

	background: #BBB;

	width: 150px;

}



div.menu

{

	background: #696969;

	border: 2px solid #222;

	padding: 5px;

	position: relative;

	top: -3px;

	left: -3px;

}



div.menu a:link, div.menu a:active, div.menu a:visited

{

	text-decoration: none;

	color: #DDD;

}



div.menu a:hover

{

	color: #FFF;

}

</style>

<title>FAUX COLUMNS</title>

</head>

<body>



<div class="menu_shadow">

	<div class="menu">

		<a href="http://www.google.de/">Ab zu Google!</a><br />

		<a href="http://www.isnichwahr.de/">Ab zu isnichwahr!</a>

	</div>

</div>



</body>

</html>

Ganz simple.
2 divs. die eine div stellt den Schatten dar.
Die div innerhalb dieser ist das Menü.
Durch die relative Positionierung kann man das Menü-div
nun um -3 Pixel horizontal und vertikal positionieren
RELATIV ZU seiner Position im normalen Textfluss!
Genau, ein negativer Wert.

Wenn du deinen Schrank nach rechts verschieben willst, weil
er an der Wand klebt und du eine Steckdose frei haben
willst und du verschiebst den Schrank um -3cm nach rechts,
haste ein schönen Riss in der Wand.

Als aller erstes fällt auf einen Blick auf, dass das Schatten-div,
welches das Menü-div beinhaltet, 2px Innenabstand von
rechts und unten zu dem Menü-div hat.
UND das beinhaltende Menü geht noch um 3 Pixel nach
links und oben raus.

Damit hat man einen schönen Schatten

Hab das auch schon mal auf css4you.de gefunden
http://www.css4you.de/trickkiste/tr00024.html
Aber meine Methode gefällt mir da eher:
- Keine leeren Behälter
- flexible Schattengröße.