devlectures: 2013

In postarea anterioara paginii noastre inca ii lipseste o parte esentiala: pozitionarea coloanelor pe orizontala una fata de celalalta. Pentru ca nu am specificat acest lucru, pozitionarea pe care o observam este una pe verticala. A venit momentul sa schimbam aceasta pozitionare.

Pentru ca deocamdata specificatia de CSS nu prevede explicit instructiuni pentru un layout de tip coloane vom apela la proprietatea css float. Desi nu a fost introdusa pentru construirea de coloane, ea este adesea folosita in acest scop.

Numele proprietatii vine de la faptul ca o imagine pare ca pluteste deasupra unui text. De fapt imaginea se afla intr-un colt iar textul se desfasoara in dreapta si sub aceasta (daca utilizam float:left)

Pentru a realiza layoutul pe care ni l-am propus vom seta aceasta proprietate pe cele 3 sectiuni care trebuie sa se afiseze pe coloane:

.left-sidebar{
float:left;
}

.main {
float:left;
}

.right-sidebar {
float:left;
}

Pentru sectiunea footer va trebui sa specificam ca vrem sa revenim la pozitionarea implicita astfel:

.footer{
clear:both;
}

Pagina rezultata in urma acestor modificari o putem vedea aici: multi column layout

Pozitionarea elementelor utilizand CSS

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>

<div>

..random text ...

</div>

<div>

... another random text ...

</div>

<div>

... yet another random text ...
</div>

<div>

... some other random text ...
</div>

<div>

... finally the footer of the page ...
</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:

<div class="header">

<div class="left-sidebar">

<div class="main">

<div class="right-sidebar">

<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.

devlectures

duminică, 1 decembrie 2013

CSS layout part 2

sâmbătă, 21 septembrie 2013

CSS layout - Intro