Problema layout a due colonne: estendere background di ciascuna senza "false colonne"

[alex.zeta]

Ciao a tutto il ng!

Ho un layout a due colonne, il cui contenuto è variabile, e che hanno ciascuna un'immagine di sfondo.

la struttura del layout è

<div id="contenitore">

<div id="sidebar"> (immagine di sfondo sidebar-bg.jpg di 220x600)
</div>

<div id="main"> (immagine di sfondo main-bg.jpg di 660x92)
</div>

</div>


Si manifesta il solito problema dell'estensione dell'immagine di sfondo fino a fine pagina, che viene troncato. Credevo di aver risolto impostando height:100% sulle sidebar + main, sul contenitore, e su html+body.

In questo modo però (non ho ben capito il motivo), le immagini di sfondo vengono entrambe tagliate in corrispondenza della colonna più corta.

So che si potrebbe risolvere con il trucco delle "false colonne", impostando un'unica immagine di sfondo che "abbracci" le due colonne, ma le dimensioni dovrebbero essere di ben 880x220 pixel...decisamente troppo pesante.

Si può risolvere in altro modo secondo voi?

Questo è l'url della pagina (magari mi dite anche cosa pensate del sito nascituro...):

Tu e l'arte

Ciao a tutti e grazie per l'attenzione!

Alex

[alex.zeta]

UP...

[Mich_]

Ci sono alcune cose che non capisco in quel layout, e che ho l'impressione ti complicano la vita.

html, body {
 height: 100%; 
 /*questo serve per estendere le img background fino a fondo pagina*/ 
}

Definire l'altezza del body come la finestra, ti blocca lo sfondo alla altezza della finestra, ma non ti blocca i contenuti: potrebbe essere quello che ti da` il problema. Io toglierei la definizione height.

/immagini/header-bg.jpg

E` strana questa immagine: ti da` lo sfondo bianco della header ed un pezzetto dello sfondo scuro: perche`? Non converrebbe dare sfondo chiaro alla header e sfondo scuro a tutto il resto? In tal modo non adoperi nemmenu un'immagine: ti basta il colore di sfondo.

<ul class="trecolonne">...<li class="doppio"> ....

Che significato ha una lista in questo posto? Non sarebbe meglio usare un paragrafo?

[img]immagini/restauratori.jpg[/img]

Questa immagine non puo` stare qui cosi`: deve essere contenuta in un blocco, tipo un

o altro; in alternativa dovrebbe essere resa blocco, ma non so se il validatore HTML lo accetterebbe (ricordo che stai usando la DTD XHTML strict, e quindi devi anche usare le regole di tale DTD).

[alex.zeta]

Innanzitutto Mich grazie per la risposta.

Definire l'altezza del body come la finestra, ti blocca lo sfondo alla altezza della finestra, ma non ti blocca i contenuti: potrebbe essere quello che ti da` il problema. Io toglierei la definizione height.

Ho letto in un tutorial che, per estendere l'immagine di sfondo fino a fondo pagina, occorre impostare il contenitore che la contiene, e i contenitori "padri", al 100% di altezza. Però, come dici tu, questo crea problemi nel momento in cui si scorre la pagina.
Quindi non capisco come posso fare in modo che le due immagini di sfondo (una per la sidebar e una per il main content) arrivino fino a fondo pagina indipendentemente dal contenuto...spero che arrivi qualche dritta!!

E` strana questa immagine: ti da` lo sfondo bianco della header ed un pezzetto dello sfondo scuro: perche`? Non converrebbe dare sfondo chiaro alla header e sfondo scuro a tutto il resto? In tal modo non adoperi nemmenu un'immagine: ti basta il colore di sfondo.

In realtà c'è un'ombra tra il bianco e il marrone...secondo te è tutto troppo scuro?

Che significato ha una lista in questo posto? Non sarebbe meglio usare un paragrafo?

Ho predisposto dei blocchi ul con l'idea di utilizzarli come contenitori a colonne. Uno per la colonna singola (220px), uno per la doppia (440px) e uno per la tripla (660px). Mi serve per poter avere libertà di scegliere come combinare i testi e le immagini che dovrò inserire.
Per esempio: txt da 220px + img da 220px + txt da 220px = 3 colonne; oppure txt da 440px = 2 colonne (come nella pagina pubblicata); oppure txt da 660px = 3 colonne... e così via.
I blocchi ul conterranno sia testo che immagini, quindi concettualmente mi pareva + corretto utilizzare un tag per gli elenchi piuttosto che il tag per i paragrafi.

Questa immagine non puo` stare qui cosi`: deve essere contenuta in un blocco, tipo un

o altro; in alternativa dovrebbe essere resa blocco, ma non so se il validatore HTML lo accetterebbe (ricordo che stai usando la DTD XHTML strict, e quindi devi anche usare le regole di tale DTD).

Giustissimo.. sistemerò, grazie.

Alex

[Mich_]

La mia impressione e` che ti stai complicando la vita.
E con una cosa di quel tipo e` molto difficile dare consigli o correzioni.

Intanto stai usando delle strutture semanticamente sbagliate: vuol dire inserire degli errori (semantici) consapevolmente, per fare delle cose che si fanno molto meglio con le strutture corrette. Senza contare che poi sistemare il CSS di strutture sbagliate diventa difficile (a volte impossibile).

Le "colonne" si fanno affiancando i <div>, ed assegnando float opportuni. Usare le liste e` anche peggio che usare le tabelle (che almeno e` un errore vecchio e molto diffuso, pertanto atteso in qualche modo).

Ed usare una immagine di quel tipo solo per la sfumatura e` inutile ed assurdo.
La sfumatura potrebbe essere un'immagine di pochi px da inserire in fondo al blocco superiore o in cima al blocco inferiore facendola ripetere solo in orizzontale. Non deve coprire tutto lo sfondo.
Inoltre non puoi conscere le dimensioni dei caratteri (il browser puo` sovrascriverle, se le definisci), per cui non puoi sapere quanti px occupa un determinato blocco che contiene testo.

In pratica, quello che sto dicendo e` che dovresti ripartire da zero, magari prendendo spunto dai layout pronti che trovi in giro per la rete (alcuni riferimenti tra i "link utili"). Prima sistema le cose grosse (i vari blocchi, a partire da quelli piu` esterni), e poi le soluzioni per i dettagli si trovano.

[alex.zeta]

Sto ancora facendo esperienza con i css e i tuoi consigli sono preziosi.. grazie davvero.

Ho sostituito le liste con div come da tue indicazioni. Funziona tutto come da mie intenzioni, nel senso che mi permette una certa modularità nel comporre la pagina con testi e immagini che rimangono impaginati all'interno delle colonne anche in caso di ridimensionamento del carattere.

Per quanto riguarda la sfumatura tra la testata e il contenuto principale, risolverò come dici tu.

Per le texture di sfondo ho inserito un'unica immagine a livello di body, che però si sposta indipendentemente dal contenuto quando ridimensiono la finestra.. e qui vedrò di risolvere non appena avrò capito qual'è il motivo.

Ora il layout mi pare funzioni come da mie intenzioni, rimane il footer da sistemare, ma ho visto che sono presenti numerose guide al riguardo.

Inoltre riesco a passare la validazione Strict, e anche questo era uno dei miei scopi.

Stavo pensando di studiare le tecniche di layout utilizzate per realizzare alcuni siti... ce n'è qualcuno che ti senti di consigliarmi?

Ciao e grazie ancora.
Alex