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 robiliśmy, teraz jednak dokonamy podsumowania oraz wskażemy niektóre sytuacje występujące podczas tworzenia strony. Oddzielnym zagadnieniem jest właściwość 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ść dopasowując 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ż wspominaliśmy, na różnych monitorach efekt będzie różny. Istnieje prosty sposób na to, aby obiekt wycentrować w poziomie. Należy ustawić 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 rozmiaró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:
