eMaupie figle z szablonami
Blog > Komentarze do wpisu

Podstawy layoutu CSS - część I

Dziś, zgodnie z obietnicą, rozpocznę mały kurs podstaw layoutowania za pomocą CSS. Jeśli próbowałeś kiedyś zmienić układ swojego bloxa a nie bardzo wiesz jak się za to zabrać, to mam nadzieję, że te kilka notek Ci pomoże.

Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html.

<div id="before">div id="before"</div>
    <div id="container">
        div id="container"
        <div id="div1">id="div1"</div>
        <div id="div2">id="div2"</div>
        <div id="div3">id="div3"</div>
    </div>
<div id="after">div id="after"</div>

Position: static

Jak widać na poniższym rysunku, domyślnie elementy div rozkładane są jeden pod drugim. Zagnieżdżone elementy umieszczane są kolejno wewnątrz elementów je zawierającyh (Uwaga: na rysunku element "container" ma dodatkowo ustawiony padding , żeby wspomniane zagnieżdżenie było widoczne). Ten typ pozycjonowania jest domyślny i nazywa się static .

Rys. 1 - position: static;

Modyfikując właściwość position za pomocą CSS możemy wpływać na sposób w jaki przeglądarka wyrenderuje ten sam kod html.

Position: relative

Pozycjonowanie względne pozwala na przesunięcie elementu o pewną odległość w pionie i poziomie od miejsca, w którym byłby normalnie wylayoutowany. Przesunięcie określamy za pomocą właściwości top , left , bottom i right. W przedstawionym poniżej przykładzie element "div2" został przesunięty o 10 pikseli w prawo i w dół od lewego, górnego rogu.

#div2 {
    position: relative;
    top: 10px;
    left: 10px;
}

Wynik działania powyższego kodu można zobaczyć na obrazku poniżej.

Rys. 2 - position: relative;

Warto zauważyć, że przestrzeń, którą poprzednio zajmował "div2" pozostała na swoim miejscu, a sam element zachodzi teraz na "div3".

Position: absolute

Kolejny typ pozycjonowania to pozycjonowanie absolutne. Pozwala on na określenie dokładnej pozycji, w której ma zostać umieszczony dany element. Jest on niejako "wyjmowany" z layoutu i renderowany w określonym w CSS miejsciu.

#div2 {
    position: absolute;
    top: 0px;
    left: 0px;
}

Podobnie jak w poprzednim przykładzie, współrzędne położenia elementu określamy za pomocą właściwości top , left , bottom lub right .

Rys. 3 - position: absolute;

Zwróćmy uwagę, że tym razem element "div2" został niejako usunięty z dokumentu i umieszcony niezależnie w lewym, górnym rogu. Następujący po nim w kodzie html element "div3" został wyrenderowany bezpośrednio pod "div1". Pozycjonowanie absolutne umożliwia zatem dowolne rozmieszczanie elementów na stronie, niezależnie od kolejności ich umieszczenia w kodzie html. Jest ono jednak uznawane za złą praktykę, gdyż "usztywnia" layout.

Absolutnie/relatywnie

Jeśli w elemencie otaczającym ustawimy pozycjonowanie relatywne, to wszystkie zawarte w nim elementy pozycjonowane absolutnie zostaną rozmieszczone względem niego. Zobrazuję to poniższym kodem CSS.

#container {
    position: relative;
}

#div2 {
    position: absolute;
    top: 0px;
    right: 0px;
}

Jak widać na poniższym rysunku "div2" został umieszczony w prawym, górnym rogu elementu "container".

Rys 4. position: relative + position: absolute

Ciąg dalszy nastąpi...

W kolejnej notce będzie kontynuacja podstawowego kursu layoutowania za pomocą CSS. Przyjrzymy się właściwości float , która pozwala jeszcze bardziej zmieniać domyślny sposób rozkładania elementów na stronie.

wtorek, 12 lutego 2008, e-maupa

Polecane wpisy

  • Podstawy layoutu CSS - część III

    Trzy to dobra liczba, jeśli chodzi o ilość notek w blogowym cyklu. Nie za dużo, nie za mało, lecz w sam raz by nakreślić "zarys wstępu do podstaw" tem

  • 2. Ten z latarniami

    Ponieważ na nadmiar wolnego czasu w tej chwili nie narzekam, to prace przy nowym projekcie szablonu idą bardzo powoli. W związku z tym wrzucę dziś szablon, któr

  • Zakładki dla kategorii

    Jak za pomocą CSS przerobić linki do kategorii bloxa na zakładki? To proste, jeśli zastosujesz się do kilku poniższych wskazówek i zastosujesz prosty trick.

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
marcel.pajda
2008/02/13 19:10:57
No to czekamy na kolejne notki. Zawsze mi brakowało cierpliwości, żeby sobie usystematyzować wiedzę o CSS. Może z twoją pomocą dam radę?

Bajdełej...
W tym zdaniu czegoś zabrakło:
Jeśli w elemencie otaczającym ustawimy pozycjonowanie relatywne, to wszystkie zawarte w nim elementy pozycjonowane absolutnie zostaną rozmieszczone niego.
-
2008/02/13 21:44:17
Dzięki za uwagę - faktycznie zabrakło słowa "względem", już poprawione :)
-
2008/02/15 02:26:16
Mam pytanie, jeśli wypozycjonuję jakiś graficzny element w prawy róg ekranu, to czy rozdzielczośc może mieć wpływ na widzenie tego elemetu przez innne osoby. Trochę pogmatwałam, ale chodzi mi o to, czy jeśli wypozycjonuję w tamto miejsce, to bez względu na wielkosc monitora i rozdzielczość ekranu on będzie u wszystkich tam widoczny.
-
2008/02/15 07:57:24
irytek05:
Napisz dokładnie, w jaki sposób umieszczasz ten element. Generalnie da się tak zrobić, żeby "przykleić" element do prawego górnego rogu i przy zmniejszaniu/zwiększaniu okna przeglądarki powinien on się przesuwać.
-
2008/02/15 15:21:23
Nigdy jeszcze nie wstawiałam w prawym górnym rogu, bo byłam pewna, że się nie uda, aby wszyscy widzieli. Moje wątpliwości brały sie stąd, że gdy raz wypozycjonowałam obrazek tytułowy, we wszystkich przeglądarkach (no w trzech;) w FF, opera i nawet IE) pieknie leżał, to po jakimś czasie ktoś zwrócił mi uwagę, że u niego mój obrazek jest przesunięty w bok. Właśnie dlatego, że miał inną rozdzielczość. Wtedy w left: wstawiłam auto i obrazek był na środku nawet w większej rozdzielczości. Chętnie czytam, to co piszesz, o pozycjonowaniu, bo dopiero próbuję, ale to są drobiazgi: ikonka RSS, przeszukiwanie bloga, obrazek tytułowy. Marzy mi się móc na szablonie wypełnic prawy górny róg, zwłaszcza przy szablonach pełnoekranowych:) Chętnie dowiem się jak można to zrobić:)
-
2008/02/15 19:40:35
Myślę, że powinnaś wypróbować sposób podany w ostatnim przykładzie. Ważne, żeby określić top:0px; i right:0px; Wtedy przykleisz element do prawego, górnego rogu. Określając jego położenie za pomocą left, faktycznie możesz wyjechać za granicę ekranu u kogoś z mniejszą rozdzielczością.
-
2008/04/25 11:52:48
Mam hipotetyczne pytanie;) Jesli chcę do zrobionego już nagłowka wstawić jakiś element w formie obrazka i chcę to zrobić za pomocą pozycjonowania absolutnego, to jak to zrobić, aby w różnych szerokościach i rozdzielczościach ekranu był on widoczny w tym samym miejscu. Czy mozna to zrobić bez pozycjonowania nagłówka relatywnie??
-
2008/04/26 09:20:04
Jeśli chcesz uzyskać taki efekt, jak np. logo cssmonkey w nagłówku tego bloga, to wystarczy:

position:absolute;left:50%;margin-left:-380px;

gdzie 380px jest połową szerokości obrazka. Taki trick pozwala na "przyklejenie" do środka ekranu w poziomie.

Jeśli używasz firefoxa, to polecam dodatek firebug, pozwala podglądać style css wskazanych na ekranie elementów strony. Dla IE jest trochę mniej funkcjonalny, lecz także przydatny, IE Web Developer Toolbar.
-
2008/04/26 16:45:17
Używam Opery. A czy można by w ten sposób, zmieniając tylko procenty i margines przesunąć małpę tak, aby kawałek jej wystawał poza nagłówek? Czy ona musi być wypośrodkowana?
-
szablonykatemac
2008/04/28 15:54:20
dzisiaj muszę podziękować bo zamiast ciągle bawić się marginesami poszłam po rozum do głowy i jeszcze raz przeczytałam ten wpis - efekt: mam nowa metodę na trzecią szpaltę ;)
dzięki
-
2008/04/29 20:35:18
@irytek05:
Nie musi być wyśrodkowana - dobrze kombinujesz :) Zmieniając marginesy i procent możesz pozycjonować względem środka ekranu.

@szablonykatemac:
Fajnie, że komuś się taka notka przydała :)
Jak tylko skończę projekt w pracy, to reaktywuję wpisy na blogu.
-
Gość: Pm, *.dynamic.chello.pl
2012/05/24 20:36:33
Pierwszy raz trafiłem na materiał, który wyjaśnił mi to czego zawsze szukałem w pozycjonowaniu elementów w CSS.
Serio bardzo dobrze, krótko i prosto wyjaśniona zasada.
-
Gość: katalogowanie, *.neoplus.adsl.tpnet.pl
2013/05/20 10:30:28
Przydałyby się jeszcze obrazki, jak co wygląda po wstawieniu kodu.
-
pozycjonowanie-youtube
2014/07/08 00:45:22
A czy ktoś może wie czy pozycjonowanie w Youtube to to samo co zwykłe pozycjonowanie stron

Adam z miasta Toruń
-
Gość: deja, *.play-internet.pl
2014/10/13 17:18:38
Bardzo dziękuję za wyjaśnienie pozycjonowania tak przejrzyście! Męczę kurs z eduweb, ale dopiero Twoje tłumaczenie rozwiązało moje problemy. brawo!
-
pingumedia.pl
2017/02/10 17:06:46
Mnóstwo ciekawych informacji o projektowaniu stron. Dzięki :)
-
2018/07/12 19:12:53
Fajnie napisany poradnik odnośnie stylów kaskadowych. Przy pozycjonowaniu stron dobrze napisany CSS jak najbardziej ma pozytywny wpływ na pozycję w Google. Ja swoją stronę pozycjonowałem dzięki firmie dolp.pl z Olsztyna i bardzo dobrze przeszedł cały proces pozycjonowania. Firma na bieżąco mi raportowała co się dzieje ze stroną przez co więcej z tego rozumiałem.