[CSS] Schaduw rondom een website met dynamische hoogte

[Sheikah]

Hallo allemaal!

Ben weer even bezig met wat webdesign en ik loop nu vast met een stukje in CSS. Hieronder een zo duidelijk mogelijke probleembeschrijving met een link en de belangrijke sourcecode.

Ik heb de website op dit moment opgedeeld in wat div'jes. Aan de bovenkant en onderkant heb ik een schaduw. Nu wil ik dat de hoogte van de linker en rechter schaduw automatisch schaalt. Het probleem is dat het met height op auto of op 100% niet lukt. Dit komt waarschijnlijk omdat er geen echte inhoud is in deze div'jes. Je kunt kijken wat ik op dit moment heb op:

http://www.sheikah.eu/index2.html

Zoals je kunt zien heb ik op dit moment de hoogte statisch ingesteld van de linker en rechterschaduw op 200 pixels.

Ik dacht dat de goede oplossing was om de height op auto te zetten of 100% maar dit werkt niet.

Hier de belangrijke CSS code:


#container
{
width:900px;
position:absolute;
height:auto;
left:50%;
margin-left:-450px;
}

#top_shadow_container
{
width:900px;
height:10px;
float:left;
height:10px;
}

#top_shadow_left
{
width:10px;
height:10px;
background-image:url(../images/top_shadow_left.jpg);
background-repeat:no-repeat;
float:left;
}

#top_shadow_center
{
width:880px;
height:10px;
background-image:url(../images/top_shadow_center.jpg);
background-repeat:repeat-x;
float:left;
}

#top_shadow_right
{
width:10px;
height:10px;
background-image:url(../images/top_shadow_right.jpg);
background-repeat:no-repeat;
float:right;
}

#center_container
{
width:900px;
height:auto;
float:left;
}

#left_shadow
{
width:10px;
height:200px;
background-image:url(../images/left_shadow.jpg);
background-repeat:repeat-y;
float:left;
}

#header
{
width:880px;
height:200px;
float:left;
}

#right_shadow
{
width:10px;
height:200px;
background-image:url(../images/right_shadow.jpg);
background-repeat:repeat-y;
float:right;
}

#bottom_shadow_container
{
width:900px;
height:10px;
float:left;
height:10px;
}

#bottom_shadow_left
{
width:10px;
height:10px;
background-image:url(../images/bottom_shadow_left.jpg);
background-repeat:no-repeat;
float:left;
}

#bottom_shadow_center
{
width:880px;
height:10px;
background-image:url(../images/bottom_shadow_center.jpg);
background-repeat:repeat-x;
float:left;
}

#bottom_shadow_right
{
width:10px;
height:10px;
background-image:url(../images/bottom_shadow_right.jpg);
background-repeat:no-repeat;
float:right;
}


Hier de belangrijke HTML code:


<div id="container">
<div id="top_shadow_container">
<div id="top_shadow_left"></div>
<div id="top_shadow_center"></div>
<div id="top_shadow_right"></div>
</div>

<div id="center_container">
<div id="left_shadow"></div>
<div id="header"></div>
<div id="right_shadow"></div>
</div>

<div id="bottom_shadow_container">
<div id="bottom_shadow_left"></div>
<div id="bottom_shadow_center"></div>
<div id="bottom_shadow_right"></div>
</div>
</div>


Mochten er nog onduidelijkheden zijn graag even melden dan verduidelijk ik het nog verder waar het nodig mocht zijn!

Bij voorbaat heel erg bedankt!

[mknol]

Ik zou ervoor kiezen om alle _shadow_ items absolute te positioneren en dan left, right, top en/of bottom bij alle items gaan gebruiken ipv floats..

Ook handig: Hieronder heb ik ook wat links van interessante manieren om een dropshadow toe te passen met CSS.
http://phoenity.com/newtedge/drop_shadow/
http://www.alistapart.com/articles/cssdropshadows/

[zlk]

als je de top shaduw div nou eens in een container div gooit, met in de container een x repeat bg image van de linkse en rechtse shaduw als 1 image

dan die bottom schaduw div onder de container div

zoals ditte: www,weclaimnothing.com