background, repeat, altezza, boxmodel.. sto impazzendo!

  • Creatore Discussione Creatore Discussione ntoflip
  • Data di inizio Data di inizio

ntoflip

Utente Attivo
26 Ago 2008
50
0
0
Ciao a tutti, prima di postare qualcosa qui, giuro che faccio mille ricerche, ma neanche 'sta volta sono venuto a capo di un problema, per me, apparentemente semplicissimo. Per essere chiaro allego delle immagini che mi aiuteranno a spiegarmi meglio.

Allora.. io vorrei ottenere un'elemento in una pagina web che appaia come nell'immagine sfondo.jpg.. (l'immagine allegata è ridotta al 20%) questo elemento farà da contenitore di altre cose e quindi avrà un'altezza variabile, mentre la larghezza resterà sempre uguale..

Per ottenere un simile effetto ho pensato di dividere l'immagine sfondo.jpg in 8 pezzi, 4 linee da 1px che mi daranno le sfumature laterali e 4 angoli che raccorderanno tali sfumature.. Così avro ottenuto una cornice al contenuto dell'elemento. L'immagine schema_sfumature.jpg ne dovrebbe illustrare il funzionamento..
Mentre l'immagine schema_boxmodel.jpg dovrebbe rendere l'idea di come ho provato ad impostare l'elemento in html: ho un box (div) contenitore che contiene tutto (evidenziato in grigio) e al suo interno ho altri tre box (div - evidenziati in rosso) che a loro volta contengono tre box (span - evidenziati in verde) ciascuno.

Ho allegato anche un file zip che contiene gli 8 pezzi che vengono usati come background-image degli span esterni mentre quello centrale avrà una tinta unita..

Il mio problema riguarda le colonne laterali nelle quali non riesco a impostare un'altezza automatica con la loro relativa immagine che si ripete.. Se serve vi posto l'intero codice, aiutatemi per favore!!
 

Allegati

  • sfondo.jpg
    sfondo.jpg
    32,6 KB · Visite: 592
  • schema_sfumature.jpg
    schema_sfumature.jpg
    29,6 KB · Visite: 424
  • schema_boxmodel.jpg
    schema_boxmodel.jpg
    30 KB · Visite: 407
  • immagini_sfondo.zip
    immagini_sfondo.zip
    6,4 KB · Visite: 382
ciao
non so se ho capito bene, ma mi sembra che se tu inserissi nei div con ? immagine di sfondo (prendiamo es a destra) il tuo css dovrebbe essere (salvo errori ed omissioni)

div.conPuntoInt_a_dx{
background-image: con_sfuma_a_dx.jpg;
background-repeat:repeat-y;
background-position:right;

width:/* uguale al div sovrastante*/
/*display ecccc...*/
}

quello a sinistra simile
se ho capito male, scusa
 
Grazie borgo, ho risolto eliminando i div laterali e mettendo un'immagine di sfondo all'elemento centrale per tuttetre le righe di divisione.. Ho diviso l'immagine in tre pezzi.. un po' più pesanti ma va bene.. così.

Il problema era che lo sfondo nei "div ?" non mi si ripeteva perchè erano vuoti.. mah?!?
 

Discussioni simili