Voor de goede orde... Dit werkt bij mij
Deze (dynamisch gegenereerde) css
Code: Select all
@import url("templates/mantorville/css/generic.css");
@import url("templates/mantorville/theme/mantorville/css/theme.css");
body {text-align:center; margin:0px; padding:0px;}
html {height:auto; height:101%;}
body {min-height:101%; height:101%;}
.clearboth {clear:both;width:0px;height:0px;overflow:hidden;}
#wrap-borders {z-index:1;}
#wrap-maincontent {z-index:5;}
#wrap-topcorners {z-index:10;}
#wrap-maincontent {position:absolute;top:10px;left:0px;width:100%;text-align:center;border:none;padding:0px;}
#body-maincontent {width:630px;margin:0px auto 10px auto;text-align:left;border:none;padding:0px}
#wrap-borders {position:absolute;top:10px;left:0px;min-width:650px;width:100%;height:auto;text-align:center;}
#border-11 {width:50px;height:50px;float:left;background:transparent url('templates/mantorville/theme/mantorville/images/border-11-chamfer.png') top left no-repeat;}
#border-12 {width:650px;height:auto;margin:0px auto;background:aqua url('templates/mantorville/theme/mantorville/images/border-12.png') top left repeat-x;}
#border-13 {width:50px;height:50px;float:right;background:transparent url('templates/mantorville/theme/mantorville/images/border-13-chamfer.png') top right no-repeat;}
#border-21 {width:650px;height:auto;margin:0px auto;background:transparent url('templates/mantorville/theme/mantorville/images/border-21.png') top left repeat-y;}
#border-23 {width:650px;height:auto;margin:0px auto;background:transparent url('templates/mantorville/theme/mantorville/images/border-23.png') top right repeat-y;}
#wrap-topcorners {min-width:650px;width:100%;height:10px;position:absolute;top:0px;left:0px;text-align:center;}
#page-topcorners {width:650px;margin:0px auto;}
#border-32 {width:650px;height:10px;margin:0px auto;margin-top:-10px;margin-bottom:-10px;background:transparent url('templates/mantorville/theme/mantorville/images/border-32.png') bottom left repeat-x;}
#border-31 {width:50px;height:50px;float:left;position:relative;top:-40px;margin-bottom:-50px;background:transparent url('templates/mantorville/theme/mantorville/images/border-31-chamfer.png') top left no-repeat;}
#border-33 {width:50px;height:50px;float:right;position:relative;top:-40px;margin-bottom:-50px;background:transparent url('templates/mantorville/theme/mantorville/images/border-33-chamfer.png') top right no-repeat;}
Tesamen met deze body
Code: Select all
<body>
<div id="wrap-maincontent">
<div id="body-maincontent" style="overflow:hidden;padding-top:10px;">
<div style="width:100%;height:0px;"> </div>
<div style="overflow:hidden;"><div class="blog"><div class="blogleading"><div class="itemblock item_0"> <div class="contentitem">
<div class="contentintro"><div><img src="images/stories/453686-140.png" alt="merkkleding"/></div></div> </div>
</div></div></div></div>
<div style="width:100%;height:0px;background:red;"> </div>
</div>
<div id="border-32">
<div id="border-31"> </div>
<div id="border-33"> </div>
</div>
</div>
<div id="wrap-borders"><div id="page-borders"><div id="border-12"><div id="border-21"><div id="border-23"> </div></div></div><div></div>
<div id="wrap-topcorners"><div id="page-topcorners"><div id="border-11"> </div><div id="border-13"> </div><div class="clearboth"> </div></div></div>
</body>
Geeft het resultaat zoals in de bijgevoegde printscreen
Voor de goede orde:
Ik gebruik JavaScript om de schaduwbox borders/achtergrond en de daadwerkelijke content (hier 1 content item met enkel de <img src=bladibla ... ) op dezelfde hoogte te krijgen...
de hoekjes even met een "hoekje' uit een ander schema slice and dice.. je kunt zo even goed zien wat waar zit en wat waar overheen gaat
Negeer even de @import s (die zijn praktisch leeg, enkel een lettertype en background (grijs.png 1x1 repeat)
de box is verdeeld in "negen" blokjes
11 12 13
21 -- 23
31 32 33
in de printscreen zie je 11 linksboven, 13 rechtsboven, 31 linksonder en 33 rechtsonder (allen roze variant)
html volgorde is
1. wrap-maincontent met daarbinnen de mosmainbody al dan niet vergezeld van module posities
tevens hierbinnen de onderkant van de box welke iets naar boven geplaatst met position:relative zodat hij bijv (deels) over een (footer) module zou vallen met twee floats, te weten links voor vakje 31 en rechts voor vakje
floatszindex.png
floatszindex.png
33
2. wrap-border met daarbinnen drie geneste divs, vakje 12, vakje 21 en vakje 23.. gebruik css om de binnenkant op aqua te zetten en de achtergrond plaatjes voor bovenkant en beide zijkanten van de box
3. wrap-topcorners met daarbinnen een linker-float voor hoekje 11 en een rechterfloat over hoekje 13
z-index is zoals het hoort
wrap-topcorners valt immers zoals bedoeld over de content heen...
1. box met bovenkant en zijkanten box, inclusief in dit geval aqua background
2. content (mosmainbody enzo)
(binnen 2: onderkant box, relatief naar boven gepositioneerd. zie de onderste roze hoekjes over de aqua heen)
3. bovenkant box: de hoekjes (roze valt weer inderdaad over aqua)
Over wrap-topcorner kun je uiteraard weer een andere div leggen, bijvoorbeeld link naar de homepage (display block zo breed/hoog)
Juiste z-index en happetekee, je hebt dit (pseudo)
<body>
<wrap><inner><a href="home"><h1>sitename</h1></a></inner></wrap>
<wrap><inner> mosmainbody() </inner></wrap>
dan pas
meer <wrap>jes voor de modules
meer <wrapjes> voor de achtergronden
en dan pas </body>
Gebruik evt spacers voor mosmainbody of css om mosmainbody naar beneden te duwen (daar kunnen namelijk mooi die modules met een hogere z-index
Zo hehe, ben zo blij dat ik mijn vergelijkbaar probleem heb kunnen oplossen... hoop dat je wat aan dit voorbeeld hebt, mocht het nog van toepassing zijn
You do not have the required permissions to view the files attached to this post.
