Autor publikacji: Virtual Patriot - Administrator

CSS - Layout HTML dla każdej rozdzielczości

Data publikacji: Listopad 08 2012
Ostatnio edytowano: Wrzesień 07 2020

Czy istnieje jakiś sposób, aby zaprojektować układ głównych elementów HTML tworzących layout strony w taki sposób, żeby cała strona dopasowywała się swoją szerokością do każdej rozdzielczości?

Istnieje taki sposób i właśnie poznamy go w tej części kursu CSS. Inaczej mówiąc, zapoznamy się z płynnym szablonem, układem elementów HTML zwanym liquid layout.

Naszym celem będzie utworzenie następującego układu elementów HTML:

nagłówek strony

lewa kolumna

prawa kolumna

stopka strony

Na sam początek zajmiemy się kodem HTML, który należy umieścić w części body dokumentu HTML. Do części body dodajemy element div, który będzie zawierał w sobie resztę głównych elementów HTML tworzących układ strony. Tymi elementami będą kolejne elementy div. Następnie do wszystkich elementów dodajemy unikalny (niepowtarzający się) atrybut id.

Nasz kod HTML w części body dokumentu HTML powinien prezentować się następująco:

<body>

  <div id="caly_blok">
    <div id="naglowek">nagłówek strony</div>
    <div id="lewy">lewa kolumna</div>
    <div id="prawy">prawa kolumna</div>
    <div id="stopka">stopka strony</div>
  </div>

</body>

Do każdego elementu div umieszczonego w elemencie div#caly_blok dodajemy jakiś kolor tła, aby móc zobaczyć granice tych elementów, a więc tworzymy następujące reguły CSS:

#naglowek {
  background-color:gold;
}

#lewy {
  background-color:#DDD;
}

#prawy {
  background-color:#EEE;
}

#stopka {
  background-color:gold;
}

Rezultat:

nagłówek strony

lewa kolumna

prawa kolumna

stopka strony

Szerokość elementu div domyślnie dopasowuje się do szerokości swojego rodzica, czyli w tym wypadku szerokość elementu div#caly_blok dopasowuje się do szerokości elementu body, którego szerokość zawsze wynosi 100% szerokości okna przeglądarki internetowej.

Naszym następnym krokiem będzie ułożenie elementu div#lewy oraz div#prawy obok siebie. Wykorzystamy do tego metodę z wykorzystaniem właściwości float, którą poznaliśmy w dziale pierwszym.

Natomiast do elementu div#stopka dodamy właściwość clear:both; która "wyeliminuje" skutek uboczny zastosowania właściwości float:left; na elementach div#lewy oraz div#prawy.

#lewy {
  float:left;
  background-color:#DDD;
}

#prawy {
  float:left;
  background-color:#EEE;
}

#stopka {
  clear:both;
  background-color:gold;
}

Rezultat:

nagłówek strony

lewa kolumna

prawa kolumna

stopka strony

Do naszego układu elementów możemy dodać kilka opcjonalnych właściwości CSS, które urozmaicą jego wygląd:

#caly_blok {
  font-size:24px;
}

#naglowek {
  background-color:gold;
  text-align:center;
}

#lewy {
  float:left;
  background-color:#DDD;
  min-height:150px;
}

#prawy {
  float:left;
  background-color:#EEE;
  min-height:150px;
}

#stopka {
  clear:both;
  background-color:gold;
  text-align:center;
}

Rezultat:

nagłówek strony

lewa kolumna

prawa kolumna

stopka strony

Naszym następnym krokiem będzie sprawienie, aby szerokość prawej i lewej kolumny w sumie wynosiła 100% szerokości elementu rodzica, czyli dla elementu div#lewy ustawiamy jego wartość szerokości, np. na 30% (width:30%;), natomiast dla elementu div#prawy ustawiamy jego wartość szerokości na 70% (width:70%;) dzięki czemu w sumie szerokość obu kolumn będzie zawsze równa 100% (30% pierwsza kolumna + 70% druga kolumna, daje nam w sumie 100%).

#lewy {
  float:left;
  background-color:#DDD;
  width:30%;
  min-height:150px;
}

#prawy {
  float:left;
  background-color:#EEE;
  width:70%;
  min-height:150px;
}

Rezultat:

nagłówek strony

lewa kolumna

prawa kolumna

stopka strony

Nasz układ elementów HTML oraz reguły CSS są już gotowe, jednak należy pamiętać jeszcze o kilku rzeczach.

Dla naszych elementów div tworzących lewą i prawą kolumnę nie należy określać właściwości CSS odpowiedzialnych za prawy lub lewy margines wewnętrzny albo zewnętrzny, jak również właściwości odpowiedzialnych za prawe lub lewe obramowanie elementu, ponieważ te wszystkie wymienione właściwości powiększają całkowitą szerokość elementu HTML i nasze kolumny zostaną umieszczone jedna pod drugą.

Aby rozwiązać nasz problem należy dodać dodatkowy element HTML (np. kolejny element div lub element p) do elementów div tworzących lewą i prawą kolumnę, dzięki czemu dla dodanych elementów będziemy mogli określać każdą właściwość CSS bez obawy, że nasz układ kolumn rozleci się.

Ta czynność została wykonana w kodzie HTML, który znajduje się poniżej:

<body>

  <div id="caly_blok">
    <div id="naglowek">nagłówek strony</div>
    <div id="lewy"><p>lewa kolumna</p></div>
    <div id="prawy"><p>prawa kolumna</p></div>
    <div id="stopka">stopka strony</div>
  </div>

</body>

W tym momencie nic nie stoi nam na przeszkodzie, aby odsunąć zawartość elementu p od jego krawędzi, dzięki właściwości padding.

p {
  margin:0;
  padding:15px;
}

Rezultat:

nagłówek strony

lewa kolumna

prawa kolumna

stopka strony

Kod całego dokumentu HTML został przedstawiony pod spodem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #caly_blok {
        font-size:24px;
      }

      #naglowek {
        background-color:gold;
        text-align:center;
      }

      #lewy {
        float:left;
        background-color:#DDD;
        min-height:150px;
        width:30%;
      }

      #prawy {
        float:left;
        background-color:#EEE;
        min-height:150px;
        width:70%;
      }

      #stopka {
        clear:both;
        background-color:gold;
        text-align:center;
      }

      p {
        margin:0;
        padding:15px;
      }
    </style>

  </head>

  <body>

    <div id="caly_blok">
      <div id="naglowek">nagłówek strony</div>

      <div id="lewy">
        <p>lewa kolumna</p>
      </div>

      <div id="prawy">
        <p>prawa kolumna</p>
      </div>

      <div id="stopka">stopka strony</div>
    </div>

  </body>
</html>

Warto wiedzieć, że jeżeli chcielibyśmy określić minimalna szerokość dla naszego układu elementów HTML, to możemy do tego celu wykorzystać właściwość min-width, natomiast do określenia maksymalnej szerokości możemy posłużyć się właściwością max-width. W tym wypadku wspomniane właściwości należy dodać do elementu div#caly_blok.

#caly_blok {
  font-size:24px;
  min-width:600px;
  max-width:1800px;
}

Nic nie stoi nam na przeszkodzie, aby nasz układ elementów HTML zawierał nie dwie, a trzy kolumny, wystarczy dodać dodatkowy element div do elementu div#caly_blok, który będzie tworzył trzecią kolumnę. Należy również utworzyć regułę CSS określająca wygląd trzeciej kolumny w naszym układzie elementów HTML, jak również należy zmienić istniejące reguły CSS odpowiadające za wygląd pierwszej i drugiej kolumny w taki sposób, aby całkowita szerokość trzech kolumn wynosiła 100%.

Kod dokumentu HTML z trzema kolumnami został przedstawiony pod spodem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #caly_blok {
        font-size:24px;
        min-width:600px;
        max-width:1800px;
      }

      #naglowek {
        background-color:gold;
        text-align:center;
      }

      #lewy {
        float:left;
        background-color:#DDD;
        min-height:150px;
        width:25%;
      }

      #srodek {
        float:left;
        background-color:#EEE;
        min-height:150px;
        width:50%;
      }

      #prawy {
        float:left;
        background-color:#DDD;
        min-height:150px;
        width:25%;
      }

      #stopka {
        clear:both;
        background-color:gold;
        text-align:center;
      }

      p {
        margin:0;
        padding:15px;
      }
    </style>

  </head>

  <body>

    <div id="caly_blok">
      <div id="naglowek">nagłówek strony</div>

      <div id="lewy">
        <p>lewa kolumna</p>
      </div>

      <div id="srodek">
        <p>środkowa kolumna</p>
      </div>

      <div id="prawy">
        <p>prawa kolumna</p>
      </div>

      <div id="stopka">stopka strony</div>
    </div>

  </body>
</html>

Rezultat:

nagłówek strony

lewa kolumna

środkowa kolumna

prawa kolumna

stopka strony

Jedyną niedogodnością takiego układu elementów HTML jest to, że w momencie gdy nasze kolumny nie będą miały takiego samego koloru tła jak element div#caly_blok oraz będą miały różną ilość zawartości, to zobaczymy następujący efekt:

nagłówek strony

to jest lewa kolumna układu elementów HTML w tej części kursu CSS

środkowa kolumna

prawa kolumna układu elementów HTML

stopka strony

Oczywiście, gdy usuniemy kolor tła z naszych kolumn, to efekt będzie następujący:

nagłówek strony

to jest lewa kolumna układu elementów HTML w tej części kursu CSS

środkowa kolumna

prawa kolumna układu elementów HTML

stopka strony

Jeżeli chcielibyśmy, aby wszystkie kolumny posiadały zawsze tą sama wysokość jaką posiada najwyższa kolumna, to musielibyśmy napisać skrypt w języku programowania JavaScript, który odszukałby najwyższa kolumnę, pobrałby z niej wartość wysokości i dodał ją do sąsiednich kolumn, do ich właściwości height.

Innym sposobem na rozwiązanie wspomnianego problemu, dotyczącego różnej wysokości poszczególnych kolumn, jest sprawienie, aby nasze elementy HTML, które tworzą kolumny, zostały zinterpretowane przez przeglądarkę internetową jako komórki tabeli, czyli elementy td. Wspomniany efekt możemy uzyskać dodając do poszczególnych elementów HTML właściwość display wraz z wartością table-cell. Aby efekt działał poprawnie, należy usunąć właściwość float z elementów HTML, do których chcemy dodać właściwość display:table-cell;

A o to efekt jaki uzyskamy, wykonując wspomniane czynności:

nagłówek strony

to jest lewa kolumna układu elementów HTML w tej części kursu CSS

środkowa kolumna

prawa kolumna układu elementów HTML

stopka strony

Kod dokumentu HTML został przedstawiony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #caly_blok {
        font-size:24px;
        min-width:600px;
        max-width:1800px;
      }

      #naglowek {
        background-color:gold;
        text-align:center;
      }

      #lewy {
        display:table-cell;
        background-color:#DDD;
        min-height:150px;
        width:25%;
      }

      #srodek {
        display:table-cell;
        background-color:#EEE;
        min-height:150px;
        width:50%;
      }

      #prawy {
        display:table-cell;
        background-color:#DDD;
        min-height:150px;
        width:25%;
      }

      #stopka {
        background-color:gold;
        text-align:center;
      }

      p {
        margin:0;
        padding:15px;
      }
    </style>

  </head>

  <body>

    <div id="caly_blok">
      <div id="naglowek">nagłówek strony</div>

      <div id="lewy">
        <p>to jest lewa kolumna układu elementów HTML w tej części kursu CSS</p>
      </div>

      <div id="srodek">
        <p>środkowa kolumna</p>
      </div>

      <div id="prawy">
        <p>prawa kolumna układu elementów HTML</p>
      </div>

      <div id="stopka">stopka strony</div>
    </div>

  </body>
</html>

Dla popsucia radości jaką możemy czerpać z korzystania, z właściwości display:table-cell; dodam, że wartość table-cell może nie być interpretowana przez starsze wersje przeglądarki Internet Explorer (od wersji 8 wartość table-cell jest poprawnie interpretowana). Jednak tego typu wersji przeglądarki Internet Explorer nikt już prawie nie używa.

W następnej części kursu CSS poznamy do czego możemy wykorzystać "niepozorną" jednostkę wartości em, w naszym układzie kolumnowym, który utworzyliśmy w tej części kursu CSS.