Niquelao » Webbloggarkiv » Trespaltslayout och semantisk kodning… "den perfekta"

» Arkiv för webloggen » Treekolumnslayout och markup… “den perfekta” Niquelao - CSS Treekolumnslayout och markup… “den perfekta” 4 juni 2006 av Rumoroso När man ska strukturera innehållet i ett webbdokument måste man undvika att tänka på hur den visuella utformningen, och särskilt layouten, kommer att se ut. Detta är avgörande om man vill uppnå en korrekt strukturerad innehållsflöde, semantisk markup och optimerad kod.

För att nå detta mål måste man som obestridlig grundprincip följa W3C:s standarder och undvika extra markup vars enda syfte är att tjäna stilmallen för presentation. Utvecklat exempel .- Dokumentets innehåll struktureras i tre områden eller funktionella grupper: specifikt innehåll, huvudnavigationsmeny och ett webbplatsövergripande område (antingen relaterat till det aktuella dokumentet, såsom nyheter från sektionen, eller till själva webbplatsen/portalen, till exempel intressanta länkar relaterade till portalens tema eller en samling banners).

Innehållets organisation i koden bör baseras på dess specificitetsnivå och relevans för den aktuella sidan. Således bör gruppen med documentspecifik information visas först i koden, följt av det webbplatsövergripande området om detta är specifikt relaterat till den föregående informationen och varierar beroende på innehållet. Därefter följer huvudnavigationsmenyn.

Om den webbplatsövergripande informationen är gemensam för hela webbplatsen och inte har någon sectionspecifik karaktär, placeras den sist, föregången av menyn. I alla fall bör länkar skapas som gör det möjligt att navigera genom dokumentet genom att hoppa mellan vart och ett av de tre grupperna för att gå till nästa eller föregående. För att uppnå så ren och optimerad kod som möjligt är upplägget följande:

En sidhuvud och en sidfot har lagts till eftersom detta är en av de vanligaste situationerna.

Generiska blockbehållare ( div ) används för att visa exemplet. Om dessa endast innehöll ett enda block (till exempel en lista) skulle de inte behövas, eftersom identifieraren då kunde appliceras direkt på detta element.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

För att uppnå ren och optimerad kod används inga behållare som grupperar en eller flera av dessa element. Den tillämpade markuppen och dess organisation har hållits oförändrad mellan exemplen. De generiskt tillämpade stilarna har inkluderats i en gemensam css-fil. De specifika stilarna för varje enskilt fall har inkluderats i dokumentets huvud för att underlätta granskning.

I alla fall har huvudinnehållsblocket behållit ett flytande beteende. Den universella selektorn har använts för att applicera marginaler på de första underordnade elementen till blocket kallat “contenido1″.

Eftersom inte alla webbläsare tolkar pseudoelementet ” :first-child ” korrekt, har egenskaperna istället applicerats på alla underordnade element till blocket, för att sedan nullifieras för alla underordnade element vars förälder är ett underordnat element till samma block. Andra metoder kan användas, till exempel användning av nämnda pseudoelement tillsammans med villkorliga kommentarer för Internet Explorer (IE). Ett annat alternativ hade varit att skapa ett block inuti “contenido1 ” och applicera nödvändiga stilar på detta.

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

Denna metod har undvikits för att uppnå renare markup utan förekomst av element vars enda syfte är layout. I praktiken är de egenskaper som kan behöva modifieras för underordnade element sidomarginaler, vilka är lättstyrda, varför den föreslagna lösningen anses vara den optimala för detta fall. Det är viktigt att beakta vilka egenskaper och attribut som deklarerats för att undvika oväntade effekter vid tillämpning av stilar.

Till exempel, i IE, när listor inkluderas i flyterande element som är positionerade relativt, visas inte de stilar som applicerats på bakgrunden eller färgerna på kanterna (detta kan åtgärdas genom att positionera dem relativt). Idén är att uppnå en treekolumnslayout med en bestämd ordning beroende på webbplatsens behov. De olika layouterna visas organiserade efter blockens ordning och deras flytande egenskap.

Blockens flytande egenskap uppnås genom att definiera deras bredd i procent (i alla exempel 20 % av deras behållares totala bredd) och stelhet i absoluta enheter (i alla exempel 150px). Istället för absoluta enheter kan även relativa enheter (em) användas.

Allt beror på de specifika behoven i varje enskilt fall: Ordning i layout 1 2 3 Exempel på flytande design: Flytande Flytande Flytande Exempel på hybriddesign: Flytande Stel Flytande Exempel på hybriddesign: Flytande Flytande Stel Exempel på hybriddesign: Flytande Stel Stel Ordning i layout 1 3 2 Exempel på flytande design: Flytande Flytande Flytande Exempel på hybriddesign: Flytande Flytande Stel Exempel på hybriddesign: Flytande Stel Flytande Exempel på hybriddesign: Flytande Stel Stel Ordning i layout 2 1 3 Exempel på flytande design: Flytande Flytande Flytande Exempel på hybriddesign: Stel Flytande Flytande Exempel på hybriddesign: Flytande Flytande Stel Exempel på hybriddesign: Stel Flytande Stel Ordning i layout 2 3 1 Exempel på flytande design: Flytande Flytande Flytande Exempel på hybriddesign: Stel Flytande Flytande Exempel på hybriddesign: Flytande Stel Flytande Exempel på hybriddesign: Stel Stel Flytande Ordning i layout 3 1 2 Exempel på flytande design: Flytande Flytande Flytande Exempel på hybriddesign: Flytande Flytande Stel Exempel på hybriddesign: Stel Flytande Flytande Exempel på hybriddesign: Stel Flytande Stel Ordning i layout 3 2 1 Exempel på flytande design: Flytande Flytande Flytande Exempel på hybriddesign: Flytande Stel Flytande Exempel på hybriddesign: Stel Flytande Flytande Exempel på hybriddesign: Stel Stel Flytande I vissa fall och för vissa webbläsare (som Internet Explorer) kan ett onormalt beteende uppstå vid ändring av fönsterstorlek.

Grundläggande beror det felaktiga beteendet på att även om behållaren får en angiven bredd, påverkar texten vid storleksändring och trycker lätt mot dess kanter. Om blocken tillsammans ska uppta 100 % av behållaren kan det hända att ett av blocken med relativa dimensioner, på grund av aforementioned effekt, upptar något mer än vad som är avsett och därmed knuffar de andra, vilka, eftersom de är flyterande och inte får plats, hoppar neråt.

För att lösa detta kan en dimension deklareras för ett av blocken som är något mindre än idealvärdet (till exempel 19,9 % istället för 20 %). Kategori: CSS —> 1 kommentar Norwin Galeano 28 augusti 2006 Mycket bra. Denna artikel bör vara mycket användbar för de som börjar layouta sina webbplatser

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.