Autor publikacji: Virtual Patriot - Administrator

Formatujemy wygląd elementu "ul"

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

W poprzedniej części kursu CSS usunęliśmy domyślne cechy z elementu ul, który tworzy strukturę naszego pionowego menu w kodzie HTML.

W tej części kursu zajmiemy się dodaniem do elementu ul pewnych właściwości wyglądu, które pomogą nam utworzyć nasze docelowe pionowe menu CSS.

Naszym pierwszym krokiem będzie dodanie obramowania do elementu ul, czyli dodanie do niego właściwości border:1px solid #CCC;

Właściwość border:1px solid #CCC; spowoduje utworzenie obramowania po każdej stronie elementu ul. Wspomniane obramowanie będzie wyróżniało się następującymi cechami:

1px - szerokość obramowania będzie wynosiła 1 piksel.
solid - stylem obramowania będzie ciągła pojedyncza linia.
#CCC - kolorem obramowania będzie jeden z odcieni koloru szarego.

Od tej pory nasze pionowe menu CSS prezentuje się w następujący sposób:

to jest element - li
to jest element - li
to jest element - li
to jest element - li

Widząc elementy HTML, które zostały wyświetlone powyżej, możemy dojść do wniosku, że nasz element ul jest nieco za szeroki, ponieważ po dodaniu do niego obramowania, zauważyliśmy granicę elementu ul. Do określenia własnej szerokości dla elementu ul wykorzystamy właściwość width:250px;

Właściwość width:250px; spowoduje ustawienie wartości szerokości dla elementu ul. W tym wypadku będzie ona wynosiła 250 pikseli.

A tak teraz prezentuje się nasze pionowe menu CSS:

to jest element - li
to jest element - li
to jest element - li
to jest element - li

Do reguły CSS, która zmienia wygląd elementu ul i którą utworzyliśmy w poprzedniej części kursu CSS, należy dodać właściwości odpowiadające za obramowanie i szerokość elementu ul, które poznaliśmy w tej części kursu CSS.

Cały poprawny zapis został przedstawiony poniżej:

ul {
  list-style-type:none;
  margin:0;
  padding:0;
  border:1px solid #CCC;
  width:250px;
}

Dla ułatwienia, kod w istniejącej regule CSS, który jest nowy względem poprzedniej części kursu, będzie zaznaczany za pomocą wyróżnienia o kolorze żółtym.

Pełny kod HTML z tej części kursu CSS znajduje się pod spodem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      ul {
        list-style-type:none;
        margin:0;
        padding:0;
        border:1px solid #CCC;
        width:250px;
      }
    </style>
  </head>

  <body>

    <ul>
      <li>to jest element - li</li>
      <li>to jest element - li</li>
      <li>to jest element - li</li>
      <li>to jest element - li</li>
    </ul>

  </body>
</html>

W następnej części kursu zajmiemy się formatowaniem wyglądu elementów li.