Układ kolumnowy na stronie z pomocą float

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.

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

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://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.

Obrazek do prawej

Poza tekstem:

iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas

<div class="container-2">
<p>iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas</p>
<img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" style="float:right;">
</div>

W akapicie na końcu

iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas

<div class="container-2">
<p>iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas <img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" style="float:right;"></p>

</div>

Na początku

iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas

<div class="container-2">
<p><img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" style="float:right;">iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas </p>

</div>

Obrazek do lewej

Poza tekstem:

iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas

<div class="container-2">
<p>iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas</p>
<img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" style="float:left;">
</div>

W akapicie na końcu

iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas

<div class="container-2">
<p>iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas <img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" style="float:left;"></p>

</div>

Na początku

iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas

<div class="container-2">
<p><img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" style="float:left;">iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas </p>

</div>

Złożony kod

Gotowy kod strony przedstawia się następująco:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
     <title>Przykładowa strona</title>
	 <style>
	 *, ::after, ::before {
    box-sizing: border-box;
     }
	 body{
	 margin:0;
	 padding:0;
	 }
	 h1{
		text-align:center;
	 }
	 section{
	    width: 900px;
        margin: 0 auto;
        padding: 0;
	 }
	 .col-1, .col-2, .col-3{
		float: left;
		padding: 15px;
	 }
	 .col-1, .col-3{
		width: 20%;
	 }
	 .col-2{
		width: 60%;
	 }
	 .col-3{
	    font-size:14px;
	 }
	 
	  nav ul{
		list-style: none;
        padding: 0;
	  }
	  nav ul li a{
	    padding: 8px;
        display: block;
        background: #d98e89;
        text-decoration: none;
        color: #333;
        text-align: center;
		border-bottom:1px solid #fff;
	  }
	  nav ul li a:hover{
		background: #dfa09c;
	  }
	  .first-img{
	  margin: 0 auto;
      display: block;}
	  .second-img{
		float:right;
	  }
	  ul.left{
	  float: left;
	  }
	  
	 </style>
  </head>
  <body>
	<section>
		<div class="col-1">
			<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>
		</div>
		<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>
		<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>
	</section>
  </body>
</html>

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*Wyrażam zgodę na przechowywanie i przetwarzanie moich danych na potrzeby umieszczenia mojego komentarza.
*W przypadku gdy treść komentarza narusza prawo Polskie i dobro oraz uczucia innych osób Administrator, zachowuje prawo nie publikowania go