- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- immagini irregolari da applicare ad un box di contenuti mediante css
-
immagini irregolari da applicare ad un box di contenuti mediante css
Salve a tutti ho alcuni dubbi sulla soluzione di un problema che riguarda il taglio di una immagine irregolare per un box di contenuti nonché l'applicazione del corretto css per l'implementazione su una pagina web.
Di seguito l'indirizzo dell'immagine a cui mi riferisco:
www .wuala.com/terravulcanica/CSS/Box-con-forma%20irregolare.jpgComposizione dell'immagine:
- sfondo: che potrebbe variare periodicamente, attualmente è una sfumatura dall'alto verso il basso dal bianco al nero;
- box contenitore di forma irregolare con una porzione per il titolo ed una per il contenuto vero e proprio con testo ed immagini. Da considerare che il box dovrà estendersi verticalmente in base alla lunghezza del contenuto.
Problema:
per poter applicare correttamente una tale grafica ad una pagina web ho pensato ovviamente di utilizzare i css ma non sono certo che la soluzione trovata sia quella più corretta e funzionale.
Ho creduto di scomporre il tutto in uno sfondo applicato in un div più esterno, e il taglio in tre pezzi del box contenitore tutte immagini salvate in png per mantenere la loro trasparenza rispetto allo sfondo che cambia: titolo, contenitore e piede del box.Ho pensato di creare un div più esterno "page" per applicare lo sfondo
div#page
{ position:relative; margin: 10px auto; width:920px; background: transparent url(../img/sfondo.jpg) no-repeat;}e tre div interni per la costruzione del box TITOLO e Contenuto del box con testo ed immagini
div#titolo
{ padding:3px; background: transparent url(../img/titolo.png); text-align:center;}
div#centrale
{ padding:3px; background: transparent url(../img/centrale.png); text-align:justify; }
div#piede
{ padding:3px; background: transparent url(../img/piede.png); }Questa suddivisione in tre div però non mi convince molto per questo gradivo un Vostro parere. Esiste una soluzione alternativa e più corretta? forse in qualche modo centra l'utilizzo della proprietà z-index?
Ringazio anticipatamente per qualsiasi suggerimento vogliate darmi.