Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Wymiarowanie elementów

Wymiarowanie w przestrzeni dwuwymiarowej polega na określeniu dwóch wymiarów: szerokości width oraz wysokości height. W wykonywanych wcześniej ćwiczeniach już to robliśmy, teraz jednak dokonamy podsumowania oraz wskażemy niektóre sytuacje występujące podczas tworzenia strony. Oddzielnym zagadnienien jest właścowość overflow (przepełnienie), ujawniająca się w sytuacji, kiedy obiekty - dzieci nie mieszczą się w kontenerze - rodzicu.

Szerokość width oraz wysokość height

Informacje przydatne podczas budowania strony.

  • Element, który domyślnie zajmuje całą szerokość rodzica (np.akapit), po określeniu width, przyjmuje wartość tej właściwości.
  • Poprzedni punkt wynika stąd, że w tych elementach wartością domyślną jest width:auto.
  • Ustawienie wysokości height:auto pojemnika jest niekiedy bardzo korzystne, ponieważ możemy dowolnie zmieniać jego zawartość, a on automatycznie się do tego dostosuje.
  • Właściwość display:inline; uniemożliwia wymiarowanie.
  • W niektórych sytuacjach, niezbędnym wręcz działaniem jest zastosowanie wartości inherit - przypominam, że wtedy dana właściwość przyjmuje wartość rodzica.

Ćwiczenie 3_2_4_1

Wykonaj stronę pokazującą wymienione wyżej sytuacje. Do wykonania zadania zastosuj następujący kod HTML:

<body>
  <p>
    Akapit z domyślną szerokością "auto"
  </p>
  <p class="p_1">
    Akapit z określoną szerokością oraz domyślną wysokością "auto"
  </p>
  <div class="czarny">
    <div class="czerwony">
    </div>
  </div>
  <br />
  <div class="czarny" style="height:300px;">
    <div class="czerwony" style="height:inherit;">
    </div>
  </div>
</body>

Kod CSS w zewnętrznym arkuszu stylów:

p, p.p_1
{
  border:2px solid red;
}
p.p_1
{
  width:300px;
}
.czarny, .czerwony
{
  display:block;
  position:relative;
}
.czarny
{
  background-color:black;
  width:300px;
}
  .czarny .czerwony
  {
    background-color:red;
    width:200px;
    height:400px;
  }            

Tak powinna wyglądać wykonana strona:

  • Pierwszy akapit dopasował swoją szerokość (width:auto;) do szerokości rodzica, którym jest body.
  • Drugi akapit ma ustaloną szerokość, natomiast wysokością jest domyślne auto.
  • Czarny div jest rodzicem czerwonego.
  • W pierwszym przypadku czarny div musiał powiększył automatycznie swoją wysokość dopasowujac się do diva czerwonego, ze względu na swoją domyślną wysokość auto.
  • W drugim przypadku - odwrotnie: ponieważ div posiada height:inherit;, więc przyjął wysokość swojego rodzica.

Wyśrodkowanie obiektu w poziomie

Ten temat związany jest z pozycjonowaniem obiektów, ustalaniem ich wymiarów oraz marginesami. Zdecydowałem się tutaj umieścić przykładowe ćwiczenie. Najczęściej tworząc szablon strony, główny pojemnik centrujemy w poziomie. Przestrzegam przed próbami obliczania odległości, ponieważ jak już wspominalismy, na różnych monitorach efekt będzie różny. Istnieje prosty sposób na to, aby obiekt wycentrować w poziomie. Należy ustatwić display:block; oraz margin:auto;. Właściwość margin (margines) poznasz na następnych zajęciach. Wartość position nie może być ustawiona na absolute.

Ćwiczenie 3_2_4_2

Wykonaj stronę pokazującą centrowanie obiektu w poziomie. Do wykonania zadania zastosuj następujący kod HTML:

<body>
  <div>
  </div>
</body>

Kod CSS w zewnętrznym arkuszu stylów:

div
{
  width:200px;
  height:200px;
  background-color:red;
  margin:auto;
}

Tak powinna wyglądać wykonana strona:

Wartością domyślną display dla diva jest block, tak więc można tę właściwość pominąć.

Przepełnienie - overflow

Jak już wcześniej powiedzieliśmy overflow określa co zrobić, gdy zawartość elementu nie mieści się w rozmiarach podanych przez width oraz height. Możliwe jest ukrycie nadmiarowej zawartość, pokazanie wszystkiego poprzez powiększenie rozmarów elementu (bez względu na parametry width i height) albo utworzenie suwaków do przewijania przepełnionej treści. Wartości tej właściwości:

  • visible - pokazanie całej zawartości bez względu na rozmiary (wartość domyślna),
  • hidden - ukrycie nadmiaru,
  • scroll - suwaki do przewijania,
  • auto - pokazanie suwaków jeśli to konieczne.

Ćwiczenie 3_2_4_3

Wykonaj stronę pokazującą różne sposoby pokazywania obiektu przepełnionego. Do wykonania zadania zastosuj następujący kod HTML:

<body>
  <div style="overflow:visible;">
    To jest który znajduje się w obiekcie div, przy czym overflow:visible;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh 
    augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. 
    Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. 
    Quisque semper justo at risus.
  </div>
  <div style="overflow:hidden;">
    To jest który znajduje się w obiekcie div, przy czym overflow:hidden;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh 
    augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. 
    Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. 
    Quisque semper justo at risus.
  </div>
  <div style="overflow:scroll;">
    To jest który znajduje się w obiekcie div, przy czym overflow:scroll;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh 
    augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. 
    Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. 
    Quisque semper justo at risus.
  </div>
  <div style="overflow:auto;">
    To jest który znajduje się w obiekcie div, przy czym overflow:auto;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh 
    augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. 
    Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. 
    Quisque semper justo at risus.
  </div>
</body>

Kod CSS w zewnętrznym arkuszu stylów:

div
{
  display:block;
  float:left;
  width:150px;
  height:100px;
  margin-left:10px;
  border:1px solid red;
  font-family:Arial,sans-serif;
  font-size:14px;
  padding:5px;
}

Tak powinna wyglądać wykonana strona:

Sprawdź czy kolejne elementy div, reagują na przepełnienie tak jak to opisaliśmy. Właściwość float poznasz na tych zajęciach.

Praca domowa

Wykonaj stronę prezentującą właściwości poznane podczas zajęć.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.