Hai visto gli interessanti box qui sotto? - Sono stati ottenuti piazzando delle immagini in una tabella, giusto? Dunque, non esattamente. Non ci sono tabelle e neppure immagini nel codice sorgente, solo puro XHTML. Puoi leggere i benifici di un approccio simile.
1. Larghezza e altezza fluttuanti
Questo ?stato il codice utilizzato:
<style type="text/css">
<!--
div.uedge {
width: 40%;
background-color: #f9cc72;
background-image: none;
}
div.redge {
background-image: url(img/redge.gif);
background-position: top right;
background-repeat: repeat-y;
}
div.bedge {
background-image: url(img/bedge.gif);
background-position: bottom left;
background-repeat: repeat-x;
}
div.ledge {
background-image: none;
}
div.ulcorner {
background-image: url(img/tlcorner.gif);
background-position: top left;
background-repeat: no-repeat;
}
div.urcorner {
background-image: url(img/trcorner.gif);
background-position: top right;
background-repeat: no-repeat;
}
div.blcorner {
background-image: url(img/blcorner.gif);
background-position: bottom left;
background-repeat: no-repeat;
}
div.brcorner {
background-image: url(img/brcorner.gif);
background-position: bottom right;
background-repeat: no-repeat;
padding: 15px 30px 30px 15px;
}
div.innercontent {
width: 100%;
}
-->
</style>
<div class="uedge">
<div class="redge">
<div class="bedge">
<div class="ledge">
<div class="ulcorner">
<div class="urcorner">
<div class="blcorner">
<div class="brcorner">
<div class="innercontent">
<p>Il contenuto del box va qui..</p>
<p>Il box pu?nbsp;essere di qualunque larghezza e altezza.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2. Larghezza fissa, altezza fluttuante
Questo ?stato il codice utilizzato:
<style type="text/css">
<!--
div.middle {
width: 272px;
background-image: url(img/middle.gif);
background-repeat: repeat-y;
}
div.top {
background-image: url(img/top.gif);
background-position: top left;
background-repeat: no-repeat;
}
div.bottom {
background-image: url(img/bottom.gif);
background-position: bottom left;
background-repeat: no-repeat;
padding: 15px 30px 30px 15px;
}
-->
</style>
<div class="middle">
<div class="top">
<div class="bottom">
<p>Il contenuto del box va qui..</p>
<p>Il box ?nbsp;largo 272px e l'altezza cambia a seconda del contenuto.</p>
</div>
</div>
</div>
Ho testato il lavoro con MsIE 5/6, Mozilla e Opera 6 su Windows 98. Per favore riportatemi pure problemi di incompatibilit?su mprokop@prokopsw.cz (in english, please). Grazie.
1. Larghezza e altezza fluttuanti
Questo ?stato il codice utilizzato:
<style type="text/css">
<!--
div.uedge {
width: 40%;
background-color: #f9cc72;
background-image: none;
}
div.redge {
background-image: url(img/redge.gif);
background-position: top right;
background-repeat: repeat-y;
}
div.bedge {
background-image: url(img/bedge.gif);
background-position: bottom left;
background-repeat: repeat-x;
}
div.ledge {
background-image: none;
}
div.ulcorner {
background-image: url(img/tlcorner.gif);
background-position: top left;
background-repeat: no-repeat;
}
div.urcorner {
background-image: url(img/trcorner.gif);
background-position: top right;
background-repeat: no-repeat;
}
div.blcorner {
background-image: url(img/blcorner.gif);
background-position: bottom left;
background-repeat: no-repeat;
}
div.brcorner {
background-image: url(img/brcorner.gif);
background-position: bottom right;
background-repeat: no-repeat;
padding: 15px 30px 30px 15px;
}
div.innercontent {
width: 100%;
}
-->
</style>
<div class="uedge">
<div class="redge">
<div class="bedge">
<div class="ledge">
<div class="ulcorner">
<div class="urcorner">
<div class="blcorner">
<div class="brcorner">
<div class="innercontent">
<p>Il contenuto del box va qui..</p>
<p>Il box pu?nbsp;essere di qualunque larghezza e altezza.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2. Larghezza fissa, altezza fluttuante
Questo ?stato il codice utilizzato:
<style type="text/css">
<!--
div.middle {
width: 272px;
background-image: url(img/middle.gif);
background-repeat: repeat-y;
}
div.top {
background-image: url(img/top.gif);
background-position: top left;
background-repeat: no-repeat;
}
div.bottom {
background-image: url(img/bottom.gif);
background-position: bottom left;
background-repeat: no-repeat;
padding: 15px 30px 30px 15px;
}
-->
</style>
<div class="middle">
<div class="top">
<div class="bottom">
<p>Il contenuto del box va qui..</p>
<p>Il box ?nbsp;largo 272px e l'altezza cambia a seconda del contenuto.</p>
</div>
</div>
</div>
Ho testato il lavoro con MsIE 5/6, Mozilla e Opera 6 su Windows 98. Per favore riportatemi pure problemi di incompatibilit?su mprokop@prokopsw.cz (in english, please). Grazie.
