Foi de Stil Web
Indrumari si Trucuri CSS

Un meniu confeti

Mebiul colorat pe care il vedeti mai jos este simplu un element DIV cu cateva elemente P in interior. Efectul vizual este datorat faptului ca fiecare element P este pozitionat individual si are propriul font si culoare. El functioneaza cel mai bine cu texte scurte, pentru ca efectul vizual se bazeaza pe suprapunere, dar daca textul este prea lung se suprapune prea mult astfel ca devine greu de citit.

Foaia de stil permite un meniu cu pana la 10 elemente, exemplul de mai sus utilizeaza 8. Iata sursa HTML a exemplului de mai sus:

<div class="map">
<p id="p1"><a href="../../CSS/#news">Ce este nou?</a>
<p id="p2"><a href="../../CSS/#learn">Invatand CSS</a>
<p id="p3"><a href="../../CSS/#browsers">Browsere CSS</a>
<p id="p4"><a href="../../CSS/#editors">Unelte autor</a>
<p id="p10"><a href="../../CSS/#specs">Specs</a>
<p id="p6"><a href="../../CSS/Test">Suita Test CSS1</a>
<p id="p9"><a href="/StyleSheets/Core">Stiluri Core W3C</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">Validator CSS</a>
</div>

De notat clasa "map" pe elementul DIV, care il transforma intr-un container pentru meniu, si atributele ID pentru P-uri. Elementele P trebuie sa aiba fiecare un ID (diferit) numite p1, p2,... sau p10. Nu este necesar sa se utilizeze ID-urile in ordine (dupa cum arata exemplul). Puteti utiliza foaia de stil prin copierea ei in propria dumneavoastra foaie de stil, sau prin utilizarea @import sau a unui element LINK pentru importul map.css direct de pe site-ul W3C: fie

@import "http://www.w3.org/Style/map.css";

fie

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

Explicarea foii de stil

Iata cum functioneaza foaia de stil. Foaia de stil incepe prin definirea elementului DIV cu clasa "map". Ea creaza un spatiu inalt de 190 pixeli in care sunt plasate continuturile elementelor P. Fiecaruia dintre elementele cu ID-urile IDs p1 pana la p10 i se dau o culoare si u font, si fiecare element este pozitionat in interiorul spatiului creat de catre DIV prin intermediul proprietatii 'margin': o margine de sus negativa muta elementul in sus in spatiul DIV si o margine de jos pozitiva asigura ca urmatorul element incepe din nou din josul lui DIV.

(Slabiciunea foii de stil este ca face totul in pixeli. Ati putea dori sa o schimbati sa utilizeze procentaje in loc, daca aveti un browser care implementeaza CSS suficient de bine.)

DIV.map {                        /* Rezerva niste spatiu pentru linkuri */
  padding-top: 190px;
  margin-left: -2em;             /* Adaptati aceasta la propria dumneavoastra pagina... */
  margin-right: -2em;            /* Adaptati aceasta la propria dumneavoastra pagina... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

Desigur, sunteti liberi sa schimbati foaia de stil pentru a incerca fonturi, culori si pozitii diferite, sau pentru a crea reguli de stil extra pentru mai mult de 10 elemente. Deasemenea aruncati o privire la marginile din stanga si dreapta ale lui DIV: ele sunt facute negative, astfel ca meniul este mai larg decat textul inconjurator, dar in pagina dumneavoastra marginea ar putea sa nu fie suficient de larga pentru asta si astfel ar putea sa fie nevoie sa se elimine aceste reguli.

Daca incercati stilul, ati putea sa constatati ca nu funcrioneaza prea bine in Netscape 4. Aceasta este problema Netscape 4, desigur. In orice caz, map-ns.css este o foaie de stil care este similara si care pare ca functioneaza OK in acel browser. Urmatorul truc in capul documentului dumneavoastra HTML va permite versiunii Netscape 4 si versiunilor ulterioare pentru o mai buna implementare CSS sa coexiste:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Implementarile CSS corecte vor citi ambele foi de stil, dar regulile din cea de-a doua suprascriu pe cele din prima, asa ca in afara de putin lucru nenecesar, nu e nici o schimbare. Netscape 4, totusi, nu va incarca a doua foaie de stil fatorita atributului "media" pe care nu-l intelege.

Deasemenea, va puteti intreba de ce elementele sunt pozitionate prin intermediul marginilor (negative), in timp ce aceasta pare sa fie un prim candidat pentru proprietatile de pozitionare absoluta. Intr-adevar, puteti obtine acelasi lucru cu 'position' si 'left' & 'right'.Motivul pentru care aceasta foaie de stil utilizeaza margini in loc este ca in acest fel functioneaza in browsere care implementeaza numai CSS1.