Bine ati venit pe forumul de suport al Forumgratuit

Pentru a beneficia de tot ceea ce va ofera forumul nostru, va rugam sa va conectati daca sunteti deja membru sau sa va alaturati comunitatii noastre



Creati un forum gratuit ca acesta.

Crearea unei casute de informatii pentru link-uri/bannere

 :: Despre Forumgratuit ::   :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

Crearea unei casute de informatii pentru link-uri/bannere

Mesaj Scris de darkspectre la data de Dum Iul 19, 2009 5:25 pm

Crearea unei căsuțe de informații pentru link-uri/bannere


Începeți prin a copia următorul cod în foaia de stil css
Panou de administrare => Afișare => Imagini și Culori => Culori => Foaie de stil css

Cod:
a.info {
position:relative;
background:none; z-index:10; }
a.info:hover { z-index:20; }
a.info span { display:none; }

a.info:hover span {
display:block;
position:absolute;
top:18px;
left:10px;
padding-left:25px;
padding-top:24px;
padding-bottom:5px;
padding-right:8px;
width:210px;
height:47px;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-style:italic;
font-size:10px;
color:#000000;
text-decoration:none;
text-align:justify; }

a.info:hover>span { background-image:url(http://i86.servimg.com/u/f86/11/96/49/61/info010.png); }
a.info:hover span { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://i86.servimg.com/u/f86/11/96/49/61/info010.png", sizingMethod="crop"); }


Pentru a afișa căsuța de informații pe forum(pentru un link):
Cod:
<a href="LINK" class="info">MASCĂ LINK
<span>DESCRIEREA DIN CĂSUȚA CU INFORMAȚII</span></a>


Pentru a afișa căsuța de informații pe forum(pentru un banner):
Cod:
<a href="LINK" class="info" >
<img src="IMAGINE" /><span>DESCRIEREA DIN CĂSUȚA CU INFORMAȚII</span></a>


Pentru a personaliza textul din interiorul căsuței de informații modificați la a.info:hover span următoarele:
font-family = fontul textului
font-style = stilul fontului (variante posibile:normal , italic , oblique , inherit)
font-size = mărimea textului
color = culoarea textului
text-decoration = decorația textului (variante posibile:none , underline , overline , line-through , blink , inherit)
text-align = alinierea textului (variante posibile: left , center , right)

Dacă doriți să vă faceți singuri o căsuță mai mare, trebuie să modificați la a.info:hover span următoarele:
width = lățimea (în pixeli) destinată spațiului pentru text din imagine
height = înălțimea (în pixeli) destinată spațiului pentru text din imagine


În cod se află un exemplu de astfel de imagine. Alte imagini pentru acest cod:

Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info110.png


Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info210.png


Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info310.png


Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info410.png


Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info510.png


Alte informații:
La aceste dimensiuni (210x47 pixeli) în căsuță nu încap decât 2 rânduri de text (dimensiunile din cod nu sunt dimeniunile imaginii, ci a spațiului din imagine destinat textului). Dacă vreți să înlocuiti căsuța de informații cu una mai mare, trebuie să modificați aceste dimensiuni în cod.
Nu puteți afișa aceste căsuțe dacă nu aveți activate codurile html:
Panoul de administrare => General => Forum => Mesaje și Emailuri => Mesaje => Permite HTML => Da.
Profil => Preferințe => Autorizează întotdeauna HTML => Da.
Dacă tot nu funcționează codul: Editare (sau când deschideți) mesajul respectiv => Opțiuni => Dezactivează codul HTML în acest mesaj => Deselectați.
Codul nu funcționează pentru utilizatorii browser-ului Opera.


Rezultat:



Echipa Forumgratuit ~ darkspectre


Ultima editare efectuata de catre darkspectre in Lun Iul 20, 2009 2:32 pm, editata de 3 ori

darkspectre
Membru Forumgratuit

Numarul mesajelor: 2517
Varsta: 102
Data de inscriere: 29/04/2008
Niciun warn

http://www.fg-coding.net

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

 :: Despre Forumgratuit ::   :: Tutoriale

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum