Układ kolumnowy na stronie z pomocą float

Czas czytania: 7 minut

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.

Co znajdziesz w tym wpisie

1 Jak działa właściwość CSS float
2 Co chcemy uzyskać
3 Ustawianie elementów strony obok siebie
4 Złożony kod

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.

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

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://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.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://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.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.