Hoe duidelijk praalwagens voor de juiste plaatsing voettekst

De meeste beginnende gebruikers CSS heb zelfs nog nooit gehoord van de "duidelijke" eigendom. Ik weet dat in het verleden had ik niet, en geïnstalleerd, mijn hersens uren geprobeerd om mijn lay-out correct weer te geven met een zwevende zijbalk. Hier is hoe het werkt:

Wanneer rendering divs, de browsers normale doorstroming is het plaatsen van een, dan nadien in de normale doorstroming van de dingen, plaatst u het volgende. Wanneer u wilt hebben divs naast elkaar, de gebruikelijke oplossing is om de "float" voorwerpen voor hen. In het geval hieronder, zowel de "links-nav" div en de "inhoud" div hebben de eigenschap "float: links;". We kunnen dan worden uitgevoerd inhoud van de dreven divs, en hebben een vrolijke lay-out. Het probleem is, is er niets in de normale doorstroming van de dingen te gaan met de lay-out, dus we moeten vertellen de browser om dingen neer. Opmerking deze twee voorbeelden:

Onjuist:

  <div id="wrapper"> 
     <div id="left-nav"> 
         .... 
     </ div> 
     <div id="content"> 
         .... 
     </ div> 
  </ div> 
  <div id = "footer"> <p> Al deze tekst is verborgen onder de dreven divs! </ div> 

Correct:

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

  <div style="clear: both;"> <! - duidelijke praalwagens --></ div> 

  </ div> 
  <div id = "footer"> <p> My Footer toont nu ook onder de zwevende elementen! </ div> 

Dat een kleine regel vertelt de browser op "ga verder", en beweegt de stroom omlaag. De eenvoudigste manier om dit te testen is het geven van "wrapper" een achtergrondkleur, en kijkt naar het verschil in de twee stukken code als er sprake is van de inhoud van elk element.

High-tech web 2.0 interactieve voorbeelden:

Voorbeeld 1 (Incorrect):

  +--(# wrapper )---------------------------------+ 
  | +-----------+ +--------------------+ | 
  +---| |----| |---+ 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | # Links-nav | | # content | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      +-----------+ +--------------------+ 

Voorbeeld 2 (Correct):

  +--(# wrapper )---------------------------------+ 
  | +-----------+ +--------------------+ | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | # Links-nav | | # content | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | +-----------+ +--------------------+ | 
  | | 
  | + --- Clear: both ----------------------- + | 
  | | 
 +---------------------------------------------+ 

Struikelen it!

Post Info

Dit item is gepost op maandag, 31 december 2007 en is gearchiveerd onder css, design. Het heeft 198 views

Tags: css, hacks, tips

Reacties Feed. | Laat Comment | Laat Trackback.

Vorige Post: Voeg Google Analytics-code op uw gehele website in een flash »
Volgende Post: AJAX Contact formulier »

Meest bekeken posts