Creare box arrotondati

[riccardone]

Salve a tutti,

vorrei inserire all'interno di una pagina xhtml 1.0 transitional alcuni box graficamente accattivanti. Ho a disposizione l'immagine grafica del box completa. Ho il dubbio di non stare utilizzando la tecnica migliore per questo scopo.
Quello che faccio e': taglio l'immagine in 3 parti: top, content, bottom.
Metto 3 div che hanno come sfondo le immagini suddette (quello centrale ha impostato l'immagina di sfondo con repeat-y).
Si fa cosi? oppure quale e' una buona tecnica per ottenere dei box decorati con immagini grafiche?

Grazie

[Nikit]

io ti consiglio di usare un solo div e per top e bottom usare degli span con la loro class (immagino userai più volte questi top e bottom).

Esempio

il DIV:
#boxlaterali{
width:200px;
}

Gli ementi dentro il DIV
.top{
display:block;
float:left;
width:200px;
height:30px;
background:#colore url(immaginedisfondo.jpg) 0 0 no-repeat;
}

.contenuto{
display:block;
float:left;
width:200px;
background:#colore;
}

.bottom{
display:block;
float:left;
width:200px;
height:30px;
background:#colore url(immaginedisfondo.jpg) 0 0 no-repeat;
}

Il codice HTML viene cosi:

<div id="boxlaterali">
<span class="top"></span>
<span class="contenuto"></span>
<span class="bottom"></span>
</div>

Non so se sia la soluzione più elegante (probabilmente c'è di meglio) ma è quella che mi è venuta in mente ora.

P.S. dipende dal contesto, non so bene cosa vuoi fare, ma al posto di uno span puoi usare benissimo un titolo (H1,2,3) per la class TOP, questo se usi del testo sopra uno sfondo. Altrimenti usa una delle tecniche di image replacement presenti nei tutorial di html.it se devi usare solo immagini per i titoli nei box (in top).

[lordmarin]

io personalemente farei 3 div, con 2 img in questo modo:

<div id="container">
<div id="containerup">
<div id="containerdown">
</div>
</div>
</div>

#container{
width: 200px;
background: url(img/sfondodelbox) ;
}
#containerup{
width: 200px;
background: url(img/header_box.jpg) no-repeat top center ;
}
#containerdown{
width: 200px;
background: url(img/header_box.jpg) no-repeat bottom center ;
}

Ovviamente è solo una mia idea, ma ha funzionato sempre a meraviglia

[riccardone]

Grazie a tutti e due. Come giustamente e' gia stato notato, deve essere possibile ripetere n volte il box nella stessa pagina e quindi un div con un id credo sarebbe da evitare.
Ad ogni modo provero' anche i vs suggerimenti.

[canzonando]

Io userei i nifty cube, puoi trovare qui su html.it il tutorial e il relativo codice...

[riccardone]

ora ci guardo a questi nifty cube. Comunque, la domanda e' relativa ad una immagine che "devo" usare come sfondo del box. I nifty cube permettono di applicare proprie immagini (es con una certa ombra) al box?

[erredeco]

I nifty cube permettono di applicare proprie immagini (es con una certa ombra) al box?

I Nifty non ricordo, ma i Ruzee Borders di sicuro

http://www.ruzee.com/blog/ruzeeborders