Site in constructie!
Va rugam reveniti!



Sliding doors

Atunci cand trebuie sa cream in pagina web mai multe butoane, cu acelasi fundal dar cu latime variabila, pentru a nu crea cate o imagine pentru fiecare buton, putem folosi metoda Sliding doors, utilizand doar CSS si doar doua imagini care compun butoanele necesare.

Pentru aceasta vom folosi doua imagini care vor defini butonul: una pentru partea stanga si una pentru partea dreapta

button_left button_right

Imaginea din partea dreapta va fi pozitionata deasupra celei din stanga (din acest motiv metoda se numeste sliding doors). Cu cat imagine din dreapta va fi pozitionata mai spre stanga, cu atat butonul va parea a fi mai mic si invers.

sliding_doors

Crearea butonului

Codul HTML care simuleaza butonul este: 

<a class="button" href="#"><span>Submit</span></a>
- avand elementul <span> in interiorul elementului <a>. Elementul <span> contine imaginea din stanga, cea mare si textul. Latimea butonului va fi data de latimea textului.

Codul CSS este: 

a.button {
/* pozitionarea imaginii din dreapta */
background: transparent url('button_right.png') no-repeat scroll top right;
display: block;
float: left;
height: 32px; /* schimbati valoare in functie de inaltimea imaginii */
margin-right: 6px;
padding-right: 20px; /* in functie de latimea imaginii din dreapta */
/* Proprietati text */
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.button span {
/* Fundal imagine stanga */
background: transparent url('button_left.png') no-repeat;
display: block;
line-height: 22px; /* in functie de inaltimea butonului */
padding: 7px 0 5px 18px;
}
a.button:hover span{
text-decoration:underline;
}
- clasa .button va fi aplicata elementului <a>.
- clasa .button span va fi aplicata elementului <span> din elementul <a>.
- clasa .button:hover span care o sa schimbe stilul textului din elementul <span>.