Inne sposoby na wyświetlenie kilku elementów HTML obok siebie
- Data publikacji
- Ostatnio edytowano
W jednej z poprzednich części tego kursu CSS poznaliśmy jeden ze sposobów na wyświetlenie kilku elementów HTML obok siebie. Był to sposób, który wykorzystywał właściwość float. Wspomniany sposób wymagał od nas poznania różnych technik, które pozwoliły nam "naprawić" pewien problem wynikający ze stosowania właściwości float.
W tej części kursu CSS poznamy inne sposoby na wyświetlenie kilku elementów HTML obok siebie, jednak każdy z nich będzie zawierał w sobie pewne mniejsze lub większe ograniczenia.
Sposób 1
Dodanie do elementów "dzieci" właściwości "float"
Ten sposób już poznaliśmy w jednej z poprzednich części tego kursu CSS - Kilka blokowych elementów HTML obok siebie.
Kod jednego z poprawnych dokumentów HTML został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#rodzic {
background-color:black;
border:3px dashed red;
font-size:1.4em;
}
#dziecko1 {
float:left;
width:70%;
background-color:lightblue;
}
#dziecko2 {
float:left;
width:30%;
background-color:lightgreen;
}
.floatfix {
zoom:1; /* dla IE < 8 */
}
.floatfix:after {
content:'';
display:block;
clear:both;
}
</style>
</head>
<body>
<div id="rodzic" class="floatfix">
<div id="dziecko1">div - 1</div>
<div id="dziecko2">div - 2</div>
</div>
</body>
</html>Rezultat:
Aby móc w pełni poprawnie korzystać z omawianego sposobu musieliśmy zapoznać się z kilkoma sposobami "naprawiającymi" wysokość elementu rodzica, które zostały zaprezentowane w poprzedniej części tego kursu CSS.
Warto znać sposób, który został omówiony, ponieważ ciągle jest on bardzo często stosowany, jeżeli nie najczęściej.
Sposób 2
Dodanie właściwości "display" wraz z wartością "inline-block" do "dzieci" elementu "rodzica"
Po dodaniu właściwości display wraz z wartością inline-block do dzieci elementu #rodzic będą one interpretowane przez przeglądarkę internetową jako zawartość elementu liniowego, lecz z zachowaniem pewnych cech elementu blokowego.
Wspomniane elementy z właściwością display:inline-block; zachowają w sobie pewne cechy elementu blokowego, dzięki czemu takie właściwości jak: padding, margin, width, height będą na nie oddziaływały jak na normalny element blokowy.
Ponadto wspomniane elementy HTML wyświetlą się obok siebie, jednak tylko jeżeli zostaną umieszczone, w kodzie HTML, obok siebie.
<body>
<div id="rodzic">
<div id="dziecko1">div - 1</div><div id="dziecko2">div - 2</div>
</div>
</body>
Tworzymy nową regułę CSS, która odwoła się do elementów #dziecko1 oraz #dziecko2 oraz doda do nich właściwość display:inline-block;
#dziecko1, #dziecko2 {
display:inline-block;
}Rezultat:
Po ujrzeniu naszych elementów HTML mogłoby się nam wydawać, że wszystko jest w porządku, jednak należy pamiętać jeszcze o kilku rzeczach. Jeżeli jeden z naszych przykładowych elementów będzie zawierał w sobie kilka poleceń <br>, to zobaczymy następujący efekt:
Aby z powrotem wyrównać drugi element HTML do górnego marginesu, należy dodać do wszystkich dzieci elementu #rodzic, właściwość vertical-align:top;
#dziecko1, #dziecko2 {
display:inline-block;
vertical-align:top;
}Rezultat:
Ostatnią rzeczą na jaką należy zwrócić uwagę, bądź też nie, jest fakt, że przeglądarka IE 7 źle interpretuje wartość inline-block, dlatego trzeba utworzyć dla niej osobną regułę CSS, która będzie zawierać w sobie właściwość display:inline; a nie display:inline-block;
<!--[if lte IE 7]>
<style>
#dziecko1, #dziecko2 {
display:inline;
}
</style>
<![endif]-->
Przedstawiony zapis dla przeglądarki IE 7 umieszczamy pod regułami CSS przeznaczonymi dla pozostałych przeglądarek internetowych, dzięki czemu reguła CSS przeznaczona dla przeglądarki IE 7 nadpisze już istniejącą regułę CSS, w przypadku gdy użytkownik wyświetli dane elementy HTML w przeglądarce IE 7 (w tym wypadku właściwość display:inline-block; zostanie zastąpiona właściwością display:inline;
Kod dokumentu HTML, omawianego sposobu, został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#rodzic {
background-color:black;
border:3px dashed red;
font-size:1.4em;
}
#dziecko1 {
width:70%;
background-color:lightblue;
}
#dziecko2 {
width:30%;
background-color:lightgreen;
}
#dziecko1, #dziecko2 {
display:inline-block;
vertical-align:top;
}
</style>
<!--[if lte IE 7]>
<style>
#dziecko1, #dziecko2 {
display:inline;
}
</style>
<![endif]-->
</head>
<body>
<div id="rodzic">
<div id="dziecko1">div - 1</div><div id="dziecko2">div - 2</div>
</div>
</body>
</html>Sposób 3
Dodanie właściwości "display" wraz z wartością "inline" do "dzieci" elementu "rodzica"
Jednym ze sposobów na ułożenie kilku blokowych elementów HTML obok siebie, np. elementów li, jest sprawienie, aby wspomniane elementy zostały zinterpretowane przez przeglądarkę internetową jako elementy wyświetlane w linii.
Wspomniany efekt uzyskamy dodając do danych elementów HTML właściwość display wraz z wartością inline.
- element - li
- kolejny element - li
- następny element - li
Nasze elementy li co prawda ułożyły się obok siebie, ale od tej pory nie są one już interpretowane przez przeglądarkę internetową jako elementy wyświetlane w bloku, tylko jako elementy wyświetlane w linii, dlatego niektóre właściwości CSS nie będą działać na dane elementy li (np. właściwość width, height, margin-top, margin-bottom).
Kod dokumentu HTML, omawianego sposobu, został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
ul {
list-style-type:none;
margin:0;
padding:0;
background-color:black;
border:3px dashed red;
font-size:1.4em;
}
ul > li {
display:inline;
background-color:lightblue;
}
</style>
</head>
<body>
<ul>
<li>element - li</li>
<li>kolejny element - li</li>
<li>następny element - li</li>
</ul>
</body>
</html>Sposób 4
Dodanie właściwości "display" wraz z wartością "table-cell" do "dzieci" elementu "rodzica"
Innym ze sposobów na wyświetlenie kilku blokowych elementów HTML obok siebie jest sprawienie, aby dane elementy były interpretowane przez przeglądarkę internetową jako komórki tabeli HTML, czyli elementy td.
Wspomniany efekt możemy uzyskać, dzięki właściwości display oraz wartości table-cell, należy dodać ją, tak jak w poprzednich sposobach przedstawionych w tej części kursu CSS, do dzieci danego elementu HTML. Dodatkowo należy dodać właściwość display wraz z wartością table do elementu rodzica, dzięki czemu cały układ elementów HTML będzie interpretowany przez przeglądarkę internetową jako tabela HTML. Ustalając jakąś wartość właściwości width dla elementu rodzica pozbędziemy się problemów ze zbyt małą szerokością elementów dzieci, gdy umieścimy w nich zbyt małą ilość tekstu.
Od tej pory elementy dzieci wyświetlają się obok siebie, ponieważ są interpretowane przez przeglądarkę internetową jako komórki tabeli HTML, czyli elementy td.
Ograniczeniem tego sposobu jest fakt, że wartość table-cell niekoniecznie musi być interpretowana poprawnie przez wszystkie przeglądarki internetowe, a w szczególności starsze wersje przeglądarki Internet Explorer (starsze niż wersja 8 wspomnianej przeglądarki Internet Explorer).
Innym ograniczeniem jest fakt, że niektóre właściwości CSS, w niektórych przeglądarkach internetowych, dodane do elementu HTML, który jest interpretowany jako komórka tabeli HTML, nie dają pożądanego efektu lub dają błędny efekt, dlatego w takiej sytuacji należy dodać dodatkowy element HTML, do omawianego elementu HTML, który jest interpretowany jako komórka tabeli HTML.
Kod dokumentu HTML, omawianego sposobu, został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#rodzic {
display:table;
width:90%;
background-color:black;
border:3px dashed red;
font-size:1.4em;
}
#dziecko1 {
width:70%;
background-color:lightblue;
}
#dziecko2 {
width:30%;
background-color:lightgreen;
}
#dziecko1, #dziecko2 {
display:table-cell;
}
</style>
</head>
<body>
<div id="rodzic">
<div id="dziecko1">
<div> <!-- Dodatkowy element, do którego możemy dodawać dowolne właściwości CSS, bez obawy o błędy -->
div - 1
</div>
</div>
<div id="dziecko2">
<div> <!-- Dodatkowy element, do którego możemy dodawać dowolne właściwości CSS, bez obawy o błędy -->
div - 2
</div>
</div>
</div>
</body>
</html>Sposób 5
Dodanie właściwości "position" wraz z wartością "absolute" do "dzieci" elementu "rodzica"
Kolejnym ze sposobów na wyświetlenie kilku elementów HTML obok siebie, jest sposób z wykorzystaniem właściwości position wraz z wartością absolute, którą to należy dodać do dzieci elementu HTML, który będzie posiadał w sobie właściwość position wraz z wartością relative lub wartością absolute lub wartością fixed.
Do odpowiedniego ułożenia elementów przyda nam się również właściwość left lub right, możemy również skorzystać z właściwości top lub bottom.
Ograniczeniem stosowania tego sposobu jest fakt, że element rodzic musi mieć ustaloną jakąś wartość wysokości, może ona być taka sama lub większa jaką mają mieć jego elementy dzieci, jednak czasami może to powodować inne problemy w układzie naszych elementów HTML (np. gdy dzieci danego elementu z naszego założenia mają mieć różną wartość wysokości).
Kod dokumentu HTML, omawianego sposobu, został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#rodzic {
position:relative;
height:80px;
background-color:black;
border:3px dashed red;
font-size:1.4em;
}
#dziecko1 {
position:absolute;
width:30%;
background-color:lightblue;
}
#dziecko2 {
position:absolute;
left:30%;
width:70%;
background-color:lightgreen;
}
</style>
</head>
<body>
<div id="rodzic">
<div id="dziecko1">div - 1</div>
<div id="dziecko2">div - 2</div>
</div>
</body>
</html>Przy odpowiednim wykorzystaniu właściwości, które zostały wymienione wcześniej, możemy również w nieco inny sposób wpływać na to jak mają wyświetlać się dane elementy HTML.
Właściwościom typu: position, top, right, bottom, left przyjrzymy się nieco bliżej wkrótce.
Podsumowanie
Osoba, która zaczyna dopiero przygodę z językiem HTML pewnie będzie starała się wyświetlić kilka elementów blokowych obok siebie poprzez umieszczenie ich w elemencie table, czyli po prostu w tabeli HTML. Jednak nie należy tego robić, ponieważ tabela z natury służy do przedstawiania w niej różnych wartości, danych, statystycznych informacji na jakiś temat itp. Natomiast umieszczenie elementu div w elemencie table jest traktowane przez przeglądarkę internetową jako błąd.
W następnej części kursu CSS poznamy zupełnie inny sposób na wyświetlenie kilku blokowych elementów HTML obok siebie. Poznamy elastyczny układ elementów HTML.