Jak to jasné, plováky pro správné umístění patička

Většina novice CSS uživatelé mají nikdy dokonce slyšel o "jasné" vlastnictví. Vím, že v minulosti jsem neměl, a umístěný v regálu mého mozku hodiny snaží dostat můj layout na displeji správně s plovoucím panelu. Zde je návod, jak to funguje:

Při zobrazování divs, prohlížečů normální tok je na místě jeden, později pak v normální tok věcí, místo pro další. Pokud chcete mít divs bok po boku, je obvyklá řešení je přidat "plavou" vlastnictví k nim. V případě níže, a to jak na "Left-NAV" a div "obsah" div mít ve vlastnictví "float: left;". Můžeme tedy dát obsah uvnitř divs plaval, a mají rádi layout. Problém je v tom, že nic není v normální tok věcí, které pokračujte uspořádání, tak musíme říct, že prohlížeč tlačit na věci dolů. Poznámka: Tyto dva příklady:

Chybné:

  <div id="wrapper"> 
     <div id="left-nav"> 
         .... 
     </ div> 
     <div id="content"> 
         .... 
     </ div> 
  </ div> 
  <div id = "footer"> <p> Všechny tohoto textu je skryta pod plovoucí divs! </ div> 

Správně:

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

  <div style="clear: both;"> <! - jasné plováky --></ div> 

  </ div> 
  <div id = "footer"> <p> Moje patička nyní zobrazuje pod plovoucí prvky! </ div> 

Že jeden malý řádek říká prohlížeči, aby "dál", a přesune stékat. Nejsnazší způsob, jak tento test je dát "obal" barvu pozadí, a podívejte se na rozdíl ve dvou kusech kódu, když je obsah v každém prvku.

High-tech web 2.0 interaktivní příklady:

Příklad 1 (Špatně):

  +--(# wrapper )---------------------------------+ 
  | +-----------+ +--------------------+ | 
  +---| |----| |---+ 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | # Levé-NAV | | # obsah | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      +-----------+ +--------------------+ 

Příklad 2 (správné):

  +--(# wrapper )---------------------------------+ 
  | +-----------+ +--------------------+ | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | # Levé-NAV | | # obsah | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | +-----------+ +--------------------+ | 
  | | 
  | + --- Jasná: jak ----------------------- + | 
  | | 
 +---------------------------------------------+ 

Klopýtnutí to!

Poštovní Info

Tento záznam byl vyslán v pondělí 31. prosince 2007 a je Soubor pod css, design. Má 200 zobrazení

Tagy: css, hacks, tipy

Komentáře Krmivo. | Zanechte komentář | Trackback Nechte.

Předchozí Post: Přidejte Google Analytics kód na vaše webové stránky v celé flash »
Další Post: AJAX Kontaktní formulář »

Nejvíce navštívení míst