Vom incepe cu urmatorul exercitiu: sa incercam sa cream o pagina care sa arate ca mai jos
Putem identifica urmatoarele sectiuni:
- header
- left sidebar
- main section
- right sidebar
- footer
Vom incepe prin a defini in HTML aceste sectiuni:
<!doctype html>
<html>
<head>
<title>css layout 01</title>
</head>
<body>
<!-- header -->
<div>
..random text ...
</div>
<!-- left sidebar-->
<div>
... another random text ...
</div>
<!-- main -->
<div>
... yet another random text ...
</div>
</div>
<!-- right sidebar-->
<div>
... some other random text ...
</div>
</div>
<!-- footer -->
<div>
... finally the footer of the page ...
</div>
</div>
</body>
</html>
Am folosit elementul HTML generic <div> pentru fiecare dintre sectiuni.
Pagina noastra arata acum asa:
Pentru ca nu am specificat cum sa se pozitioneze sectiunile, ele au fost implicit asezate conform pozitionarii normale (normal flow). Pentru ca elementul HTML <div> este implicit unul de tip block, pozitionarea normala presupune asezarea lui pe un rand nou. Astfel ca sectiunile noastre sunt asezate una sub cealalta.
Asezarea implicita este data de CSS-ul browserului care contine regula position:static pentru toate elementele si display:block pentru elementele de tip <div>.
Urmatorul pas este sa adaugam sectiunilor un atribut distinctiv astfel incat sa le putem aplica reguli CSS diferite. Vom adauga fiecarui element <div> cate o clasa:
Urmatorul pas este sa adaugam sectiunilor un atribut distinctiv astfel incat sa le putem aplica reguli CSS diferite. Vom adauga fiecarui element <div> cate o clasa:
<!-- header -->
<div class="header">
<!-- left sidebar-->
<div class="left-sidebar">
<div class="header">
<!-- left sidebar-->
<div class="left-sidebar">
<!-- main -->
<div class="main">
<!-- right sidebar-->
<div class="right-sidebar">
<!-- footer -->
<div class="footer">
In continuare vom scrie fisierul CSS care va contine regulile aplicate claselor definite in HTML.
Pentru inceput vom seta o culoare de fundal pentru a distinge zonele ocupate de fiecare div:
.header{
background-color:rgb(102,153,102)
}
.left-sidebar{
background-color:rgb(153,254,153)
}
.main {
background-color:rgb(160,210,160)
}
.right-sidebar {
background-color:rgb(102,204,102)
}
.footer{
background-color:rgb(204,255,204);
}
Puteti vedea rezultatul aici.
Ceea ce vrem sa obtinem este un layout cu 3 coloane dintre care: cele laterale cu latime fixa iar cea centrala sa ocupe spatiul ramas. Pentru coloana centrala vom folosi functia calc() astfel width:calc(100% - 300px); unde 300 este latimea insumata a coloanelor laterale. Vom obtine aceasta pagina.
<div class="main">
<!-- right sidebar-->
<div class="right-sidebar">
<!-- footer -->
<div class="footer">
In continuare vom scrie fisierul CSS care va contine regulile aplicate claselor definite in HTML.
Pentru inceput vom seta o culoare de fundal pentru a distinge zonele ocupate de fiecare div:
.header{
background-color:rgb(102,153,102)
}
.left-sidebar{
background-color:rgb(153,254,153)
}
.main {
background-color:rgb(160,210,160)
}
.right-sidebar {
background-color:rgb(102,204,102)
}
.footer{
background-color:rgb(204,255,204);
}
Puteti vedea rezultatul aici.
Ceea ce vrem sa obtinem este un layout cu 3 coloane dintre care: cele laterale cu latime fixa iar cea centrala sa ocupe spatiul ramas. Pentru coloana centrala vom folosi functia calc() astfel width:calc(100% - 300px); unde 300 este latimea insumata a coloanelor laterale. Vom obtine aceasta pagina.
