PDA

Volledige versie bekijken : kan speciale border makkelijker?

theFlashWizard
%Europe/Berlin %480 %2005, 12:31
ey mensjes,
ik heb een soort van blok met n korte uitleg over een pagina nodig.
deze had ik vormgegeve en gemaakt..
maar er komen nu wel 7 div'jes bij kijken.. :|

Kheb een klein voorbeeldje als bijlage begevoegt.
dit is de html code:
<html>
<head>
<style type="text/css">
<!--

*{
font-family: Century Gothic, Arial, verdana,Sans-Serif;
color: black;
font-size: 12px;
}

h1{
margin: 0px;
line-height: 20px;
font-size: 14px;
font-weight: bold;
color: white
}

div.head{
position: relative;
padding-left: 15px;
left: 0px;
top: 0px;
background: #9C5E2F url(images/tl.gif) no-repeat top left;
}

div.bottomright{
position: relative;
left: 0px;
top: 0px;
width: 100%;
background: url(images/br.gif) no-repeat bottom right;

}

div.bottom{
position: relative;
left:0px;
top: 0px;
width: 100%;
background: url(images/hor.gif) bottom left repeat-x;
}

div.left{
position: relative;
left:0px;
top: 0px;
width: 100%;
background: url(images/ver.gif) top left repeat-y;
}

div.right{
position: relative;
left:0px;
top: 0px;
width: 100%;
background: url(images/ver.gif) top right repeat-y;
}

-->
</style>
</head>

<div style="width: 500px">
<div class="head">
<h1>Pizza Order Form</h1>
</div>
<div class="bottom">
<div class="left">
<div class="right">
<div class="bottomright">
<div style="padding: 5px;">
Cacidi is ontwikkeld voor grafische ontwerpers. Er wordt volledig gebruik gemaakt van de uitgebreide opmaak mogelijkheden van Adobe InDesign.
Uitgangspunt is dat het document 1 maal wordt opgemaakt in Indesign, met verwijzingen naar de gegevens, zodat een update kan worden gerealiseerd.
De teksten worden automatisch opgemaakt en de plaatjes worden automatisch geschaald.
Cacidi Extreme Suite beschikt over de module PageQ, voor het produceren van brochures en catalogi met meerdere pagina's.
</div>
</div>
</div>
</div>
</div>

</body>
</html>

weet iemand of dit echt niet makkelijker of iig met minder div'jes kan?
alvast bedankt!
SubZero
%Europe/Berlin %539 %2005, 13:56
Dit artikel (http://www.alistapart.com/articles/customcorners/) is wellicht wat je zoekt.
theFlashWizard
%Europe/Berlin %546 %2005, 14:06
thnx :)
ik ga ff lezen :)
theFlashWizard
%Europe/Berlin %608 %2005, 15:36
dat was een goede tip :)
ik heb et nu met 3 div'jes kunnen doen ipv 7 :D

1tje om alles in te zetten met als class naam infoblock
1tje voor de titel met de naam head die zit in de infoblock.
1tje voor de eigenlijke info met de naam body, die ook in de infoblock zit.

infoblock bevat de rechter onder hoek, maar omdat ik n plaatje van 500x500px heb gemaakt is hij ook meteen de right en bottom border ;)
dan heeft de head een klein linker bovenhoekje en simpelweg een achtergrond kleur.
en zorgt body met een simpel verticaal lijntje voor de left border.

1 nadeel is wel dat dat rechteronderhoekje meteen 1,7 kb inneemt en ik met mijn oude systeem nog bij de 228bytes bleef ofzo met alle plaatjes..

dit is nu me html:
<html>
<head>
<style type="text/css">
<!--

body{
font-family: Century Gothic, Arial, verdana,Sans-Serif;
color: black;
font-size: 12px;
}

h2{
margin: 0px;
line-height: 20px;
font-size: 14px;
font-weight: bold;
color: white
}

div.infoblock{
position: relative;
background: url(images/br.gif) no-repeat bottom right;
}

div.head{
position: relative;
padding-left: 15px;
background: #9C5E2F url(images/tl.gif) no-repeat top left;
}

div.body{
position: relative;
background: url(images/l.gif) bottom left repeat-y;
padding: 5px;
}

-->
</style>
</head>

<div class="infoblock" style="width: 500px">
<div class="head">
<h2>Pizza Order Form</h2>
</div>
<div class="body">
Cacidi is ontwikkeld voor grafische ontwerpers. Er wordt volledig gebruik gemaakt van de uitgebreide opmaak mogelijkheden van Adobe InDesign.
Uitgangspunt is dat het document 1 maal wordt opgemaakt in Indesign, met verwijzingen naar de gegevens, zodat een update kan worden gerealiseerd.
De teksten worden automatisch opgemaakt en de plaatjes worden automatisch geschaald.
Cacidi Extreme Suite beschikt over de module PageQ, voor het produceren van brochures en catalogi met meerdere pagina's.
</div>
</div>

</body>
</html>