AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


  • Poster un nouveau sujet
  • Répondre au sujet

Sésame, ouvre-toi !

Partagez
avatar
A-Lice
FémininAge : 24Messages : 4939

le Mar 17 Mar 2015 - 13:25


Sésame, ouvre-toi !


Suite à une demande de Blem voici une PA avec effets au passage de la souris.

Je précise que l'arrière plan gris clair correspond à mon forum.

HTML & CSS ~ Voici donc un aperçu : www & au passage de la souris ~ phpBB2


Et le code :
HTML :
Code:
<div class="PA_fond">
<div class="PA_guide"><div class="PA_titre">Guide</div><div class="infobulle1"><div class="PA_titre">Guide</div><p class="PA_txt1">-Règlement <br />
-Contexte<br />
-Autre...<br /></p></div></div>
<div class="PA_contexte"><div class="PA_titre">Contexte</div><div class="infobulle2"><div class="PA_titre">Contexte</div><p class="PA_txt1">Texte ici
</p></div></div>
<div class="PA_partenaire"><div class="PA_titre">Partoche</div><div class="infobulle3"><div class="PA_titre">Partoche</div><div class="PA_img"><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> </div></div></div>
<div class="PA_predefini"><div class="PA_titre">Predef</div><div class="infobulle4"><div class="PA_titre">Predef</div><div class="PA_img"><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> </div></div></div>
<div class="PA_annonce"><div class="PA_titre">Annonce</div><div class="infobulle5"><div class="PA_titre">Annonce</div><p class="PA_txt3">-Machin a gagné le LPA X<br />
-Truc a participé à chose W<br /></p><a href="http://www.never-utopia.com" class="PA_credit">A-Lice | Never-Utopia</a></div></div>
<div class="PA_new"><div class="PA_titre">News</div><div class="infobulle6"><div class="PA_titre">News</div><p class="PA_txt2">00/00/00 : Blablabla<br />
00/00/00 : Blablabla<br /></p></div></div>
<div class="PA_staff"><div class="PA_titre">Staff</div><div class="infobulle7"><div class="PA_titre">Staff</div><div class="PA_img"><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <br /><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> </div></div></div>
</div>


CSS :
Code:
.PA_fond {
position: relative;
width: 685px;
height: 350px;
margin: auto;
background: white;
font-size: 14px;
}

.PA_guide {
position: absolute;
width: 159px;
height: 259px;
padding: 3px;
background: silver;
left: 5px;
text-align: justify;
}

.PA_guide .infobulle1 {
position: absolute;
top: 0px;
left: 0px;
width: 159px;
height: 259px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
padding: 3px;
text-align: justify;
}

.PA_guide:hover .infobulle1 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}

.PA_contexte {
position: absolute;
width: 159px;
height: 259px;
padding: 3px;
background: silver;
left: 175px;
text-align: justify;
}

.PA_contexte .infobulle2 {
position: absolute;
top: 0px;
left: 0px;
width: 159px;
height: 259px;
padding: 3px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
text-align: justify;
}

.PA_contexte:hover .infobulle2 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}

.PA_partenaire {
position: absolute;
width: 329px;
height: 74px;
padding: 3px;
background: silver;
left: 345px;
text-align: justify;
}

.PA_partenaire .infobulle3 {
position: absolute;
top: 0px;
left: 0px;
width: 329px;
height: 74px;
padding: 3px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
text-align: justify;
}

.PA_partenaire:hover .infobulle3 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}

.PA_predefini {
position: absolute;
width: 329px;
height: 74px;
padding: 3px;
background: silver;
top: 270px;
left: 5px;
text-align: justify;
}

.PA_predefini .infobulle4 {
position: absolute;
top: 0px;
left: 0px;
width: 329px;
height: 74px;
padding: 3px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
text-align: justify;
}

.PA_predefini:hover .infobulle4 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}

.PA_annonce {
position: absolute;
width: 159px;
height: 259px;
padding: 3px;
background: silver;
left: 345px;
top: 85px;
text-align: justify;
}

.PA_annonce .infobulle5 {
position: absolute;
top: 0px;
left: 0px;
width: 159px;
height: 259px;
padding: 3px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
text-align: justify;
}

.PA_annonce:hover .infobulle5 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}

.PA_new {
position: absolute;
width: 159px;
height: 124px;
padding: 3px;
background: silver;
left: 515px;
top: 85px;
text-align: justify;
}

.PA_new .infobulle6 {
position: absolute;
top: 0px;
left: 0px;
width: 159px;
height: 124px;
padding: 3px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
text-align: justify;
}

.PA_new:hover .infobulle6 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}

.PA_staff {
position: absolute;
width: 159px;
height: 124px;
padding: 3px;
background: silver;
left: 515px;
top: 220px;
text-align: justify;
}

.PA_staff .infobulle7 {
position: absolute;
top: 0px;
left: 0px;
width: 159px;
height: 124px;
padding: 3px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
text-align: justify;
}

.PA_staff:hover .infobulle7 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}

.PA_titre {
text-indent: 20px;
font-size: 25px;
position: relative;
z-index: 20;
}

.PA_img {
margin-top: -5px;
position: relative;
z-index: 10;
}

.PA_txt1 {
overflow: auto;
height: 209px;
}

.PA_txt2 {
overflow: auto;
height: 74px;
}

.PA_txt3 {
overflow: auto;
height: 190px;
}

a.PA_credit {
text-decoration: none;
font-size: 12px;
color: white;
display: block;
text-align: center;
}


Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Vos commentaires et remerciements sont toujours bienvenus ^^
Si vous avez des problèmes avec ce LS, venez poster ici.

avatar
Madras
FémininAge : 33Messages : 279

le Ven 3 Avr 2015 - 8:09

Merci
avatar
Dark Fairy
FémininAge : 20Messages : 226

le Sam 4 Avr 2015 - 11:50

Merci!
avatar
Chocolakato
FémininAge : 28Messages : 795

le Jeu 21 Mai 2015 - 21:52

Ouiii! Merciii !



avatar
Haniwa
FémininAge : 23Messages : 206

le Ven 5 Juin 2015 - 1:04

Merci
avatar
Dydy
FémininAge : 27Messages : 490

le Ven 12 Juin 2015 - 12:51

merci du partage! ^^



avatar
allcl
FémininAge : 18Messages : 76

le Mer 1 Juil 2015 - 11:26

Merci
avatar
Lily Andrew
FémininAge : 14Messages : 17

le Mer 9 Sep 2015 - 16:00

Merkii :3
avatar
Kelalin
FémininAge : 25Messages : 1941

le Jeu 10 Sep 2015 - 19:01

Merci ! [○・`Д´・○]
avatar
Heah92
FémininAge : 20Messages : 87

le Ven 25 Sep 2015 - 20:39

MERCI
avatar
Moro-PM
FémininAge : 15Messages : 149

le Sam 26 Sep 2015 - 15:47

Merci !
avatar
Apolarione
MasculinAge : 19Messages : 5

le Sam 13 Fév 2016 - 18:52

merci
avatar
Rudcash
MasculinAge : 17Messages : 17

le Mar 26 Avr 2016 - 16:34

Merci
avatar
Dacina moe
FémininAge : 40Messages : 171

le Ven 17 Juin 2016 - 20:36

merci elle est tres simple et bien :)
avatar
Reckoner
FémininAge : 24Messages : 36

le Lun 18 Juil 2016 - 22:48

Wow, cette PA vient de me donner une inspiration du tonnerre de Zeus!
Merci beaucoup A-Lice !
avatar
Océ
FémininAge : 43Messages : 281

le Ven 29 Juil 2016 - 11:56

Très jolie et merci



Bonjours voici les pv's que nous cherchons : [url=http://www.never-utopia.com/t63181-les-postes-vacants-pour-les-chronuque-de-aya#960582 L’annonce est ici[/url]
avatar
Furagu
MasculinAge : 27Messages : 19

le Dim 31 Juil 2016 - 23:19

Mercii
avatar
Demowee
MasculinAge : 22Messages : 43

le Mar 30 Aoû 2016 - 20:20

Merci o/
avatar
Wiss
FémininAge : 13Messages : 53

le Mer 31 Aoû 2016 - 14:12

Merci !




Autre signa:
avatar
Marion Navi
FémininAge : 24Messages : 182

le Sam 3 Sep 2016 - 11:56

merci
avatar
Lughnassadh
FémininAge : 27Messages : 22

le Mar 6 Sep 2016 - 22:02

Merci !
avatar
Bryan1997
MasculinAge : 21Messages : 51

le Ven 4 Nov 2016 - 2:02

Merci
avatar
Nekrofyre
MasculinAge : 18Messages : 33

le Mar 8 Nov 2016 - 23:16

merci
avatar
Solitude
FémininAge : 43Messages : 285

le Dim 13 Nov 2016 - 10:30

Merci



~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
avatar
Tink ♥
FémininAge : 26Messages : 66

le Lun 14 Nov 2016 - 23:01

Elle st cool ^^
Contenu sponsorisé

  • Poster un nouveau sujet
  • Répondre au sujet

La date/heure actuelle est Lun 23 Juil 2018 - 9:54