05. CSS, część druga

Doprecyzowanie tematu własności float

Przy rozmieszczeniu jednego z elementów przy pomocy własności float możemy otrzymać efekt nakładania się elementu opływającego na element opływany (np. gdy mają one różne tło). Żeby tego uniknąć możemy np. dobrać odpowiednio szerokość elementu opływającego lub zwiększyć jego margines po stronie elementu opływanego.

Słowem wstępu

W trakcie projektowania układu strony należy zdawać sobie sprawę, że różne przeglądarki internetowe mają swoje domyślne style CSS. Co prawda (w wyniku działania kaskady) zawartość naszych arkuszy stylów ma wyższy priorytet (style domyślne przeglądarek mają najniższy priorytet), ale i tak może to rodzić różnego rodzaju trudności:

  • W trakcie rozmieszczania elementów na stronie okaże się, że domyślne ustawienia przeglądarki powodują zamieszanie przy wyświetlaniu naszej witryny
  • Nawet jeśli uda nam się tak zdefiniować arkusze stylów, żeby nasza strona wyglądała poprawnie pod jedną przeglądarką, inne przeglądarki (z innymi arkuszami) mogą źle (czyli nie tak jak chcemy) wyświetlać zawartość naszej strony

Aby uniknąć tego rodzaju kłopotów należy zacząć naszą pracę z edytowaniem stylów od "zresetowania" CSS. Resetowanie to nic innego, jak ustawienie (zdefiniowanie) wszystkich istotnych selektorów, domyślnie definiowanych przez przeglądarki, w pewien ustalony sposób. W wyniku "działania" kaskady nastąpi "dezaktywacja" domyślnych ustawień przeglądarek i "standaryzacja" naszego arkusza.

Dla przykładu możemy zresetować marginesy i odstępy dla znaczników <body> i <p>:

body, p {
    margin: 0;
    padding: 0;
}

Znaczniki <div> i <span>

Własności block i inline

Przy okazji omawiania dwóch nowych znaczników warto wspomnieć o różnicy między elementami blokowymi (block) i inline:

  • Elementy blokowe "zabierają" całą dostępną szerokość (width) i domyślnie "korzystają" z końca linii (line break) przed i po własnym wystąpieniu
          • przykładowe elementy blokowe to: <p>, <h_z dowolnym numerem>, <div>
  • Elementy inline zajmują tylko tyle szerokości ile im potrzeba i nie wymuszają końca linii.
          • przykładowe elementy: <a>, <span>

Dodatkowo warto wiedzieć, że można wymusić własność block\inline na elementach, które jej nie posiadają. Służy do tego cecha display:

a {
    display:block;
}

<div> i <span>

  • Znacznik <div> (skrót od ang. division) pozwala "wydzielić" jakiś fragment naszego kodu XHTML
          • Pozwala to na grupowanie poszczególnych elementów naszej strony tak, aby móc je następnie "zespołowo" edytować przy użyciu arkuszy stylów:
          • <div> jest elementem blokowym
          • Przy pomocy znacznika <div> możemy podzielić naszą stronę na stosowne sekcje. Podział ten następnie możemy wykorzystać w celu projektowania układu naszej strony
  • Znacznik <span> działa analogicznie do <div>. Różnica polega na tym, że jest elementem inline

W ramach HTML5 do tworzenia układu strony stosuje się nie tylko znaczniki <div>, ale także należące do tego samego typu znaczników blokowych elementy, których nazwy pochodzą od id lub class nadawanych konwencjonalnie divom o danej funkcji:

  1. <header> (nagłówek strony)
  2. <nav> (lista menu)
  3. <footer> (stopka strony)
  4. <aside> (boczna kolumna bez menu bocznego)
  5. <section>
  6. <article>

(patrz: http://www.w3schools.com/html/html_layout.asp)

Menu będzie wobec tego wyglądać na przykład tak :

<nav>
    <ul>
        <li> Strona główna </li>
        <li> Jak się zakłada buty </li>
    </ul>
</nav>

… a tak kod CSS:

nav {
    text-align:right;
    color: blue;
}

Układ elementów na stronie

Istnieją różne sposoby na to, aby sensownie rozmieścić elementy na naszej stronie. Jednym z często używanych jest wykorzystanie własności float i clear w arkuszach stylów w CSS.

  • Własność float umożliwia nam takie rozmieszczenie elementu, że następujące po nim inne elementy będą go otaczały ("opływały") ze strony przeciwnej do tej, po której go chcemy ustawić:
          • Własność float można zdefiniować tak:
                  • float:right
                  • float:left
                  • float:none
  • Przykład:

Poniższy kod (w XHTML'u) bez użycia stylów…

<h2> Floatowanie i clearowanie strony</h2>
...
<znacznik_elementu blokowego ... /> To jest naturalny układ strony
...

… da następujący ("domyślny") efekt:

1-naturalny.png

Gdy w kodzie CSS nadamy elementowi blokowemu własność: float:left otrzymamy następujący efekt:

2-floated.png

A gdy tekstu jest trochę więcej:

3-otoczony.png

W sytuacji gdy używamy własności float, wszystkie elementy następujące po tym elemencie będą "dążyły" do tego, żeby ustawić się po odpowiedniej stronie ( Jeśli "floatowany" obiekt jest odpowiednio duży, to również kolejne elementy - też i te, które chcielibyśmy "zachować" pod spodem - będą zmieniały swoją pozycję)

7-znow_zle.png
  • W tym wypadku warto, abyśmy zapoznali się z własnością clear. Własność ta powoduje, że kolejny element nie będzie opływał obiektu "floatowanego"
          • clear można zdefiniować tak:
                  • clear:left
                  • clear:right
                  • clear:both
                  • clear:none
          • Zasada jest taka, że wartość własności clear ma odpowiadać wartości float (tzn. gdy float:left, to clear:left). Zalecane jest jednak ustawianie jako wartości clear:both :

Odnosząc się do powyższego przykładu, odpowiednie "wyczyszczenie" da następujący efekt:

8-spacer_pomaga.png

Gdy "floatowany" element "wystaje" poza element nadrzędny (tj. ma od niego większą wysokość) - w przykładzie jest to element z białym tłem (np. <div>)…:

4-problem.png
  • … można posłużyć się "sztuczką", używając własności overflow.
          • overflow przyjmuje wartości:
                  • scroll
                  • visible
                  • hidden
                  • auto
          • Własność ta "mówi" jak postępować z elementami podrzędnymi wykraczającymi poza element nadrzędny (w nim też jest definiowana). I tak deklaracja: overflow:hidden z reguły powoduje ukrycie fragmentów "wystających".
          • W przypadku jednak wystających obiektów "floatowanych"… działa odwrotnie :) - tzn. dopasowuje element nadrzędny do elementu "floatowanego":
6-rozwiazanie.png
  • Oprócz własności float i clear pracę nad układem stron może ułatwić jeszcze własność position
          • przyjmuje ona wartości:
                  • static - (standardowa) przeglądarka decyduje o położeniu elementu
                  • relative - położenie ustalone względnie, w stosunku do pozycji standardowej
                  • absolute - położenie w stosunku do elementu nadrzędnego
                  • fixed - położenie w stosunku do okna przeglądarki
          • Dodatkowo przy definiowaniu położenia należy podać współrzędne (top, right, bottom, left) w jakichś jednostkach (np. pikselach [px]). Oczywiście w przypadku wartości "static" nie czynimy tego.

Przykład:

p
{
    position:fixed;
    top:120px;
    right:100px;
    left:150px;
}

Szablon

Jako wzór pomocny do realizacji zadania domowego proponujemy:

twocolumn.gif

Określone sekcje układu strony (jak header lub sidebar ) zalecamy wyróżnić przy pomocy stosownego znacznika.

Pomoce naukowe

I jeszcze:

Na przyszłość

Zadanie 05

  1. Utworzenie strony o zaproponowanym układzie (layoucie) lub innym, sensownym (i przynajmniej podobnie skomplikowanym).
  2. Należy wykorzystać model pudełkowy do ustalenia rozmiarów elementów i ich odstępów.
  3. Wykorzystać elementy graficzne uatrakcyjniające wygląd (np. obrazki tła dla strony / nagłówka)
  4. wysłać stronę na adres e-mail prowadzącego

Punktacja za zadanie:

  • 1 punkt - wykorzystanie takich własności CSS jak display, float, clear oraz overflow;
  • 1 punkt - zbudowanie layoutu wykorzystywanego do przynajmniej dwóch plików html (np. strona główna oraz jedna podstrona);
  • 1 punkt - spójność, przejrzystość, czytelność layoutu;
  • razem: 3 punkty.

UWAGA: nie trzeba stosować elementów HTML, CSS, które nie są przydatne do prezentowanej treści (poprzednio używaliśmy wszystkich w celach ćwiczeniowych). Od teraz liczy się przejrzystość oraz czytelność strony, co można osiągnąć odpowiednim formatowaniem CSS.

Co z pewnością powinno się pojawić: div'y zawierający całą stronę, element zawierający treść (tekst), menu jako lista, akapity, nagłówki, odnośniki, obrazki (najlepiej floatujące wewnątrz akapitów), etc.

Terminy:

  • grupy poniedziałkowe: niedziela (19.11), godzina 23:59 (północ z niedzieli na poniedziałek); spóźnienie: -1pkt/dzień; oddanie zadania po północy z wtorku na środę oznaczać będzie brak punktów.
  • grupy czwartkowe: środa (15.11), godzina 23:59 (północ z środy na czwartek); spóźnienie: -1pkt/dzień; oddanie zadania po północy z piątku na sobotę oznaczać będzie brak punktów.

Punkty: 3

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy