XHTML - Formattazione div

**Iwk_Batterio** · 27-07-2006, 18:55

Ho un problema che mi sta facendo impazzire.

Eccovi la mia pagina:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link type="text/css" rel="stylesheet" href="mainstyle.css" />
</head>

<body>
  <div id="struttura">
    <div id="top"></div>
	<div id="welcome"></div>
	<div id="contenuto">
	 <div id="menu"></div> 
	 <div id="posts"></div> 
	</div>
  </div>
</body>

</html>

Ed eccovi il CSS:

codice:

body {
  background-color : #CCCCCC;
  color : #000000;
  margin : 20px;
  font : 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
  text-align : center;
}

#struttura {
  color : #000000;
  width : 830px;
  margin : 20px auto;
  text-align : left;
}

#top {
  background-image : url(images/struttura/top.jpg);
  height : 131px;
}

#welcome {
  background-image : url(images/struttura/welcome.jpg);
  height : 90px;
}

#contenuto {
  width : 830px;
  height : 500px;
  voice-family : inherit;
}

#menu {
  background-color:#0000FF;
  width : 138px;
  height : 336px;
  float : left;
  voice-family : inherit;
}

#posts {
  background-color:#FF0000;
  width : 692px;
  height : 336px;
  margin : 0px 0px 0px 138px;
  voice-family : inherit;
}

Il problema è che con dreamweaver e firefox tutto funziona perfettamente, mentre con IE, i due div "menu" e "posts" che dovrebbero essere uno a fianco all'altro, uno a destra e uno a sinistra, appaiono sballati: sopra "menu" e sotto "posts"

Perchè mai?? E' un bug del browser? Sto sbagliando qualcosa nel css? Come posso sistemare?

Grazie

**seed_squall_it** · 28-07-2006, 10:23

E' un bug di IE, a maggior ragione se in Firefox tutto è corretto. Il tuo box "posts" non è flottante ma è posizionato in modo statico. Tuttavia è preceduto dal box "menu" che è flottante a sinistra. In questo caso, quel demente di IE non sovrappone il box "menu" al margine del box "posts" come è lecito aspettarsi, ma affianca i due box, col risultato che la larghezza totale occupata non è più pari a quella del box "posts" (width + margin-left) ma è pari alla somma delle larghezze dei box "posts" e "menu". Di conseguenza, il box "posts" viene portato sotto il box "menu". Inoltre, se non ricordo male, la larghezza totale del box "posts" è anche aumentata di 3px a causa di un altro bug che si verifica per i margini dei box successivi a dei box flottanti. Prova a eliminare il margine sinistro del box "posts", flotta questo box a sinistra e, subito prima di chiudere il box "contenuto", inserisci un <br class="clear" /> la cui regola di stile è la seguente:

codice:

.clear {
clear: left;
}

Questo ripristina il flusso all'interno del box "contenuto" e ripulisce il float dei due box affiancati, quindi l'altezza del box "contenuto" sarà influenzata da quella del più alto tra i box "posts" e "menu".

**Iwk_Batterio** · 28-07-2006, 13:23

Mitico! Ora funziona con entrambi i browser... però c'è un altro, serio problema. Ti ri-posto il codice aggiornato:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Blog</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link type="text/css" rel="stylesheet" href="mainstyle.css" />
</head>

<body>
  <div id="struttura">
         <div id="top"></div>
	<div id="welcome"></div>
	<div id="contenuto">
	  <div id="menu"></div> 
	  <div id="posts"></div>
	  <br class="clear" /> 
	</div>
	<div id="footer"></div>
  </div>
</body>

</html>

Poi il css:

codice:

body {
  background-color : #CCCCCC;
  color : #FFFFFF;
  margin : 20px;
  font : 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
  text-align : center;
}

.clear {
  clear : left;
}

#struttura {
  color : #FFFFFF;
  width : 830px;
  margin : 20px auto;
  text-align : left;
}

#top {
  background-image : url(images/struttura/top.jpg);
  height : 131px;
}

#welcome {
  background-image : url(images/struttura/welcome.jpg);
  height : 90px;
}

#contenuto {
  width : 830px;
  height : 336px;
  voice-family : inherit;
}

#menu {
  background-image : url(images/struttura/menu.jpg);
  background-repeat:repeat;
  width : 138px;
 height: 336px;
  float : left;
  voice-family : inherit;
}

#posts {
  background-image : url(images/struttura/posts.jpg);
  background-repeat:repeat;
  width : 692px;
  height: 336px;
  float : left;
  voice-family : inherit;
}

#footer {
  background-image : url(images/struttura/footer.jpg);
  width : 830px;
  height : 73px;
  voice-family : inherit;
}

Se inserisco del testo all'interno del box "posts" finchè questo in verticale non supera i 336px non ci sono problemi. Ma se il testo è troppo lungo, ottengo due errori diversi:

- con IE: si allunga solo il box "posts" mentre quello "menu" rimane di 336px, e non va bene.
- con Firefox: il testo allegramente esce dal box "posts", che rimane di 336px.

sai aiutarmi?

**Iwk_Batterio** · 28-07-2006, 13:37

in parole povere mi basterebbe che l'altezza dei due box, menu e contenuto, fosse sempre uguale ma dinamica, è possibile?

**seed_squall_it** · 28-07-2006, 13:51

Semplice: prima di tutto Firefox ha ragione a far "uscire" il testo, poiché hai impostato una height fissa per l'elemento "posts". Firefox, che segue gli standard non aumenta erroneamente l'altezza che tu hai fissato e quindi fa fuoriuscire il contenuto (che è un box anonimo, non un elemento block-level). IE ovviamente sbaglia ad allungarti il box "posts" perché considera height come se fosse min-height. Quindi, il primo passo da fare è eliminare height per entrambi i box "posts" e "menu". I box sono infatti diversi dalle celle delle tabelle in quanto sono indipendenti: se non imposti un'altezza, si adattano ai loro contenuti e non dipendono mai l'uno dall'altro. Devi quindi dare l'illusione che i box siano alti uguali (due colonne "false"). Per fare questo, devi servirti del box "contenuto" che è influenzato dall'altezza del box più alto che contiene (perché hai fatto il clear al suo interno, trattandosi di box flottanti). Devi attribuire a "contenuto" un background-color uguale a quello che vuoi che appaia come colore di sfondo di una delle due "colonne" ("posts" o "menu"). Poi, sempre a "contenuto", devi attribuire un'immagine di sfondo larga come l'altra colonna, alta 1px e del colore che vuoi che l'altra colonna assuma come sfondo. A questo punto usi background-repeat: repeat-y per ripetere solo verticalmente l'immagine di sfondo e usi background-position per posizionare l'immagine di sfondo all'interno del box "contenuto".

**Iwk_Batterio** · 28-07-2006, 14:45

Se ho capito bene con la tua soluzione posso inserire solo un colore di sfondo al box "contenuto", che vada a riempirmi la colonna più corta.

Inoltre non so se sarà più corto il box "menu" o "posts"... dipende dalla pagina, la cosa è variabile, pertanto in base alle circostanze mi serve che venga riempito lo spazio sotto a "menu" oppure sotto a "posts".

Ho trovato una soluzione che non è il massimo dal punto di vista del codice ma che sembra funzionare: ho messo come immagine di sfondo del box "contenuto" l'unione delle due immagini menu.jpg e posts.jpg. La fregatura? Che l'utente deve scaricarsi un 15kb in più...

L'ideale sarebbe riuscire a utilizzare entrambe le immagini menu.jpg e posts.jpg come sfondo del box "contenuto", una a destra e una a sinistra, che si ripetano verticalmente. Non so se sia possibile.

Intanto ti ringrazio perchè questa soluzione mi va già molto bene. Anche se mi sono limitato a copiare, più che a capire, come funziona clear: left.

**seed_squall_it** · 28-07-2006, 18:14

In realtà a te non interessa quale delle due colonne sia più alta: il trucco è applicare un colore di sfondo e un'immagine di sfondo al box che contiene le tue due colonne. Il colore di sfondo sarà lo sfondo di una delle due (di solito la più larga), mentre l'immagine farà da sfondo all'altra colonna. E' chiaro che se devi utilizzare due immagini di sfondo (perché per es. hai un "motivo" grafico diverso che deve ripetersi nelle due colonne) sei costretto a racchiudere il box "contenuto" in un altro box, in modo da applicare due diverse immagini di sfondo ai due box "contenitori" posizionate in modo da non sovrapporsi. I layout a due o più colonne in XHTML sono solo "illusioni", in quanto l'effetto ottico delle colonne è sempre dato da un'immagine e da un colore di sfondo applicati al box che contiene le colonne.

Per il clear è presto detto: quando flotti un elemento, lo estrai dal normale flusso del documento. Quindi l'elemento flottante non influisce su nessun altro elemento posizionato normalmente (ovvero in modo statico). Se un box contiene solo box flottanti e ha altezza non specificata, il box risulterà con altezza nulla e i box flottanti "fuoriusciranno" da esso (IE come sempre attribuisce un'altezza minima di default anche ai box vuoti, ma questa è un'altra storia...). Se rendi flottanti due box consecutivi, ottieni che essi si dispongono uno accanto all'altro perché si trovano sullo "stesso piano" (e cmq non influiscono ugualmente su tutti gli altri box posizionati in modo statico che sono "a un piano inferiore"). Usando la dichiarazione clear: left subito prima di chiudere un box che contiene solo box flottanti, ottieni di ripulire il float e quindi di ripristinare il normale flusso del documento. E poiché l'hai fatto all'interno di un box che contiene solo box flottanti, il ripristino del flusso farà in modo che il box contenitore sia influenzato dall'altezza dei box flottanti al suo interno. Tieni presente che ho usato le espressioni "a un piano inferiore" e "sullo stesso piano" perché il comportamento dei box flottanti è simile a quello dei box posizionati in modo relativo, assoluto e fisso, con la differenza che un box flottante non accetta una dichiarazione di z-index (a meno che non lo dichiari almeno position: relative).

**Iwk_Batterio** · 28-07-2006, 18:26

Eh già... supponevo di dover fare altri box dentro a "contenuto"... ma dopo il layout diventerebbe troppo incasinato! Preferisco far scaricare 15kb in più agli utenti! Comunque grazie della spiegazione.

Per quanto riguarda il clear ho capito tutto, tranne la parte finale, quando inizi a parlare di z-index poi

va be' comunque non è un problema

Grazie di tutto!

**seed_squall_it** · 28-07-2006, 18:37

z-index è una proprietà CSS che consente ai box di guadagnare la terza dimensione nel suo posizionamento. In pratica, permette di sovrapporre un box ad altri box indipendentemente dalla loro posizione nel markup della pagina. La proprietà float è un caso particolare di posizionamento. Infatti, se dichiari il box contenitore come posizionato in modo relativo, i box al suo interno puoi posizionarli in modo assoluto in relazione al box contenitore. L'effetto visivo è identico a quello che ottieni con il float, tranne il fatto che il box contenitore non può più essere influenzato dall'altezza dei box al suo interno perché questi sono "più alti" rispetto alla sua posizione sull'asse z. Nel normale flusso del documento, ogni box ha uno z-index automaticamente maggiore di quello dei box che lo precedono (solo per i box posizionati in modo relativo, assoluto e fisso). I box posizionati in modo statico (ovvero tutti quelli non flottanti e senza una proprietà position dichiarata) sono tutti sullo stesso piano. Accade quindi che se hai due box posizionati in modo assoluto, il secondo box presente nel codice è su un piano più elevato (ha z-index maggiore) di quello che lo precede. Tuttavia, attribuendo manualmente uno z-index al primo box e impostandolo con un valore più elevato di quello del secondo, ottieni che il primo box si trovi su un piano più elevato rispetto al secondo. Se i due box hanno una parte che si sovrappone, l'effetto dello z-index è visibilissimo. z-index accetta come valori numeri interi maggiori di 0 e più è elevato, più il box a cui l'hai attribuito risulterà "alto" rispetto agli altri. Considera l'asse z come l'asse cartesiano della profondità, ovvero un asse che parte dalla tua pagine e viene verso di te perpendicolarmete al piano dello schermo.

**Iwk_Batterio** · 28-07-2006, 19:13

wow!!

Per ora ho sempre fatto siti con le tabelle (si vede, con le conoscenze che dimostro di xhtml e css

). Stavo leggendo un'altra discussione in questo forum in cui si confrontavano le tabelle a xhtml-css. Be' non c'è storia. La seconda scelta è molto più versatile e potente!

Discussione: XHTML - Formattazione div

Strumenti discussione

Ricerca discussione

Visualizza

XHTML - Formattazione div

Permessi di invio