Niquelao » Weblogarchief » Drie-koloms lay-out en semantische markup… "de juiste"

» Archief van het weblog » Drie-koloms lay-out en semantische opmaak… “de juiste” Niquelao - CSS Drie-koloms lay-out en semantische opmaak… “de juiste” 4 juni 2006 door Rumoroso Wanneer men de inhoud van een webdocument wil structureren, moet men te allen tijde vermijden om rekening te houden met het visuele ontwerp, en in het bijzonder met de lay-out. Dit is fundamenteel als men een correct gestructureerde inhoud wil bereiken vanuit het perspectief van de informatiestroom, evenals een semantische opmaak en optimale code.

Om dit doel te bereiken, moet het gebruik van de W3C-standaarden als onbetwist uitgangspunt worden gehanteerd, waarbij extra opmaak wordt vermeden die uitsluitend dient voor de stylesheet ten behoeve van de presentatie. Uitgewerkt geval.- De inhoud van het document wordt gestructureerd in drie gebieden of functionele groepen: specifieke inhoud, hoofdnavigatiemenu en een gebied dat dwars door de site loopt (hetzij gerelateerd aan het huidige document, zoals nieuws van de sectie, hetzij aan de website of portal zelf, zoals bijvoorbeeld interessante links gerelateerd aan het thema van de portal of een reeks banners).

De organisatie van de inhoud in de code moet worden bepaald op basis van het niveau van specificiteit en relevantie ten opzichte van de huidige pagina. Zo zou de groep met documentspecifieke informatie als eerste in de code moeten verschijnen, gevolgd door het transversale gebied als dit specifiek gerelateerd is aan de voorgaande informatie en varieert afhankelijk van de inhoud. Daarna volgt het hoofdnavigatiemenu.

Indien de transversale informatie gemeenschappelijk is voor de hele site en geen specifiek karakter heeft per sectie, wordt deze aan het einde geplaatst, voorafgegaan door het menu. In alle gevallen moeten er koppelingen worden gemaakt waarmee men door het document kan navigeren door tussen elk van de drie groepen te springen om naar de volgende of vorige te gaan. Met als doel een zo schoon mogelijke en optimale code te verkrijgen, is de opzet als volgt:

Er zijn een koptekst en een voettekst toegevoegd, aangezien dit een van de meest voorkomende situaties is.

Er worden generieke blokcontainers (div) gebruikt om het voorbeeld weer te geven. Mochten deze slechts één blok bevatten (bijvoorbeeld een lijst), dan zouden ze niet nodig zijn, omdat de identifier direct daarop zou kunnen worden toegepast.

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Vanwege de drang naar schone en optimale code worden er geen containers gebruikt die een of meer hiervan groeperen. De toegepaste opmaak en de organisatie ervan zijn in alle voorbeelden ongewijzigd gebleven. De algemeen toegepaste stijlen zijn opgenomen in een gemeenschappelijke css. De verzameling specifieke stijlen voor elk geval is opgenomen in de koptekst van het document om de controle te vergemakkelijken.

In alle gevallen is het blok met de hoofdinhoud vloeiend gehouden. Er is de universele selector gebruikt om marges toe te passen op de eerste nakomelingen van het blok genaamd “contenido1″.

Aangezien niet alle browsers het pseudo-element “:first-child” correct herkennen, is ervoor gekozen de eigenschappen toe te passen op alle nakomelingen van het blok en deze vervolgens teniet te doen voor alle nakomelingen waarvan de ouder een nakomeling is van hetzelfde blok. Andere methoden kunnen worden gebruikt, zoals het gebruik van het eerder genoemde pseudo-element in combinatie met conditionele commentaren voor Internet Explorer (IE). Een andere mogelijkheid zou zijn geweest een blok binnen “contenido1” te creëren en de benodigde stijlen daarop toe te passen.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Deze methode is vermeden om een schonere opmaak te verkrijgen zonder elementen die uitsluitend dienen voor de lay-out. In feite zijn de eigenschappen die voor de nakomelingen gewijzigd zouden kunnen worden de zijmarges; eigenschappen die eenvoudig te beheersen zijn, waardoor de voorgestelde oplossing voor dit geval als de meest optimaal wordt beschouwd. Het is belangrijk rekening te houden met welke eigenschappen en attributen zijn gedeclareerd met het oog op mogelijke onverwachte effecten bij het toepassen van stijlen.

Bijvoorbeeld, in IE worden wanneer lijsten binnen zwevende elementen die relatief gepositioneerd zijn, de toegepaste achtergrondstijlen en randkleuren niet weergegeven (dit kan worden verholpen door ze relatief te positioneren). Het idee is een drie-koloms lay-out te realiseren met een bepaalde volgorde, afhankelijk van de behoeften van de site. De verschillende lay-outs worden getoond, georganiseerd op basis van de volgorde van de blokken en hun vloeiende karakter.

De vloeiendheid van de blokken wordt bereikt door hun breedte in procenten te definiëren (in alle voorbeelden 20% van de totale breedte van hun container) en de starre breedte in absolute eenheden (in alle voorbeelden 150px). Evenzo zouden in plaats van absolute eenheden ook relatieve eenheden (em) kunnen worden gebruikt.

Alles hangt af van de specifieke behoeften van elk geval: Volgorde in de lay-out 1 2 3 Voorbeeld van vloeiend ontwerp: Vloeiend Vloeiend Vloeiend Voorbeeld van hybride ontwerp: Vloeiend Star Vloeiend Voorbeeld van hybride ontwerp: Vloeiend Vloeiend Star Voorbeeld van hybride ontwerp: Vloeiend Star Star Volgorde in de lay-out 1 3 2 Voorbeeld van vloeiend ontwerp: Vloeiend Vloeiend Vloeiend Voorbeeld van hybride ontwerp: Vloeiend Vloeiend Star Voorbeeld van hybride ontwerp: Vloeiend Star Vloeiend Voorbeeld van hybride ontwerp: Vloeiend Star Star Volgorde in de lay-out 2 1 3 Voorbeeld van vloeiend ontwerp: Vloeiend Vloeiend Vloeiend Voorbeeld van hybride ontwerp: Star Vloeiend Vloeiend Voorbeeld van hybride ontwerp: Vloeiend Vloeiend Star Voorbeeld van hybride ontwerp: Star Vloeiend Star Volgorde in de lay-out 2 3 1 Voorbeeld van vloeiend ontwerp: Vloeiend Vloeiend Vloeiend Voorbeeld van hybride ontwerp: Star Vloeiend Vloeiend Voorbeeld van hybride ontwerp: Vloeiend Star Vloeiend Voorbeeld van hybride ontwerp: Star Star Vloeiend Volgorde in de lay-out 3 1 2 Voorbeeld van vloeiend ontwerp: Vloeiend Vloeiend Vloeiend Voorbeeld van hybride ontwerp: Vloeiend Vloeiend Star Voorbeeld van hybride ontwerp: Star Vloeiend Vloeiend Voorbeeld van hybride ontwerp: Star Vloeiend Star Volgorde in de lay-out 3 2 1 Voorbeeld van vloeiend ontwerp: Vloeiend Vloeiend Vloeiend Voorbeeld van hybride ontwerp: Vloeiend Star Vloeiend Voorbeeld van hybride ontwerp: Star Vloeiend Vloeiend Voorbeeld van hybride ontwerp: Star Star Vloeiend In sommige gevallen en bij bepaalde browsers (zoals Internet Explorer) kan zich abnormaal gedrag voordoen bij het wijzigen van de venstergrootte.

Basically komt dit onjuiste gedrag doordat, hoewel de container een bepaalde breedte krijgt toegewezen, de tekst bij het herschalen de randen lichtjes verdringt. Als de verzameling blokken 100% van de container moet beslaan, kan het gebeuren dat een van de blokken met relatieve afmetingen, door het eerder genoemde effect, iets meer ruimte inneemt dan bedoeld, waardoor de andere blokken worden verdrongen.

Omdat deze zwevend zijn en niet meer passen, springen ze naar beneden. Om dit op te lossen kan men bij een van de blokken een afmeting declareren die iets kleiner is dan ideaal (bijvoorbeeld 19,9% in plaats van 20%). Categorie: CSS —> 1 reactie Norwin Galeano 28 augustus 2006 Zeer goed. Dit artikel moet zeer nuttig zijn voor degenen die beginnen met het maken van lay-outs voor hun pagina’s

P.S. A few readers have asked which widget de accesibilidad we actually reach for — it's UserWay; take a look here if you want the current details.