Niquelao » Archiwum bloga » Układ trzykolumnowy i znaczniki… "sprawiedliwy"
» Archiwum bloga » Układ trójkolumnowy i znaczniki… „ten właściwy” Niquelao - CSS Układ trójkolumnowy i znaczniki… „ten właściwy” 4 czerwca 2006 przez Rumoroso
Gdy zamierzamy ustrukturyzować treść dokumentu internetowego, należy za wszelką cenę unikać kierowania się tym, jaki będzie projekt wizualny, a zwłaszcza układ (layout). Jest to kluczowe, jeśli chcemy uzyskać treść poprawnie ustrukturyzowaną pod kątem przepływu informacji, a także semantyczne znaczniki i optymalny kod. Aby osiągnąć ten cel, należy przyjąć jako niepodważalną zasadę stosowanie standardów W3C, unikając dodatkowych znaczników, których jedynym celem byłoby służenie arkuszowi stylów do prezentacji.
Rozpatrywany przypadek.- Treść dokumentu jest podzielona na trzy obszary lub grupy funkcjonalne: treść właściwa, główne menu nawigacyjne oraz obszar o charakterze przekrojowym dla witryny (związany albo z bieżącym dokumentem, jak np. aktualności z danej sekcji, albo z całą witryną lub portalem, jak np. linki powiązane z tematyką portalu czy zestaw bannerów). Organizacja treści w kodzie powinna być ustalona na podstawie jej poziomu szczegółowości i istotności względem bieżącej strony.
Tak więc grupa informacji właściwych dla dokumentu powinna pojawić się w kodzie jako pierwsza, a po niej obszar o charakterze przekrojowym, jeśli jest on ściśle związany z powyższą informacją i zmienia się w zależności od treści. Następnie powinno pojawić się główne menu nawigacyjne. W przypadku, gdy informacja przekrojowa jest wspólna dla całej witryny i nie ma charakteru właściwego dla poszczególnych sekcji, zostanie umieszczona na końcu, poprzedzona menu. We wszystkich przypadkach należy utworzyć linki, których celem będzie umożliwienie poruszania się po dokumencie poprzez przeskakiwanie między każdą z trzech grup, aby przejść do następnej lub poprzedniej.
Starając się uzyskać jak najbardziej czysty i optymalny kod, jego koncepcja przedstawia się następująco:
Dodano nagłówek i stopkę, ponieważ jest to jedna z najczęstszych sytuacji, jakie mogą wystąpić. W przykładzie użyto ogólnych kontenerów blokowych (div). W przypadku, gdyby zawierały one pojedynczy blok (na przykład listę), nie byłyby konieczne, ponieważ identyfikator można by zastosować bezpośrednio na nim. W dążeniu do uzyskania czystego i optymalnego kodu nie stosuje się kontenerów grupujących jeden lub więcej z nich.
Related: — con plan gratuito para empezar hoy mismo.
Zastosowane znaczniki i ich organizacja pozostały niezmienione między przykładami. Style zastosowane w sposób ogólny zostały umieszczone we wspólnym pliku CSS. Zestaw stylów właściwych dla każdego z nich został umieszczony w nagłówku dokumentu, aby ułatwić ich przeglądanie.
We wszystkich przypadkach blok treści głównej zachował płynne zachowanie. Użyto selektora uniwersalnego, aby zastosować marginesy do pierwszych elementów potomnych bloku o nazwie „contenido1”. Ponieważ nie wszystkie przeglądarki prawidłowo rozpoznają pseudoelement „:first-child”, zastosowano podejście polegające na przypisaniu właściwości wszystkim elementom potomnym bloku, a następnie ich anulowaniu dla wszystkich elementów potomnych, których rodzic jest elementem potomnym tego samego bloku. Można zastosować inne metody, na przykład użycie wspomnianego wcześniej pseudoelementu wraz z komentarzami warunkowymi dla Internet Explorera (IE).
Innym sposobem byłoby utworzenie bloku wewnątrz „contenido1” i zastosowanie niezbędnych stylów na nim. Zrezygnowano z tej metody, aby uzyskać czystsze znaczniki i uniknąć obecności elementów, których celem byłoby służenie do składu. W rzeczywistości właściwością/właściwościami, które mogłyby ulec zmianie dla elementów potomnych, są marginesy boczne — właściwości łatwe do kontrolowania, dlatego proponowane rozwiązanie uznaje się za najbardziej optymalne w tym przypadku.
Worth a look: — Accesibilidad gestionada: automatización combinada con revisión humana.
Ważne jest, aby wziąć pod uwagę, jakie właściwości i atrybuty zostały zadeklarowane, ze względu na możliwość wystąpienia nieoczekiwanych efektów przy stosowaniu stylów. Na przykład w IE, gdy listy są umieszczane wewnątrz elementów pływających i pozycjonowanych relatywnie, nie są wyświetlane style zastosowane do tła ani kolory zastosowane do obramowań (można to naprawić, pozycjonując je relatywnie).
Ideą jest uzyskanie układu trójkolumnowego z określoną kolejnością w zależności od potrzeb witryny. Różne układy są prezentowane w zależności od kolejności bloków i ich płynnego charakteru.
Płynność bloków uzyskuje się, definiując ich szerokość w procentach (we wszystkich przykładach 20% szerokości kontenera), a sztywność w jednostkach absolutnych (we wszystkich przykładach 150px). Podobnie, zamiast jednostek absolutnych można by użyć jednostek względnych (em). Wszystko zależy od szczególnych potrzeb każdego przypadku:
Kolejność w układzie 1 2 3 Przykład projektu płynnego: Płynny Płynny Płynny Przykład projektu hybrydowego: Płynny Sztywny Płynny Przykład projektu hybrydowego: Płynny Płynny Sztywny Przykład projektu hybrydowego: Płynny Sztywny Sztywny
Kolejność w układzie 1 3 2 Przykład projektu płynnego: Płynny Płynny Płynny Przykład projektu hybrydowego: Płynny Płynny Sztywny Przykład projektu hybrydowego: Płynny Sztywny Płynny Przykład projektu hybrydowego: Płynny Sztywny Sztywny
Kolejność w układzie 2 1 3 Przykład projektu płynnego: Płynny Płynny Płynny Przykład projektu hybrydowego: Sztywny Płynny Płynny Przykład projektu hybrydowego: Płynny Płynny Sztywny Przykład projektu hybrydowego: Sztywny Płynny Sztywny
Related: — La que acredita tu experiencia en accesibilidad.
Kolejność w układzie 2 3 1 Przykład projektu płynnego: Płynny Płynny Płynny Przykład projektu hybrydowego: Sztywny Płynny Płynny Przykład projektu hybrydowego: Płynny Sztywny Płynny Przykład projektu hybrydowego: Sztywny Sztywny Płynny
Kolejność w układzie 3 1 2 Przykład projektu płynnego: Płynny Płynny Płynny Przykład projektu hybrydowego: Płynny Płynny Sztywny Przykład projektu hybrydowego: Sztywny Płynny Płynny Przykład projektu hybrydowego: Sztywny Płynny Sztywny
Kolejność w układzie 3 2 1 Przykład projektu płynnego: Płynny Płynny Płynny Przykład projektu hybrydowego: Płynny Sztywny Płynny Przykład projektu hybrydowego: Sztywny Płynny Płynny Przykład projektu hybrydowego: Sztywny Sztywny Płynny
W niektórych przypadkach i w niektórych przeglądarkach (takich jak Internet Explorer) może wystąpić nieprawidłowe zachowanie przy zmianie rozmiaru okna. Zasadniczo nieprawidłowe zachowanie wynika z tego, że choć kontenerowi zostanie wskazana jego szerokość, przy zmianie rozmiaru tekst wpływa na lekkie wypychanie jego krawędzi.
Jeśli zestaw bloków ma zajmować 100% kontenera, może się zdarzyć, że jeden z tych o wymiarach względnych, w wyniku wspomnianego efektu, zajmie nieco więcej niż powinien, wypychając pozostałe, które — będąc pływającymi i nie mieszcząc się — przeskakują w dół. Aby temu zaradzić, można zadeklarować wymiar jednego z nich nieco mniejszy od idealnego (na przykład 19,9% zamiast 20%).
Kategoria: CSS —> 1 komentarz
Norwin Galeano 28 sierpnia 2006 Bardzo dobre. Ten artykuł powinien być bardzo przydatny dla tych, którzy zaczynają składać swoje strony
P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; if you want the current details.
¿Cumplir WCAG sin tocar el código?
Superposición de IA que promete cumplimiento WCAG en 48 horas