DJ DinTe RoSu
Mixuri DJ DinTe RoSu, Software, XXX Movies, Music!
|
Lista Forumurilor Pe Tematici
|
DJ DinTe RoSu | Reguli | Inregistrare | Login
POZE DJ DINTE ROSU
Nu sunteti logat.
|
Nou pe simpatie:
OnutzaGirl 24 ani
 | Femeie
24 ani
Galati
cauta Barbat
24 - 51 ani |
|
Mrrrr
Moderator
 Din: boschetzi
Inregistrat: acum 18 ani
Postari: 1368
|
|
Dupa cum am promis, revin cu un articol despre layouturi fixe. Multi se hotarasc foarte repede ca nu au nevoie de tot spatiul oferit de browser, si aleg un layout asemanator celor din print. Astfel de layouturi nu depasesc latimea de 780 de pixeli, dintr-o veche obisnuinta: ca site-ul sa incapa pe o rezolutie de 800x600.
Vom proceda si noi intocmai. Doar nu vrem sa incalcam o lege veche. Din cei 780, vom folosi 200 pentru coloana de navigatie, iar restul ii vom lasa contentului, Vom avea de asemenea un header si un footer. Vom vrea ca layoutul sa fie centrat in pagina, iar cele doua coloane sa aiba aceeasi lungime (asa cum am facut si data trecuta). Pentru a realiza aceste doua lucruri, dar si pentru ca site-ul sa nu depaseasca latimea dorita, vom folosi un container pentru intreg siteul, si altul pentru cele doua coloane de content.
Sa incepem cu HTML-ul.
<div>
<div>
<h1>lifeframe</h1>
</div>
<div>
<div>
<ul>
<li>Meniu 1</li>
<li>Meniu 2</li>
</ul>
</div>
<div>
<h2>Welcome to lifeframe</h2>
<p>You have reached the development website of lifeframe</p>
</div>
</div>
<div>
© 2006 Vlad Fratila
</div>
</div>
Intotdeauna partea interesanta este insa CSSul. Vom lasa elementele de stil la o parte: le veti putea gasi in exemplul complet; ne vom concentra doar asupra regulilor de pozitionare.
Pentru a muta intreg siteul la mijloc, tot ce trebuie sa facem este sa-i atribuim margin:auto containerului:
#container{
width:780px;
margin:auto;
}
Bineinteles ca pe IE nu functioneaza, nici chiar pe mult laudata versiune 7. IE interpreteaza gresit margin:auto. Spre norocul nostru, nu intelege prea bine nici text-align. Gasind o alta regula, text-align:center, IE va muta absolut tot pe centru, fie el text sau div, ceea ce este gresit (atributul este TEXT-align). Pentru a corecta totusi aliniamentul textelor, vom stabili text-align:left in container.
body{
text-align:center;
}
#container{
width:780px;
margin:auto;
text-align:left;
}
Acum am terminat partea cea mai grea. Restul e simplu, daca vom folosi float. Ceea ce va si propun.
Headerul si footerul sunt simplu de realizat, asa ca trecem direct la cele doua coloane. Prima va avea float:left pentru a se aseza cuminte in stanga, si ii vom defini si width-ul propus la inceput. Cea de-a doua coloana ii va face loc primeia, avand un margin-left egal cu latimea primei coloane, adica 150px.
#col1{
float:left;
width:150px;
}
#col2{
margin-left:150px;
}
Layoutul functioneaza si fara acest margin-left, insa vor fi necesare valori mai mari pentru eventuale padding-uri, deoarece, fara margin, prima coloana are tendinta sa intre putin peste paddingul celei de a doua. Acest fapt se datoreaza comportamentului atributului float, care pozitioneaza divul relativ nu la celalalt div, ci la continutul lui (in termeni de box model, ceea ce este cuprins in interiorul padding-ului).
In cele din urma, as vrea sa egalizam coloanele, asa cum am facut si in celalalt articol. Atentie insa ca acest feature nu va functiona pe Opera. Beta-ul de Opera9 rezolva insa problema. Daca doriti sa incercati sa reparati Opera, acest articol va explica cum.
#col1,#col2{
margin-bottom:-20000px;
padding-bottom:20020px;
}
Puteti vedea si exemplul meu, care este putin mai colorat si mai spatios.
Autor Vlad Fratila
_______________________________________
Multe Instrumentale - 1000++
|
|
| pus acum 17 ani |
|