Come chiaro galleggianti per il corretto inserimento di piè di pagina

La maggior parte degli utenti inesperti CSS non hanno mai nemmeno sentito parlare del "chiaro" di proprietà. So che in passato, non ho avuto, e travasato il mio cervello per ore cercando di ottenere il mio layout per visualizzare correttamente con un galleggiante barra laterale. Ecco come funziona:

Quando il rendering divs, il browser normale flusso è posto a uno, poi nel normale flusso delle cose, il luogo del prossimo. Quando si desidera avere divs fianco a fianco, la solita soluzione è quella di aggiungere il "galleggiante" a loro proprietà. Nel caso qui di seguito, sia il "nav-sinistra" div e il "contenuto" div hanno la proprietà "float: left;". Possiamo quindi mettere contenuto all'interno del divs a galla, e hanno un layout felice. Il problema è, non vi è nulla nel normale flusso di cose per continuare il layout, così abbiamo bisogno di dire al browser in modo da spingere le cose verso il basso. Nota questi due esempi:

Errato:

  <div id="wrapper"> 
     <div id="left-nav"> 
         .... 
     </ div> 
     <div id="content"> 
         .... 
     </ div> 
  </ div> 
  <div id = "footer"> <p> Tutto questo testo è nascosto sotto il divs a galla! </ div> 

Corretto:

  <div id="wrapper"> 
     <div id="left-nav"> 
         .... 
     </ div> 
     <div id="content"> 
         .... 
     </ div> 

  <div style="clear: both;"> <! - chiara galleggianti --></ div> 

  </ div> 
  <div id = "footer"> <p> mio piè di pagina ora al di sotto del display a galla elementi! </ div> 

Che un po 'di linea dice al browser di "andare avanti", e si sposta il flusso verso il basso. Il modo più semplice per questa prova è di dare "wrapper" un colore di sfondo, e guardare la differenza di due pezzi di codice quando vi è contenuto in ogni elemento.

Ad alta tecnologia web 2.0 interattiva esempi:

Esempio 1 (errata):

  +--(# involucro )---------------------------------+ 
  | +-----------+ +--------------------+ | 
  +---| |----| |---+ 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | # Nav-sinistra | | # contenuto | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      +-----------+ +--------------------+ 

Esempio 2 (corretta):

  +--(# involucro )---------------------------------+ 
  | +-----------+ +--------------------+ | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | # Nav-sinistra | | # contenuto | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | +-----------+ +--------------------+ | 
  | | 
  | + --- Chiaro: entrambi ----------------------- + | 
  | | 
 +---------------------------------------------+ 

Stumble it!

Post Info

Questa voce è stato postato sul Lunedi, 31 dicembre 2007 ed è elencato sotto css, il design. Esso dispone di 200 punti di vista

Tag: CSS, hack, suggerimenti

Commenti feed. | Lascia un commento | Lascia Trackback.

Post Precedente: Aggiungi il codice di Google Analytics per l'intero sito in un batter d'occhio »
Next Post: AJAX Modulo di contatto »

Più visti posti