Elementy poziomego menu CSS wyświetlone obok siebie
- Data publikacji
- Ostatnio edytowano
W tej części kursu CSS poznamy jeden z najczęstszych sposobów na sprawienie, aby kilka blokowych elementów HTML wyświetliło się obok siebie. Jednak zanim to nastąpi rozwiążemy jeden z problemów jaki został przedstawiony w dziale drugim, gdy budowaliśmy pionowe menu CSS. Problem polegał na tym, że elementy a
są elementami wyświetlonymi w linii, a więc nie zajmują całego obszaru swojego elementu rodzica, który jest elementem blokowym, w tym wypadku elementem li
.
Problem ten przeszkadza nam, gdy chcemy kliknąć w dany element a
naszego menu, ponieważ musimy uczynić to dokładnie na zawartości danego elementu a
. Dla ułatwienia przedstawienia naszego problemu elementów a
zostało do nich dodane przykładowe obramowanie (border:1px solid #000;
) oraz różna ilość zawartości, w tym wypadku tekstu.
ul > li > a {
text-decoration:none;
color:#000;
border:1px solid #000;
}
Rezultat:
Nasz problem możemy w dosyć łatwy sposób wyeliminować, wystarczy sprawić, aby elementy a
stały się również elementami blokowymi, dzięki czemu zajmą cały obszar szerokości swojego elementu rodzica, czyli w tym wypadku elementu li
. Za sprawienie, aby element HTML stał się elementem blokowym odpowiada właściwość display
wraz z wartością block
.
ul > li > a {
display:block;
text-decoration:none;
color:#000;
border:1px solid #000;
}
Rezultat:
Pomocnicze obramowanie (border:1px solid #000;
) z elementów a
możemy usunąć, ponieważ na razie nie przyda się nam.
Naszym celem podczas tej części kursu jest wyświetlenie blokowych elementów HTML obok siebie, w naszym wypadku tymi elementami są elementy li
naszego menu CSS. Elementy blokowe HTML ułożą się obok siebie, gdy dodamy do nich właściwość float
wraz z wartością left
, jednak zanim to nastąpi dodamy pomocniczy tekst do elementu ul
, aby wkrótce zauważyć pewną rzecz (przy okazji widzimy granicę naszego elementu ul
, która jest zaznaczona przez pomocnicze czerwone tło).
<ul>
<li><a href="#">link pierwszy</a></li>
<li><a href="#">link drugi</a></li>
<li><a href="#">link trzeci</a></li>
to jest dodatkowa zawartość elementu - ul, którą w rzeczywistości nie należy tu umieszczać
</ul>
Rezultat:
- link pierwszy
- link drugi
- link trzeci
- to jest dodatkowa zawartość elementu ul, którą w rzeczywistości nie należy tu umieszczać
Gdy dodamy właściwość float
wraz z wartością left
do blokowych elementów HTML to zostaną one rozpoznane przez przeglądarkę internetową jako elementy HTML, które mają unosić się w lewą stronę, do lewej krawędzi swojego elementu rodzica. Rozmiar takich elementów, ich szerokość oraz wysokość, jest uzależniona od zawartości jaka zostanie w nich umieszczona. Wspomniane elementy unoszące się będą przylegać jeden do drugiego w poziomie, gdy ich szerokość (uzależniona od ich zawartości) na to pozwoli, oraz gdy szerokość ich elementu rodzica (w naszym wypadku elementu ul
) na to pozwoli (czyli nie będzie mniejsza niż suma szerokości wszystkich elementów unoszących się, czyli w naszym wypadku elementów li
).
ul > li {
float:left;
}
Rezultat:
Od tej pory wszystkie elementy li
, w naszym przykładzie, układają się jeden obok drugiego, ponieważ stały się one elementami unoszącymi się w lewą stronę, bo została do nich dodana właściwość float
wraz z wartością left
. Elementy li
unoszą się nad obszarem swojego elementu rodzica, czyli elementu ul
(obszar z czerwonym tłem), jednak nie wpływają one na rozmiar jego wysokości, co możemy zaobserwować, gdy usuniemy dodatkowy tekst z elementu ul
(element ul
będzie miał zerową wysokość).
Aby sprawdzić czy nasza teoria o zerowej wysokości elementu ul
jest prawdziwa możemy dodać do elementu ul
przykładowe obramowanie (border:1px solid #000;
).
ul {
margin:0;
padding:0;
list-style-type:none;
border:1px solid #000;
}
Rezultat:
Od tej pory element ul
posiada przykładowe obramowanie (border:1px solid #000;
). Wspomniany element ul
posiada zerową wysokość, przez to, że jego zawartością są tylko elementy unoszące się (elementy li
wraz z właściwością float:left;
), dlatego widzimy tylko jego obramowanie (czerwone tło pozostaje niewidoczne przez brak zawartości, która wpływałaby na wysokość elementu ul
).
Kod HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
/* wygląd elementu - ul */
ul {
margin:0;
padding:0;
list-style-type:none;
border:1px solid #000;
}
/* wygląd elementów - li */
ul > li {
float:left;
}
/* wygląd nieparzystych elementów - li elementu - ul */
ul > li:nth-child(odd) {
background-color:gold;
}
/* wygląd parzystych elementów - li elementu - ul */
ul > li:nth-child(even) {
background-color:lightblue;
}
/* wygląd elementów - a */
ul > li > a {
display:block;
text-decoration:none;
color:#000;
}
</style>
</head>
<body>
<ul>
<li><a href="#">link - 1</a></li>
<li><a href="#">link - 2</a></li>
<li><a href="#">link - 3</a></li>
</ul>
</body>
</html>
Cel tej części kursu CSS został osiągnięty. Sprawiliśmy, aby blokowe elementy li
naszego menu CSS zostały ustawione w poziomie jeden obok drugiego. Wykorzystaliśmy do tego celu jeden z najczęstszych sposobów na sprawienie, aby kilka blokowych elementów HTML zostało wyświetlonych jeden obok drugiego w poziomie. Użyliśmy do tego celu właściwość float
wraz z wartością left
, dzięki czemu sprawiliśmy, aby blokowe elementy li
stały się unoszącymi się elementami HTML, jednak tego typu elementy HTML sprawiają pewne kłopoty oraz niedogodności. Jedną z nich jest problem wysokości ich elementu rodzica.
Więcej o unoszących się elementach HTML oraz o właściwości float
mogliśmy dowiedzieć się z działu pierwszego - Unoszący się element HTML.
W następnej części kursu CSS poznamy więcej problemów unoszących się elementów HTML oraz zajmiemy się ich rozwiązywaniem.