Easy Clear, ovvero di come non inserire elementi inutili nel codice XHTML
Spesso capita di trovarsi con dei layout con elementi in float senza nulla su cui applicare un clear...
ad esempio:
-
#left, #right {
-
float:left;
-
}
ora, poniamo che abbiate necessità di inserire un background di qualsiasi tipo al wrapper.
l'elemento non terrà conto dell'altezza degli elementi in float.
quindi o si imposta un'altezza fissa (perdendo, di fatto, l'adattabilità al contenuto) o inserite un elemento con un clear:left (o both)...
spesso si usano elementi br (o, arrgghh, dei div vuoti) con classe clear così definita
-
.clear {
-
clear:both;
-
line-height:0;
-
height:0;
-
}
volendo è una soluzione funzionale.
introduce però un elemento inutile nel codice della pagina.
che non è un gran problema in sè...
però è poco elegante ;-)
ci viene incontro il creatore dell'one true layout (metodo che personalmente non mi entusiasma per la complicatezza del tutto e per il numero di hack necessari)
ma sta di fatto che in questo è geniale:
basta applicare all'elemento wrapper la classe clearAfter così definita
-
.clearAfter:after {
-
content: '-';
-
display: block;
-
height: 0;
-
line-height:0;
-
font-size:1px;
-
clear: both;
-
visibility: hidden;
-
}
-
-
.clearAfter {
-
display: inline-block;
-
}
-
/* \ */
-
-
.clearAfter {
-
display: block;
-
}
vedi anche easy clear #2 e easy clear #3
bello spunto che credo si svilupperà ancora in futuro…
su a list apart avevo letto di un metodo (questo: http://www.alistapart.com/arti.....mnlayouts/) che consentiva di avere dei bg di colore fisso alle colonne sfruttando i bordi e i margini in negativo… l’ho anche testato e funziona… ma mi sembra “sporco”… nn mi ha entusiasmato, anche se fa quello che deve fare…
più che altro vorrei vedere come si fa a mettere uno sfondo non tinta unita, visto che i colori sono dati dai bordi dell’elemento contenitore
era una delle maggiori obiezioni che gli son state mosse…
eh eh
allora non dico proprio tutto tutto a cazzo ;-)
Diciamo che per me il problema quasi non si pone, nel senso che l’elemento a cui applicare la classe .clear per me e’ quasi sempre presente. Ovvero un elemento footer in fondo alla pagina.
Essendo che il footer ha una funzione specifica non si tratta di rozzi trucchetti.
a livello di struttura il più delle volte è vero, ma mettiamo che dentro alla colonna principale del sito si debbano posizionare dei box con img a sinistra e testo a destra… o ci sia anche solo una griglia che non merita una tabella… o anche solo una semplicissima struttuara di questo tipo:
<div class=”header”>
<h2>titolo</h2>
<img … />
</div>
in cui hai uno sfondo per la classe header, uno sfondo per l’h2 che deve congiungersi e l’img che deve stare a destra…
in buona sostanza se l’h2 finisce su 2 righe per un copy lungo, ti ritrovi che lo sfondo dell’header non combacia ;-)