Element "a" wyświetlany w bloku
- Data publikacji
- Ostatnio edytowano
W tej części kursu CSS sprawimy, aby nasze elementy a
były interpretowane przez przeglądarkę internetową jako elementy blokowe, dzięki czemu szerokość elementów a
będzie automatycznie dopasowywała się do szerokości ich elementu rodzica, czyli elementu li
.
Jak wiemy z poprzedniej części kursu, element a
jest wyświetlany w linii, czyli granice jego szerokości i wysokości określa jego zawartość jaką w nim umieścimy. W naszym wypadku tą zwartością jest tekst - link 1, link 2 itd. Spójrzmy więc na nasze pionowe menu CSS i spróbujmy kliknąć, w któryś element a
.
Aby kliknąć w któryś odnośnik, w naszym menu, musimy dokładnie najechać kursorem myszki na tekst, który znajduje się w tym odnośniku, co czasami może być denerwujące dla internauty przeglądającego naszą stronę internetową. W momencie gdy zmienimy granice rozmiarów naszych odnośników, czyli elementów a
, to właśnie wtedy uda nam się wyeliminować to utrudnienie.
Aby zobaczyć jaką przestrzeń zajmują nasze elementy a
w oknie przeglądarki internetowej, możemy określić dla nich jakiś kolor tła, na przykład kolor jasnoszary, co czynimy dodając właściwość background-color:#EEE;
do reguły CSS, która odpowiada za wygląd elementów a
, czyli:
ul li a {
text-decoration:none;
background-color:#EEE;
}
Ponadto dodamy nieco więcej teksu do naszych elementów a
, dzięki czemu zobaczymy pewną różnicę w przestrzeni, jaką dane elementy a
zajmują:
Analizując to co zostało wyświetlone, widzimy, że szerokość naszym elementów a
uzależniona jest od zawartości jaka się w nich znajdzie.
W jaki sposób sprawić, aby szerokość elementu a
dopasowywała się automatycznie do szerokości elementu, w którym znajduje się dany element a
?
Rozwiązanie tego problemu zostanie przedstawione pod spodem.
Spójrzmy na nasz kod HTML:
<ul>
<li><a href="#">to jest odnośnik 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">to jest link 3</a></li>
<li><a href="#">odnośnik</a></li>
</ul>
W elemencie ul
znajdują się cztery elementy li
, w każdym takim elemencie li
został umieszczony element a
. Domyślnie:
- element
ul
jest wyświetlany w bloku - element
li
jest wyświetlany w bloku - element
a
jest wyświetlany w linii
Tymczasowo zmienimy kolor i grubość obramowania elementu ul
, jak również kolor tła elementów li
, dzięki czemu zobaczymy granice wszystkich elementów, które użyliśmy do tej pory, do budowy naszego pionowego menu CSS.
Czerwone obramowanie określa granice elementu ul
. Jasnoniebieski kolor tła określa granice elementów li
. Jasnoszary kolor tła określa granice elementów a
. Elementy ul
oraz li
domyślnie są wyświetlane jako elementy blokowe, dlatego szerokość elementu li
jest taka sama jaką posiada jego element rodzic, czyli w tym wypadku element ul
.
Szerokość elementu ul
wynosi 250 pikseli (nie wliczając szerokości jego obramowania), ponieważ dodaliśmy do niego, w jednej z poprzednich części tego działu, właściwość width:250px;
dzięki czemu elementy blokowe, które znajdą się w danym elemencie ul
będą również posiadały szerokość równą 250 pikseli.
Dlaczego elementy a
nie posiadają szerokości takiej jaką posiada ich element rodzic?
Ponieważ elementy a
są wyświetlane w linii z innymi elementami tego typu, a ich szerokość jest uzależniona od zawartość jaka znajdzie się w danym elemencie a
. Musimy sprawić, aby elementy a
były interpretowane przez przeglądarkę internetową jako elementy blokowy, co uzyskamy za pomocą właściwości display:block;
.
Dodajemy wspomnianą właściwość display:block;
do reguły, która odpowiada za wygląd naszych elementów a
, czyli:
ul li a {
display:block;
text-decoration:none;
background-color:#EEE;
}
Od tej pory nasze elementy a
będą interpretowane przez przeglądarkę internetową jako elementy wyświetlane w bloku:
Dzięki właściwości display:block;
elementy a
stały się elementami wyświetlanym w bloku i ich szerokość jest taka sama jaką posiada ich element rodzic. Od tej pory, jeżeli chcemy kliknąć w danym odnośnik, to nie musimy wskazywać dokładnie na tekst, który znajduje się w danym elemencie a
. Wystarczy, że wskażemy na przestrzeń, jaką zajmuje element a
w oknie naszej przeglądarki internetowej, przestrzeń ta jest uzależniona od rodzica elementu a
, czyli od elementu li
.
W tym momencie możemy usunąć pomocnicze właściwości CSS jakie dodaliśmy do naszych elementów, czyli czerwone obramowanie, jasnoniebieski kolor tła, większą szerokość obramowania.
Pełny kod HTML z tej części kursu CSS został przedstawiony pod spodem:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
/* wygląd elementu - ul */
ul {
list-style-type:none;
margin:0;
padding:0;
border:1px solid #CCC;
width:250px;
}
/* wygląd elementów - li */
ul li {
border-top:1px solid #CCC;
}
/* wygląd pierwszego elementu - li */
ul li:first-child {
border-top:none;
}
/* wygląd elementów - a */
ul li a {
display:block;
text-decoration:none;
background-color:#EEE;
}
/* wygląd elementu - a - w momencie najechania na niego kursorem myszki */
ul li a:hover {}
</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>
<li><a href="#">link 4</a></li>
</ul>
</body>
</html>
Jak na razie nasze menu prezentuje się następująco:
W następnej części kursu dodamy więcej nowych właściwości CSS do wyglądu elementów a
, dzięki czemu pierwsza wersja pionowego menu CSS zostanie prawie ukończona.