Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Legenda s-a intors XD
Scris de EDGE Sam 24 Sept - 20:42
» salut
Scris de Andrei34 Dum 18 Sept - 18:53
» Salut
Scris de Andrei34 Dum 18 Sept - 18:52
» Wireless ipb theme [punBB]
Scris de cristii571 Lun 12 Sept - 14:34
Cuvinte-cheie

navigare  avatar  meniu  html  punbb  Statistici  banner  cautare  menu  reclama  chenar  tutorial  drop  ultimele  profil  legenda  phpBB2  Bara  radio  animate  subforumuri  Mesaje  tema  edit  Metin2  subiecte  

Ultimate Tooltips


TUTORIAL:


Pasul 1). Inserati codul urmator in: CSS
Panou de administrare > Afisare > Imagini si culori < Culori > Foaie de stil CSS


Cod:
.tooltip {
         border-bottom: 1px dotted #000000; color: #000000; outline: none;
         cursor: help; text-decoration: none;
         position: relative;
      }
      .tooltip span {
         margin-left: -999em;
         position: absolute;
      }
      .tooltip:hover span {
         border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
         box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
         font-family: Calibri, Tahoma, Geneva, sans-serif;
         position: absolute; left: 1em; top: 2em; z-index: 99;
         margin-left: 0; width: 250px;
      }
      .tooltip:hover img {
         border: 0; margin: -10px 0 0 -55px;
         float: left; position: absolute;
      }
      .tooltip:hover em {
         font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
         display: block; padding: 0.2em 0 0.6em 0;
      }
      .classic { padding: 0.8em 1em; }
      .custom { padding: 0.5em 0.8em 0.8em 2em; }
      * html a:hover { background: transparent; }
      .classic {background: #FFFFAA; border: 1px solid #FFAD33; }
      .critical { background: #FFCCAA; border: 1px solid #FF3334;   }
      .help { background: #9FDAEE; border: 1px solid #2BB0D7;   }
      .info { background: #9FDAEE; border: 1px solid #2BB0D7;   }
      .warning { background: #FFFFAA; border: 1px solid #FFAD33; }



Pasul 2). Pentru a putea fi executat pe orice pagina vom folosi class="tooltip"


EXEMPLU:



Cod:
<a class="tooltip" href="#">Classic<span class="classic">Continut continut Continut continut Continut continut Continut continut Continut continut </span></a>, <a class="tooltip" href="#">Critical<span class="custom critical"><img src="http://i73.servimg.com/u/f73/12/63/64/97/critic10.png" alt="Error" height="48" width="48" /><em>Critical</em>Continut continut Continut continut Continut continut Continut continut Continut continut </span></a>, <a class="tooltip" href="#">Help<span class="custom help"><img src="http://i73.servimg.com/u/f73/12/63/64/97/help10.png" alt="Help" height="48" width="48" /><em>Help</em>Continut continut Continut continut Continut continut Continut continut Continut continut </span></a>, <a class="tooltip" href="#">Informatie<span class="custom info"><img src="http://i73.servimg.com/u/f73/12/63/64/97/info10.png" alt="Informatie" height="48" width="48" /><em>Informatie</em>Continut continut Continut continut Continut continut Continut continut Continut continut </span></a> si <a class="tooltip" href="#">Atentie<span class="custom warning"><img src="http://i73.servimg.com/u/f73/12/63/64/97/warnin10.png" alt="Atentie" height="48" width="48" /><em>Atentie</em>Continut continut Continut continut Continut continut Continut continut Continut continut </span></a></p>

DEMONSTRATIE:





INFORMATII:



> Daca acel cod nu va functiona va rugam sa verificati codul !
> Pentru price problema intampinata la codul noStru va rugam se ne atrageti atentia !

Comentariile utilizatorilor
Membru dedicat
la data de Vin 17 Feb - 16:30
Keir Membru dedicat
Conectat
Topic mutat în categoria corespunzătoare!
Membru premium
la data de Vin 17 Feb - 16:59
Delight Membru premium
Conectat
Foarte bun tutorial!