FRIHOSTFORUMSSEARCHFAQTOSBLOGSCOMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Angoli arrotondati con i CSS (senza tabelle)





oneoo
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.
misterdimiz
This topic is in italian language. Also i am italian but you have to post in english if you want the member understand you.

Reguards. Confused
Related topics
<hr> stilosi con i CSS
Alguien sabe como hacer una web que no se deforme en mozilla
Final Cut
[help]Que conviene aprender PHP, DOT NET ASP?
[diseño web] Para los que incursionan en CSS
[web]Critica de Sitio Web!
[man]Simular Frames con CSS
Los 50 mejores sitios diseñados en CSS
Ayuda Diseño - Pago Frih $
[Aporte] Como pasar de templates PSD a CSS y HTML
[Aporte] Mini tutorial de AJAX
[tutorial]Efecto de Transparencia con CSS
html5 vs flash
Diseño web
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.