De bovenstaande koppelingen geven een basisnavigatiestructuur aan in een ongenummerde lijst die is opgemaakt met CSS. Als u dit als basis gebruikt, kunt u de eigenschappen aanpassen om de structuur aan te passen aan uw voorkeuren. Als u vlieguit-menu’s wilt gebruiken, kunt u deze zelf maken met een Spry-menu, een menuwidget van Adobe Exchange, of met een van de vele andere JavaScript- of CSS-oplossingen.

Als u de navigatie bovenaan wilt houden, verplaatst u ul.nav naar de bovenkant van de pagina en past u een nieuwe stijl toe.

Instructies

Houd er rekening mee dat de CSS voor deze lay-outs veel opmerkingen bevat. Als u meestal in de ontwerpweergave werkt, moet u eens naar de code kijken voor tips over het gebruik van CSS voor vloeibare lay-outs. U kunt deze opmerkingen verwijderen voordat u uw site start. Lees voor meer informatie over de technieken die worden gebruikt in deze CSS-lay-outs het volgende artikel in Adobe Developer Center op - http://www.adobe.com/go/adc_css_layouts.

Wissen

Omdat alle kolommen zwevend zijn, gebruikt deze lay-out overflow:hidden in de container. Met deze methode kan de container bepalen waar de kolommen eindigen, zodat de randen en achtergrondkleuren die u in de container hebt geplaatst, kunnen worden weergegeven. Als een groot element uitsteekt buiten de container, lijkt het alsof het element is afgekapt. U kunt geen negatieve marges of absolute positionering met negatieve waarden gebruiken om elementen binnen de container te laten vallen omdat elementen ook in dat geval niet buiten de container worden weergegeven.

Als u deze eigenschappen moet gebruiken, hebt u een andere wismethode nodig. De betrouwbaarste methode is om <br class="clearfloat" /> or <div class="clearfloat"></div> toe te voegen na de laatste zwevende kolom (maar vóór de afsluiting van de container). Dit heeft hetzelfde effect.

Voettekst

Als u binnen de container een voettekst toevoegt achter de kolommen, werkt de wismethode overflow:hidden niet. U kunt echter zonder problemen een voettekst in een tweede container buiten de eerste container plaatsen. De eenvoudigste methode is wellicht om te beginnen met een lay-out die kop- en voetteksten bevat en de koptekst te verwijderen om de wismethode van het betreffende lay-outtype in te schakelen.

Voorwaardelijk commentaar voor Internet Explorer

Deze vloeibare lay-outs bevatten voorwaardelijk commentaar voor Internet Explorer (Internet Explorer Conditional Comment; IECC) waarmee twee problemen worden opgelost.

  1. De div-grootte in lay-outs op basis van percentages wordt anders afgerond in de verschillende browsers. Als bijvoorbeeld een waarde als 144,5px of 564,5px moet worden weergegeven in een browser, wordt deze waarde afgerond naar het dichtstbijzijnde hele getal. In Safari en Opera worden de waarden naar beneden afgerond, in Internet Explorer wordt naar boven afgerond en in Firefox wordt één kolom naar boven afgerond en één kolom naar beneden zodat de volledige container wordt gevuld. Vanwege deze afronding kunnen er inconsistenties optreden in bepaalde lay-outs. Met deze IECC hebt u de beschikking over een negatieve marge van 1 pixel waarmee u het probleem kunt oplossen voor Internet Explorer. U kunt de marge naar elke kolom verplaatsen, aan de linker- of rechterkant, afhankelijk van uw lay-outwensen.
  2. De zoomeigenschap is toegevoegd aan het anker binnen de navigatielijst omdat in sommige gevallen extra witruimte wordt weergegeven in IE6 and IE7. Met de zoomeigenschap krijgt Internet Explorer de beschikking over de eigen hasLayout-eigenschap, waarmee dit probleem kan worden opgelost.

Achtergronden

De achtergrondkleur van elke div wordt per definitie alleen weergegeven voor de lengte van de inhoud.. Als u dus een achtergrondkleur of rand gebruikt voor het uiterlijk van een zijkolom, loopt de kleur of rand niet helemaal tot aan de voettekst, maar slechts tot het einde van de inhoud. Als de inhouds-div altijd meer inhoud bevat, kunt u een rand om de inhouds-div plaatsen om deze te scheiden van de kolom.