Autor publikacji
Virtual Patriot - Administrator

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.