Web / www

Jak ułożyć dwa DIV’y obok siebie?

Jeżeli dopiero rozpoczynasz naukę języka CSS oraz/lub HTML to z pewnością przyjdzie moment, w którym będziesz budować schemat strony internetowej. Schemat, szablon czy układ strony, możesz nazywać jak chcesz, zazwyczaj buduje się z wykorzystaniem znaczników <DIV>, które służą właśnie do tego celu.

Za pomocą znaczników div możemy tworzyć elementy blokowe, które działają jak pudełka. Każde pudełko jest umieszczone w określonym miejscu, ma swoją nazwę i przechowuje konkretne elementy w sobie. Za pomocą pudełek możemy segregować i układać elementy tak, aby można było je łatwo znaleźć. W przypadku strony internetowej mówimy tutaj oczywiście o czytelności.

Jeżeli znasz podstawy języka HTML i w pustym pliku umieścisz kilka div’ów, jeden pod drugim…

</p>
<p> &lt;body&gt;<br />
   &lt;div&gt;<br />
     &lt;p&gt;Treść pierwszego bloku&lt;/p&gt;<br />
   &lt;/div&gt;<br />
   &lt;div&gt;<br />
     &lt;p&gt;Treść drugiego bloku&lt;/p&gt;<br />
   &lt;/div&gt;<br />
   &lt;div&gt;<br />
     &lt;p&gt;Treść trzeciego bloku&lt;/p&gt;<br />
   &lt;/div&gt;<br />
   &lt;div&gt;<br />
     &lt;p&gt;Treść czwartego bloku&lt;/p&gt;<br />
   &lt;/div&gt;<br />
 &lt;/body&gt;</p>
<p>

…to na ekranie w przeglądarce zobaczysz dokładnie taką samą strukturę jak w kodzie – każdy kolejny blok będzie znajdował się pod blokiem poprzednim. Jak w takim razie możemy uzyskać efekt „dzielenia” ekranu na kolumny? Tak aby np. dwa bloki znajdowały się obok siebie a trzeci blok znajdował się poniżej tych dwóch? Odpowiedź jest bardzo prosta, użyjemy do tego CSS’a!

Dla naszego ćwiczenia załóżmy, że chcemy stworzyć układ strony internetowej, który składa się z nagłówka, treści właściwej po lewej stronie, treści właściwej po prawej stronie oraz stopki a całość niech będzie zamknięta w kontenerze głównym.

W pierwszym kroku stwórzmy nasz plik index.html, w którym umieścimy wszystkie elementy typu DIV oraz odpowiednio je ponazywamy (zgodnie z rysunkiem). Plik będzie wyglądał tak:

<br />
&lt;div id=&quot;container&quot; &gt;<br />
  &lt;div id=&quot;header&quot;&gt;<br />
     &lt;h1&gt;Logo&lt;/h1&gt;<br />
  &lt;/div&gt;<br />
  &lt;div id=&quot;left&quot;&gt;<br />
     &lt;p&gt;Ciekawa treść po lewej stronie&lt;/p&gt;<br />
  &lt;/div&gt;<br />
  &lt;div id=&quot;right&quot;&gt;<br />
     &lt;p&gt;Jeszcze ciekawsza prawa strona&lt;/p&gt;<br />
  &lt;/div&gt;<br />
  &lt;div id=&quot;footer&quot;&gt;<br />
     &lt;p&gt;Treść stopki&lt;/p&gt;<br />
  &lt;/div&gt;<br />
 &lt;/div&gt;<br />

Stworzyliśmy już strukturę pliku html. Teraz czas na CSS, dzięki któremu wystylizujemy nasze pudełka, tak aby były odpowiednio rozmieszczone oraz dodatkowo każdemu nadamy inne tło (aby efekt w przeglądarce był dobrze widoczny).

Stwórzmy plik CSS i wystylizujmy najpierw nasz blok główny „container”:

<br />
#container {<br />
  width: 1000px;<br />
  margin-left: auto;<br />
  margin-right: auto;<br />
  background-color: #abbcd8;<br />
}<br />

Mamy gotowy nasz pojemnik główny, któremu nadaliśmy określoną szerokość, wyśrodkowaliśmy go w poziomie oraz nadaliśmy mu kolor tła.

Teraz czas na nasz nagłówek „header”:

<br />
#header {<br />
  width: 100%;<br />
  background-color: #6d97db;<br />
}<br />

Tutaj chyba kodu nie trzeba opisywać, dodaliśmy jedynie atrybut width, w którym deklarujemy, że nasz nagłówek ma mieć całą szerokość (czyli 1000px tak jak nasz container) oraz dodaliśmy kolor tła.

Jak ułożyć bloki obok siebie w CSS?

Teraz pora na danie główne, czyli nasze dwa bloki, które mają znajdować się obok siebie. Zasada układania bloków w ten sposób jest niezwykle prosta. Jeżeli chcemy aby bloki sąsiadowały ze sobą, należy użyć zapisu „float: left” a pierwszy blok, który ma już być osobnym wierszem powinien mieć znacznik „clear: both”. Proste, prawda? 🙂

Zobaczmy jak będzie w praktyce wyglądał kod naszych bloków, „left” oraz „right”:

<br />
#left {<br />
  float: left;<br />
  width: 450px;<br />
  background-color: #efefef;<br />
}<br />
#right {<br />
  float: left;<br />
  width: 450px;<br />
  background-color: #a3a3a3;<br />
}<br />

W powyższym kodzie użyliśmy zapisu float: left w obydwu blokach, ponieważ chcę aby znajdowały się one obok siebie. Obydwa bloki mają nadaną szerokość oraz każdy ma inny kolor tła, aby można było zobaczyć różnicę w przeglądarce.

Jak już się zapewne domyślasz, kolejny blok, czyli nasza stopka powinna zawierać zapis „clear: both” ponieważ chcemy aby znajdowała się w osobnym wierszu (nie chcemy aby sąsiadowała z innymi blokami). Napiszmy więc kod CSS:

<br />
#footer {<br />
  clear: both;<br />
  width: 100%;<br />
  background-color: black;<br />
}<br />

To jest w zasadzie cała tajemnica, zaledwie kilka linii kodu powoduje, że bloki zmieniają swoje zachowanie i ustawiają się tak jak byśmy tego pożądali. Nie pozostaje Ci nic innego jak przetestować wynik powyższego ćwiczenia w przeglądarce. Powodzenia!