| CrIstY |
| Moderator |
 |
 |
| Data inscrierii: 06/Iul/2007 |
| Mesaje: 7 |
|
|
|
|
|
 |
|
Intr-unul din produsele precedente am luat un form si l-am indesat intr-o lista. Spre surprinderea unora (si a mea, la un ocazie dat), tehnica este foarte usor de insusit si pe cat este de simpla, pe atat este de eficienta. Putem trage insa si alte foloase de pe urma listelor HTML. In acest tutorial vom construi un header.
Scris pentru: web developeri incepatori sau medii; cei care vor sa faca trecerea de la tabele la CSS;
Cunostinte presupuse: fundamente HTML si CSS
Iata headerul spre care tintim:
Vom folosi doua imagini pentru header, una cu logoul si alta cu pozele. Apoi va urma meniul si in cele din urma un div colorat in portocaliu.
Vom lucra pe urmatorul markup:
<div>
<img>
<img>
<ul>
<li>acasa</li><li>harta site</li><li>ce este feng shui</li><li>avantajele dvs.</li><li>consultatii</li><li>feng shui practic</li><li>recreati-va</li>
</ul>
<div><img></div>
</div>
Pentru inceput, ar necesită sa ne asiguram ca orice continut din header nu va depasi latimea imaginii ce contine sigla. Vom vrea ca si meniul sa fie aliniat cu imaginile, nu? Pentru acest lucru am inclus tot headerul intr-un div. Vom proceda in felul urmator:
#header{
width:780px;
}
Exista si alte avantaje oferite de divul nostru numit “header”. Unul ar fi acela ca ne structureaza documentul intr-un mod logic: el contine tot ce se afla in header, continut care este foarte probabil sa fie afisat in fiecare pagina a siteului. Nu uitati: organizam mai usor, gasim mai usor.
Nu vom conține nici meniul, nici imaginile in div-uri, caci nu vrem markup in plus. Elementele img si ul pot fi setate sa se afiseze ca un block si vor sta asfel cuminti acolo unde le vom pune. Adica unde le-am pus deja. Singura regula CSS de care avem trebuință este:
#header img{
display:block;
}
Et voila. Am putea adauga si border:0, pentru a le lipsi de absolut orice border, care ar putea aparea daca, spre exemplu, am pune un link spre home pe imaginea care contine sigla.
Si acum putem trece la partea mai interesanta. Incepem cu mica fotografie portocalie, careia ii vom oferi pentru styling clasa “left”. Mult mai simplu decat a utiliza tabele, imaginea se va aseza ispasita in coltul din stanga, datorita unei singure linii constrangatoare de CSS:
img.left{
float:left;
}
Langa ea vom aseza lista de bucate. Dupa cum observati, meniul este 100% text, deci butoanele nu vor fi imagini. Singurele imagini folosite vor fi un gif de 1px latime pentru fundalul butoanelor si 2 gifuri pentru benzile portocalii. Puteti descarca imaginile inca de pe acum. Trebuie sa recunoastem ca am putea renunta usor la portocaliu, dar astazi as vrea sa fiu putin “strident”.
O mica observatie: scriem </li><li> , trecand prima > pe linie noua pentru ca sa scapam de un mic bug in browserele Mozilla si Opera (poate si altele) care lasa un spatiu aparent nejustificat intre fiecare item din lista. CSS-ul pentru meniu consta in doua declaratii. Prima se leaga de lista cea mare:M
#meniu{
list-style:none;
margin:9px 0 0 0;
padding:0;
}
Tot ce facem este: 1. taiem bullets-urile, 2. Taiem orice margini, lasand 9px spatiu intre lista si imaginea de deasupra ei si 3. indiferent ce padding.M
A doua declaratie CSS va stila fiecare item al listei in parte:
#meniu li{
margin:0 1px 0 0;
padding:6px 11px 9px 11px;
border:1px solid #CBCBCB;
border-left:none;
text-transform:uppercase;
color:#8115BA;
font-size:0.7em;
font-weight:bold;
font-family:"times new roman", times, serif;
background:url(images/bg_meniu.gif);
display:inline;
}
Linia care conteaza este de fapt ultima, care aseaza lista pe orizontala. Stergem aceasta ultima linie, si meniul nostru va fi afisat pe verticala. Tot ce va trebui sa facem este sa ne hotaram unde l-am vrea plasat si sa adaugam o linie in declaratia #meniu pentru acest lucru: fie float: left, fie float:right.
#meniu{
list-style:none;
margin:9px 0 0 0;
padding:0;
float:left;
}
Latimea va fi calculata automat de catre browser, iar contentul se poate plasa cu usurinta langa ul: </ul><div>continut</div> . Dar despre layout intr-un alt articol.
Ne mai ramane micul div portocaliu. Daca aruncati o privire peste markup, veti vedea ca va trebui sa construim doua clase: una pentru div, #portocaliu, si alta pentru mica poză a coltului alb, care trebuie plasata in dreapta divului.
#portocaliu{
clear:both;
width:555px;
background-color:#D77E38;
margin-bottom:25px;
}
img.right{
margin-left:540px;
}
Divul portocaliu se va intinte pe 555px, pentru ca asa am vrut noi. Linia clear:both este pentru ca divul sa treaca sub imaginea cu clasa “left”(float:left). Este o masura aproape nenecesara, dar care ne asigura ca divul va incepe acolo unde trebuie. Imaginea din el, cea cu class=”right”, ii va asigura automat latimea, desi nu ar fi rau sa o precizam si pe aceasta in declaratia #portocaliu.
img.right are o margine de 540px, pe care am calculat-o astfel: 555px(#portocaliu.height)-latimea imaginii propriu-zise. Remarca cineva vreo greseala? Aceasta clasa pare a nu putea fi folosita decat intr-un singur loc. Am fi putut-o scrie mai bine ca #coltulPortocaliu, atribuind-o in HTML ca id:
<img>
Acestea fiind scrise, avem un header de nu mai mult de 50k, din care 90% sunt imagini care vor sta in cache pentru mult timp(banuind ca nimeni nu isi schimba headerul in fiecare zi). Am vazut cum putem face si un meniu vertical, fara prea mult efort. Si daca tot e codul nostru asa mic, ma gandesc ca am mai putea include o clasa.
Fiecare meniu are un hover effect, asa ca si al nostru trebuie sa aiba. Nimic mai simplu:
#meniu li:hover{
color:#ff0000;
background:url(images/bg_titlu1.gif);
}
Prin doar doua linii de CSS in cadrul declaratiei :hover, putem schimba culoarea textului si imaginea de fundal. Din considerente de lene, nu am mai inclus si imaginea de hover :p Aici trebuie sa intervina creativitatea voastra.
Articolul de fata depaseste putin problema navigatiei întrebuințând elemente li si abordeaza si plasarea unui list in cadrul unui header mai complex.
O multime de designuri pot fi privite in acest fel:
* inceteaza sa te uiti la butoane ca la imagini, ci priveste-le ca text intr-un li
* nu te mai gandi la elementele exterioare meniului ca la tabele, ci ca la simple imagini cu float sau display:block/inline
* foloseste clear:both/left/right cand doresti ca respectivul container sa treaca mai jos de floaturi si nu in rand cu ele
Si mai este un aspect: astfel de meniuri pot fi usor generate printr-un limbaj de scripting server-side, cum ar fi PHP. Nu tu tabele, nu tu chin.
Made by Vlad Fratil |
|
[/URL]
