Meniuri 1

Administrator Data inscrierii: 07/Dec/2013 Mesaje: 1103

Citat:

Fisa 1
Cascading Style Sheet

#menu a, #menu a:visited

{
text-align:center;
text-decoration:none;
color:#000;
display:block;
width:7em;
height:1.2em;
border:0.5em solid #fff;
}

#menu a:hover

{
color:#fff;
background-color:#b2ab9b;
border-color:#dfd7ca #b2ab9b;
}

xhtml

<div id="menu">
<a href="#nogo">Item 1</a>
<a href="#nogo">Item 2</a>
<a href="#nogo">Item 3</a>
<a href="#nogo">Item 4</a>
<a href="#nogo">Item 5</a>
</div>

Pentru toate linkurile care se afla in interiorul elementelor cu id-ul ”menu”
E vorba de modul de vizualizare a link-urilor inainte de click si dupa click (a:visited)
Textul e pe centru
Nu este subliniat
Culoare neagra
Afisare tip block (vor fi unele sub altele)
Latime 7 em
Inaltime 1.2 em
Bordura desi definita este alba deci nu se vede
Pentru cazul in care mouse-ul este deasupra link-ului
Culoarea este alba
Background-ul este gri
Bordura de sus este gri deschis #dfd7ca iar cea din lateral gri mai inchis #b2ab9b

Meniuri 1 Meniuri 1

Menu two
CASCADING STYLE SHEET

#menu a, #menu a:visited

{
position:relative;
text-decoration:none;
text-align:center;
background-color:#9ab;
color:#fff;
display:block;
width:10em;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
padding:0.25em;
margin:0.5em auto;
}

#menu a:hover

{
top:2px;
left:2px;
color:#fff;
border-color:#345 #cde #def #678;
}

XHTML

<div>
<a href="#nogo">Item 1</a>
<a href="#nogo">Item 2</a>
<a href="#nogo">Item 3</a>
<a href="#nogo">Item 4</a>
<a href="#nogo">Item 5</a>
</div>

Position relative - a:hover va fi situat in functie de a si atunci se specifica position relative (a:hover va fi relativ la a)
Nu este subliniat
Textul e pe centru
Culoarea fundalului #9ab
Culoare text neagra
Afisare tip block (vor fi unele sub altele)
Latime 10 em
Bordure 2pixeli neagra
Redefineste culoarea bordurii: sus #def dreapta #678 jos #345 stanga #cde
Spatiul lasat pana la bordura 0.25 em
Spatiul de la bordura in exterior 0.5 em (distanta dintre barele meniului fiind deci 0.5 em)
Pentru cazul in care mouse-ul este deasupra link-ului
2 pixeli mai jos si mai la stanga creaza un rod de buton
Culoare text neagra
Bordura se inverseaza pentru a crea impresia de apasare

Meniuri 1 Meniuri 1