Układ kolumnowy na stronie z pomocą float

Dziś zajmiemy się tematyką rozmieszczania elementów na stronie internetowej. Do tego celu na stronach wykorzystuje się elementy takie jak <div>, <header> czy <footer>. Nas dziś będzie interesował <div>.

Istnieje kilka właściwości CSS, które umożliwiają nam ustawianie elementu HTML <div>. W związku z tym, że najlepiej zacząć od podstaw w tym artykule do tego celu będziemy używać właściwości float.

Jak działa właściwość CSS float

Właściwość CSS float posiada ustawienia takie jak:

right – czyli do prawej
left – do lewej
none – brak (resetuje ustawienia float)
inherit – ustawienie dziedziczone jest po rodzicu (elemencie nadrzędnym)

Deklaracja właściwości tej wyglądać zaś może np. w ten sposób:

div{
  float:left;
}

Przykład:

float:right; – div 1

float:left; – div 2

float:none; – div 3

Style CSS z przykładu:

.container-1{
  border:1px solid; 
  display: inline-block; 
  width: 100%;
}
.container-1 div{border: 1px solid blue; width:30%;}
.float-left{float:left;}
.float-right{float:right;}
.float-none{float:none;}

Kod HTML:

<div class="container-1">
  <div class="float-right">float:right;</div>
  <div class="float-left">float:left;</div>
  <div class="float-none">float:none;</div>
</div>

Jak widać <div> z ustawieniem float right i left ustawiły się obok siebie, pomimo że są to elementy blokowe. Zmianie uległą też ich kolejność. Jest tak dlatego, że właściwość float może zmienić sposób działania elementów z blokowych na liniowe.

elementy liniowe i blokowe HTML

Co chcemy uzyskać

Na potrzeby tego artykułu przygotujemy bardzo prostą stronę internetową posiadającą:

3 kolumny
2 grafiki w tekście
kilka akapitów
nagłówek
oraz bardzo proste menu

projekt prostej strony www

Ustawianie elementów strony obok siebie

Do wykonania podobnego efektu będziemy potrzebowali kilku różnych elementów HTML. Za bazę jednak posłuży nam post – Struktura strony internetowej w HTML5

Znajdziemy tam podstawowe elementy, z których składa się strona internetowa w HTML5 (czyli obecnym standardzie). Na potrzeby naszej witrynki kod ten będziemy musieli jednak trochę zmodyfikować! Zawiera on bowiem elementy, których nie będziemy używać lub użyjemy w innym miejscu.

Budujemy bowiem stronę o nieco innym układzie niż ta z tamtego artykułu. Tak więc nasza podstawa będzie wyglądać po zmianach następująco:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
     <title>Przykładowa strona</title>
  </head>
  <body>
    <section>
 <div class="col-1">kolumna 1</div>
 <div class="col-2">kolumna 2</div>
 <div class="col-3">kolumna 3</div>
    </section>
  </body>
</html>

Właśnie utworzyliśmy szkielet naszego layoutu strony. Jak widać brakuje w nim jednak wielu elementów. A w przyszłych kolumnach mamy jedynie napis – „kolumna” + jej numer. Dlatego też spróbujemy zacząć uzupełniać treścią i elementami HTML.

Ustawienie obok siebie kilku kolumn / obiektów

Na początek ustawmy 3 kolumny obok siebie. Możemy tego dokonać poprzez nadanie im odpowiednich szerokości oraz właściwości float np.:

width: 30%;

width: 70%;

width: 30%;

W tym wypadku kolumny nie układają się obok siebie. Spróbujmy więc raz jeszcze:

width: 20%;

width: 60%;

width: 20%;

Teraz kolumny układają się tak jak należy! Nasz kod w tym przypadku będzie wyglądał następująco:

section{
  width: 900px;
  margin: 0 auto;  /* wyśrodkuje kontener */  padding: 0;
}
.col-1, .col-2, .col-3{
  float: left;
  padding: 15px;
}
.col-1, .col-3{
   width: 20%;
}
.col-2{
  width: 60%;
}

Tło nie dochodzi do końca?!

Jeżeli po wdrożeniu tego kodu tło / obramowanie nie będzie dochodziło do końca, urywało się w połowie lub od razu u góry wystarczy dodać poniższy kod CSS do obiektu:

display: inline-block; 
width: 100%;  /* szerokość trzeba dostosować do swoich potrzeb */

Dodajemy proste pionowe menu

Umieścimy je w miejscu napisu „kolumna 1”. Menu będzie znajdowało się pomiędzy znacznikami <nav> i </nav> a oparte będzie o punktowaną listę.

<nav class="menu">
 <ul>
  <li><a href="#">Strona główna</a></li>
  <li><a href="#">Podstrona 1</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Kontakt</a></li>
 </ul>
</nav>

Chwilowo mamy więc zwykła listę z hiperłączami. Teraz trzeba będzie ją dostosować do projektu. Elementy układają się już jeden pod drugim dzięki czemu jeden problem mamy z głowy.

Teraz ukrywamy wypunktowanie oraz odstęp od krawędzi:

nav ul{
  list-style: none;
  padding: 0;
}

Teraz zajmiemy się każdym z przycisków (interesuje nas element <a>). Nie musimy jednak tego robić osobno a użyć nazwy klasy (jeśli jest dodana) lub odwołać się po lokalizacji do konkretnej grupy.

nav ul li a{
    display: block; /* zmieniamy element liniowy na blokowy */    padding: 8px;
    background: #d98e89;  /* dodajemy tło */    text-decoration: none;  /* usuwamy podkreślenie tekstu   */    color: #333;
    text-align: center;  /* centrujemy tekst  */    border-bottom: 1px solid #fff;  /* dodajemy ramkę od dołu */}

Warto przeczytać:

Skoro mamy już bardzo proste menu pora przejść do kolejnego elementu.

Dodawanie treści

Kod kolumny drugiej będzie więc wyglądał następująco:

<div class="col-2">
 <h1>Sed ut perspiciatis, </h1>

 <p>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
  
 <p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur <b>aut odit aut fugit</b>, sed ut odit aut fugit, sed quia consequuntur magni <i>dolores eos, qui ratione voluptatem sequi nesciunt, neque porro</i> </p>
<img src="https://aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1-2.jpg" class="first-img">
   <ul class="left">
 <li>Nemo enim ipsam </li>
 <li>voluptatem, </li>
 <li>quia voluptas sit, </li>
 <li>aspernatur a</li>
   </ul>
<img src="https://aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1-2.jpg" class="second-img">
  </div>

Jak widać dodaliśmy tu dwa akapity <p>, punktowaną listę <ul>, dwie grafiki <img>. Posiadamy też nagłówek <h1>. W tekście pamiętamy o dodaniu w odpowiednich miejscach pogrubień <b> lub <strong> oraz pochylenie <i>.

W projekcie nagłówek <h1> jest wyśrodkowany i pogrubiony. Nagłówki domyślnie są pogrubione dlatego jedynie musimy go wyśrodkować.

h1{
   text-align:center;
}

Trzecia kolumna z mniejszym tekstem

W wypadku gdy chcemy aby tekst w 3 kolumnie zawsze był mniejszy możemy ustawić wielkość fontu (potocznie czcionki) dla całej kolumny. Przykładowo:

.col-3{
  font-size:14px;
}

Kod HTML:

<div class="col-3"> 
  <p>iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas</p>
</div>

Ustawienie grafiki obok tekstu

W projekcie mamy też 2 obrazki. Pierwszy z nich jest wyśrodkowany, drugi zaś przesunięty do prawej. By wyśrodkować grafikę musimy zmienić ją obiekt blokowy (obrazy to obiekty liniowe).

Kod dla naszej strony:

.first-img{
  margin: 0 auto; /* środkowanie obiektu blokowego */  display: block;  /* zmieniamy w obiekt blokowy */}
.second-img{
    float:right;
}
ul.left{
   float: left;  /* zmiana na obiekt liniowy */}

Powyższy kod zadziała dla kodu HTML, który wkleiłam już wcześniej.