logocursussen

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.

Wismethode

Omdat alle kolommen zwevend zijn, bevat deze lay-out een declaratie clear:both in de voettekstregel. 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 voor uw ontwerp de voettekst uit container moet worden verwijderd, 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.

Logo vervangen

In deze lay-out is in de koptekst een tijdelijke aanduiding voor een afbeelding gebruikt op de positie waar u waarschijnlijk uw logo wilt plaatsen. U kunt het beste de tijdelijke aanduiding verwijderen en vervangen door uw eigen gekoppelde logo.

Houd er rekening mee dat als u via het veld Bron in de eigenschappencontrole naar uw logo bladert, in plaats van de tijdelijke aanduiding te verwijderen en vervangen, u de inlineachtergrond en weergave-eigenschappen moet verwijderen. Deze inlinestijlen dienen alleen om de tijdelijke aanduiding voor logo’s in browsers weer te geven voor demonstratiedoeleinden.

Als u de inlinestijlen wilt verwijderen, moet u controleren of het deelvenster CSS-stijlen is ingesteld op Huidig. Selecteer de afbeelding, klik in het deelvenster Eigenschappen van het deelvenster CSS-stijlen met de rechtermuisknop en verwijder de weergave- en achtergrondeigenschappen. (U kunt natuurlijk ook rechtstreeks naar de code gaan en daar de inlinestijlen voor de afbeelding of tijdelijke aanduiding verwijderen.)

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.

Deze voettekst bevat de declaratie position:relative waarmee in Internet Explorer 6 de voettekst de eigenschap hasLayout krijgt zodat de voettekst op de juiste wijze kan worden gewist. Als ondersteuning voor IE6 niet vereist is, kunt u deze declaratie verwijderen.