Navigare rapidă

Ultimele subiecte
» 10 King
Scris de Erpel Vin 29 Mar - 16:31
» Bulletin ipb theme
Scris de MihaiExtremTutorials Sam 15 Dec - 0:24
» Wireless ipb theme [punBB]
Scris de D1esel Vin 30 Noi - 21:51
» Ying-Yang Tutorial
Scris de Lucifer Mar 24 Apr - 11:34
» Avatar forumotion toolbar
Scris de Lucifer Mar 24 Apr - 11:33
Cuvinte-cheie

edit  

Tabel parteneri sistem nou


Am creat un sitem placut de parteneriat cu 3 modele de hover: normal,activ,activ2
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

cod HTML

Cod:

<center><div class="parteneri">
<table align="center"  cellspacing="1">
<tr class="spatiu" cellspacing="1">
<tr class="spatiu" cellspacing="1">
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
</tr>
<tr class="spatiu" cellspacing="1">
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
</tr>
<tr class="spatiu" cellspacing="1">
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
</tr>

Cod CSS

Cod:

.partener{
margin-left: 5px;
_margin:20px 10px 15px 13px;
background: #f5f5f5;
border: 1px solid white;
box-shadow: 0px 0px 1px black;
height: 33px;
width: 88px!important;
text-align: center;

}

.parteneri{
padding: 1px;
background: white;

box-shadow: 0px 0px 1px black;
width: 933px;}

.partener:hover{
background: white;
border: 1px solid #f1f1f1;
box-shadow: 0px 0px 1px black;}


.text{
position: relative;
float: left;
font-size: 12px;
width: 88px;}

.text a:hover{
color: #0275B2;
}

.text a{
text-decoration: none;
text-shadow: 0px 1px 1px white;
color: #404040;}

.spatiu{
margin-top: 10px;}


.partener_activ{
background: #404040;
color: white!important;
border: 1px solid white;
box-shadow: 0px 0px 1px black;
height: 33px;
width: 88px!important;
text-align: center;}

.partener_activ a{
color: white;
text-shadow: none;}

.partener_activ a:hover{
color: white;
text-shadow: 0px 0px 10px #FFB700}


.partener_activ2{
background: #0275B2;
border: 1px solid white;
box-shadow: 0px 0px 1px black;
height: 33px;
width: 88px;
text-align: center}

.partener_activ2 a{
color: black;
text-decoration: none;
}

.partener_activ2 a:hover{
color: white;
text-shadow: 0px 0px 3px black;}



Acum ca avem codurile css si html pentru a putea aplica efectul de hover modificati in HTML la
Cod:

<td class="partener">

cu

Cod:

<td class="partener_activ">

sau
Cod:

<td class="partener_activ2">



Tutorial scris de [Trebuie sa fiti inscris si conectat pentru a vedea acest link]  

Copyright Extrem-Tutorials.com -  Nici o parte a acestui tutorial nu poate fi reprodusa fara acordul autorului.

Comentariile utilizatorilor
Membru activ
Madross
la data de Sam 12 Ian - 12:18
Madross Membru activ
Conectat
Imi place,bravo , felicitari.Varianta normala arata mai ok,dupa parerea mea. Tabel parteneri sistem nou 1820058972
Membru ET
.Nick
la data de Sam 12 Ian - 13:36
.Nick Membru ET
Conectat
Prima varianta arata foarte bine.Felicitari !
Vizitator
Anonymous
la data de Sam 12 Ian - 17:25
Vizitator Vizitator
Conectat
Froarte buna idee sabin
Membru dedicat
mr.franta
la data de Sam 12 Ian - 18:47
mr.franta Membru dedicat
Conectat
Multumesc Guest,catre ceilalti: acolo nu sunt 3 modele este un singur model
Cu putina imaginatie acest tabel poate fi absolut uimito cu fiecare partener in culoarea proprie ceea ce il face unic acest tabel
Membru ET
Rooney
la data de Vin 18 Ian - 15:37
Rooney Membru ET
Conectat
Toate 3 modele sunt frumoase.


Ultima editare efectuata de catre Rooney in Sam 19 Ian - 12:46, editata de 1 ori
Membru dedicat
mr.franta
la data de Vin 18 Ian - 17:33
mr.franta Membru dedicat
Conectat
defapt daca ai fi citit mai bine este un singur model.....cu 3 efecte de hover
Membru ET
RedGames
la data de Vin 25 Oct - 14:22
RedGames Membru ET
Conectat
Mersi
Membru nou
alasmar
la data de Mier 7 Ian - 2:34
alasmar Membru nou
Conectat

Mersi