nicht angemeldet
Da der diffuse Schatten nicht durch eine Farbe dargestellt werden kann, benötigst Du ein Hintergrundbild (oder mehrere Hintergrundbilder bei abgerundeten Ecken des Schatten).
Bei einem umlaufendem Schlagschatten kämst Du mit einem Rahmen aus :-)
Was willst Du nun?
Mir ist ist der Unterschied zwischen einem "diffusen Schatten" und einem "umlaufenden Schlagschatten" nicht so wirklich klar.
Du schreibst, dass ich bei einem umlaufendne Schlagschatten mit einem Rahmen auskomme. Brauche ich dann keine Hintergrundgrafiken? Falls ja, wäre ich sehr dankbar, wenn du mir sagen könntest wie das geht.
Ich hab das mal so gemacht. Das dumme ist das ich zusätzliche DIV-Container brauche (nur wegen der Schattenhintergrundgrafiken). Auf die würde ich am liebsten verzichten. Ist das möglich?
<body>
<div id="border-left">
<div id="border-top">
<div id="edge-tl"> </div>
<div id="edge-tr"> </div>
</div>
<div id="border-right">
<h1 id="header">Titel der Seite</h1>
<ul id="navigation">
<li>Auswahl 1</li>
<li>Auswahl 2</li>
<li>Auswahl 3</li>
</ul>
<p id="content">Hier landet der eigentliche Inhalt</p>
<address id="footer">hier kommt das copyright hin<address>
</div>
<div id="border-bottom">
<div id="edge-bl"> </div>
<div id="edge-br"> </div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
width: 950px;
margin: 20px auto;
}
#header {
background: green;
}
#navigation {
float: left;
background: blue;
}
#content {
float: right;
background: red;
}
#footer {
clear: both;
background: yellow;
}
#border-top {
overflow:hidden;
width: auto;
height: 20px;
font-size:0;
margin-bottom: -15px;
background-image: url(border_top.gif);
background-repeat:repeat-x;
background-position:top left;
}
#border-bottom {
overflow:hidden;
width: auto;
height: 20px;
margin-top: -15px;
font-size:0;
background-image: url(border_bottom.gif);
background-repeat:repeat-x;
background-position:bottom left;
}
#border-left {
border: 0 none;
background-image: url(border_left.gif);
background-repeat:repeat-y;
background-position:left;
}
#border-right {
border: 0 none;
margin: 0 0 0 5px; padding: 0 5px 0 0;
background-image: url(border_right.gif);
background-repeat:repeat-y;
background-position:right;
}
#edge-tl {
float:left;
width: 20px;
height: 20px;
font-size:0;
background: url(corner_tl.gif) top left;
}
#edge-tr {
position:relative; /* IE Fix | z-index */
float: right;
width: 20px;
height: 20px;
font-size:0;
background: url(corner_tr.gif) top right;
}
#edge-bl {
float:left;
width: 20px;
height: 20px;
background: url(corner_bl.gif) bottom left;
}
#edge-br {
position:relative; /* IE Fix | z-index */
float:right;
width: 20px;
height: 20px;
background: url(corner_br.gif) bottom right;
}
JürgenB
Auge