[codage] problème de rotation sur image

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu [codage] problème de rotation sur image

Message par Miss CC le Lun 16 Sep 2013 - 20:48

Bonjour voilà sur notre fivhe de ub nous avons un soucis au niveau des petites icon staff. En effet logiquement il devrait y avoir une infobulle qui s'ouvre par rotation au passage sur les icon . Tout est codé sur une page HTML qui est "héberger" sur le forum via les pages html dans les modules.

Jusque là tout va bien, quand on prévisualise la page tout fonctionne bien.

Là ou ça ne fonctionne plus c'est que pour partager la fiche pub on met donc le code dans un iframe et là du coup l'animation infobulle fonctionne plus du tout :/

voilà la fiche dans l'ifram:
<center><iframe src="http://graph-addict.forumactif.pro/h2-fiche-pub" style="width: 600px; height: 1000px; frameborder="no"; scrolling="no";frameborder=0></iframe></center>

et voici l'adresse de la fiche sans l'iframe et qui , donc fonctionne:

http://graph-addict.forumactif.pro/h2-fiche-pub

Merci d'avance pour votre aide!


Dernière édition par Miss CC le Mar 24 Sep 2013 - 18:57, édité 1 fois

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Scoubifitz le Lun 16 Sep 2013 - 23:59

@Miss CC a écrit:Bonjour voilà sur notre fivhe de ub nous avons un soucis au niveau des petites icon staff. En effet logiquement il devrait y avoir une infobulle qui s'ouvre par rotation au passage sur les icon . Tout est codé sur une page HTML qui est "héberger" sur le forum via les pages html dans les modules.

Jusque là tout va bien, quand on prévisualise la page tout fonctionne bien.

Là ou ça ne fonctionne plus c'est que pour partager la fiche pub on met donc le code dans un iframe et là du coup l'animation infobulle fonctionne plus du tout :/

voilà la fiche dans l'ifram:
<center><iframe src="http://graph-addict.forumactif.pro/h2-fiche-pub" style="width: 600px; height: 1000px; frameborder="no"; scrolling="no";frameborder=0></iframe></center>

et voici l'adresse de la fiche sans l'iframe et qui , donc fonctionne:

http://graph-addict.forumactif.pro/h2-fiche-pub

Merci d'avance pour votre aide!


bonsoir ,

en corrigeant un peu le code iframe :

Code:
<center><iframe src="http://graph-addict.forumactif.pro/h2-fiche-pub" style="width: 710px; height: 1000px;" frameborder="no" scrolling="no"></iframe></center>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Miss CC le Mar 17 Sep 2013 - 8:59

Bonsoir,

merci pour votre réponse mais l'animation des boutons staff ne fonctionne toujours Sad

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Scoubifitz le Mar 17 Sep 2013 - 10:58

@Miss CC a écrit:Là ou ça ne fonctionne plus c'est que pour partager la fiche pub on met donc le code dans un iframe et là du coup l'animation infobulle fonctionne plus du tout :/

Merci d'avance pour votre aide!
L'iframe fonctionne très bien , même dans un message de topic ...

Vous placez l'iframe où ?

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Miss CC le Mar 17 Sep 2013 - 16:10

coucou l'iframe fonctionner très bien auparavant malgrés la ptite erreur ^^

@Miss CC a écrit:Là ou ça ne fonctionne plus c'est que pour partager la fiche pub on met donc le code dans un iframe et là du coup l'animation infobulle fonctionne plus du tout
c'est l'animation sur les info bulle qui ne fonctionne pas quand je veux partager la page via l'iframe Smile

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Scoubifitz le Mar 17 Sep 2013 - 21:26

Si je comprends bien :
- La page HTML fonctionne correctement .
- L'iframe fonctionne correctement .
- L'endroit où vous placez l'iframe fait que l'animation des infobulles ne fonctionne pas .

Je repose donc la question :
@Scoubifitz a écrit:Vous placez l'iframe où ?

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Miss CC le Mar 17 Sep 2013 - 22:09

Bonsoir je vais tenter d'être claire parce que j'ai du mal à m'exprimer :p

Iic l'iframe ne fonctionne pas si je le poste dans le sujet mais ça doit etre fait expret.

L'animation infobulle fonctionne correctement sur la page html pas de soucis.

Pour partager cette page (donc la fiche de pub) sur les autres forum et faire des partenariat il faut bien que je place l'adresse de la page html dans l'iframe si j'ai bien saisi?

Donc ce que je fais. La fiche se poste correctement malheureusement les infobulles ne fonctionnent pas Sad
Ai-je mal fait quelque chose?

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Scoubifitz le Mar 17 Sep 2013 - 23:10

bien ... faites un test simple ...

placez le code de l'iframe dans un sujet de votre forum , et vérifiez si ça fonctionne .

Code:
<center><iframe src="http://graph-addict.forumactif.pro/h2-fiche-pub" style="width: 710px; height: 1000px;" frameborder="no" scrolling="no"></iframe></center>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Miss CC le Mer 18 Sep 2013 - 0:05

bonsoir,

ca je l'avais déjà fait et malheureusement c'est pour cela que je viens vers vous... car en le plaçant dans sujet sur mon fo ca revient toujours au meme probleme. Je comprend pas pourquoi les infobulles fonctionent pas

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Scoubifitz le Mer 18 Sep 2013 - 1:26

dernier test ...

Dites moi si vous avez le même souci de fonctionnement dans ce message :

http://foratest.forumpersos.com/t266-en-cours-recrutement-d-un-nouveau#339

(personnellement , l'affichage des infobulles fonctionne parfaitement .)


Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Miss CC le Mer 18 Sep 2013 - 9:47

Bonjour

oO étrange oui j'ai bien le même soucis alors que vous ça fonctionne, là je comprend encore moi car les deux autre admin avec qui j'ai fait le forum n'ont pas l'animation non plus.

Sauriez-vous m'expliquer pourquoi chez moi ça ne fonctionne pas? Un problème de cache à vider?

merci

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Scoubifitz le Mer 18 Sep 2013 - 15:19

Trouvé !

vous utilisez tous Google Chrome , vrai ?

éditez votre page HTML et supprimez ceci (en rouge) dans la partie CSS :


/* Affichage infobulle passage*/
.infobulle > div {
.../...
}

/* rotation lors de l'affichage*/
.infobulle:hover > div {

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Miss CC le Mer 18 Sep 2013 - 17:32

Bonjour,

merci pour votre réponse, oui nous sommes bien sur chrome par contre j'ai bien retirer les flèches mais cela n'a rien changé Sad je désespère et j'ai peur de vous ennuyer, merci encore pour votre aide

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Scoubifitz le Mer 18 Sep 2013 - 19:13

reflexion  un problème entre Google Chrome et :hover , mais je ne vois pas pourquoi ...

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Miss CC le Mer 18 Sep 2013 - 20:24

Oui je vois pas pourquoi non plus du tout d'ou mes interrogation car pou ma PA j'ai utiliser la flèche et le :hover mais tout fonctionne très bien. D’ailleurs sur la page directement cela fonctionne très bien c'est quand on la place dans l'ifram que ça fonctionne plus mais pourquoi ca reste un mystère pour moi même si je continue de creuser...

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Miss CC le Ven 20 Sep 2013 - 9:35

Coucou

Un petit UP avec se problème persistant qui persiste et dont je ne trouve pas la solution;

Merci

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Scoubifitz le Ven 20 Sep 2013 - 21:12

Après quelques recherches sur le web , il y a bien un souci avec le navigateur Google chrome , lorsqu'un élément est en :hover dans un iframe ... et seulement en iframe ...

Il n'y a pas de solution connue en ce moment ...

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Miss CC le Sam 21 Sep 2013 - 7:44

ha zut oO C'est nul j'aurais su je n'aurais pas choisis de faire la fiche pub ainsi et à tout hazard pour partager une fiche pub faites en html auriez-vous une autre solution que l'iframe?

En tout cas merci beaucoup pour votre aide

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Scoubifitz le Sam 21 Sep 2013 - 13:48

si votre html n'est plus rattaché à votre forum , vous n'aurez plus les statistiques ...

Il y a cependant quelque chose de bizarre dans le survol du staff , on ne peut pas accéder à la case "MP" , "Profil" ou "Postuler", même avec Firefox ...

scratch

édit :

j'ai repris tout le codage de la page HTML , le souci persiste , mais quand le survol est possible on peut accéder à tous les boutons .

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/png" href="http://i71.servimg.com/u/f71/18/46/08/14/favico12.png" />
<title>Graph Addict Pub</title>
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<style type="text/css">
/* bulle staff horizontale */
.infobulle {
display: inline-block;
}

/* Affichage infobulle passage */
.infobulle div {
position: absolute;
margin-top: -40px;
opacity: 0;
visibility: hidden;
z-index:900;
-webkit-transform: scale(0.3) rotate(-45deg);
-moz-transform: scale(0.3) rotate(-45deg);
-o-transform: scale(0.3) rotate(-45deg);
transform: scale(0.3) rotate(-45deg);

-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
/* rotation lors de l affichage */
.infobulle:hover div {
opacity: 1;
visibility: visible;
z-index:900;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
/* apparence grande bulle staff */
.bouh {
width: 200px;
z-index:900;
margin: auto;
background-color:#7a7a7a;
color: black;
text-align: center;
-webkit-box-shadow: 0 0 5px #212121;
-moz-box-shadow: 0 0 5px #212121;
-o-box-shadow: 0 0 5px #212121;
box-shadow: 0 0 5px #212121;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
/* mp et profil */
.bouh a {
padding: 5px;
margin: 5px 0 0 0;
display: inline-block;
background-color: white;
text-decoration: none;
-webkit-box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
-moz-box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
-o-box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.bouh a:hover {
color: #000000;
}
.bouh h1 {
color:#11a2c8;
-webkit-text-shadow: 0 0 5px #000000;
-moz-text-shadow: 0 0 5px #000000;
-o-text-shadow: 0 0 5px #000000;
text-shadow: 0 0 5px #000000;
}
.bouh p {
text-align: center;
}
.bouh hr {
-webkit-box-shadow: 0 0 3px #666666;
-moz-box-shadow: 0 0 3px #666666;
-o-box-shadow: 0 0 3px #666666;
box-shadow: 0 0 3px #666666;
}
.fleche {
width: 0;
margin-left: 100px;
border: 5px solid transparent;
border-bottom: 10px solid #ffffff;
}
.GAfond{background-color: #000000;
width: 600px;
color: #11a2c8;
margin:auto;
text-align:center;
}
.GAcadre{
background-color: #7a7a7a;
margin: auto;
padding: 20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.GAtitre{color: #11a2c8;
text-align: center;
margin: -30px 0px 0px 0px;
font: 30px impact;
text-shadow: 3px 3px 4px #25201D;
}
.GAcontext{width: 235px; height: 350px;}
.GAstats{width: 210px; height: 125px; text-align: left;font-size: 14px;}
.GAstaff{width: 210px; text-align: center; font-size: 14px;}
.GAlien{width: 400px; text-align: center; font-size: 14px;margin-top:-15px;}
.GAfoot a{color: #11a2c8 !important; font-size: 14px; font-family: arial narrow; letter-spacing: 2px;}
</style>
</head>
<body>
<div class="GAfond"><img src="http://img15.hostingpics.net/pics/263569fichepubbannire.jpg" />
<div style="font-size: 16px; font-family: Courier New; line-height:0px; color: #11a2c8;margin-top:20px;"><img src="http://img15.hostingpics.net/pics/757771GRAPHADDICTTITRE.png" /><br />
Forum de Graphisme</div>
<table width="100%" border="0" cellspacing="25">
<tr>
<td width="60%">
<div class="GAcadre GAcontext">
<div class="GAtitre">Contexte</div>

<div style="overflow:auto;width:100%"><marquee height="335" direction="up" scrollamount="1">
<p style="text-align: justify;color: black;">GA est un forum de Graphisme basé en premier lieu sur la convivialité et l'entraide ! Vous y trouverez une communauté axée avant tout sur le partage, la passion et une envie commune : grapher !<br /> <br />
Que vous soyez débutant ou plus expérimenté cela nous importe peu, ce qui compte c'est la détermination à apprendre ou à évoluer, le désir de grapher et de partager.<br />
Et pour vous aider, vous accompagner dans cette quête de graphisme effrénée Graph Addict vous propose des tutoriels, des cours particuliers et collectifs mais aussi un système de Team qui vous permettra de progresser dans un groupe qui vous ressemble !<br />
En effet, Graph Addict n'est pas un forum comme les autres, puisqu'il est entièrement basé sur un système de teams.<br />
En ce sens, pour pouvoir profiter pleinement des concours, défis et duels, il vous faudra appartenir à l'une d'entre elles.<br />
Vous aurez aussi la possibilité de faire évaluer votre niveau, de nous montrer vos talents de graphistes et d'apprendre via le partage mais aussi grâce aux tutos, cours collectifs et particuliers.<br /> <br />
Bienvenue sur Graph Addict !
</p></marquee>
</div>
</div>
<div style="margin: -35px 0px 0px 20px; transform: rotate(-8deg);text-align:left;"><img src="http://img4.hostingpics.net/pics/299445iconficheprez.png" /></div>
</td>
<td width="50%">
<div class="GAcadre GAstats">
<div class="GAtitre">Statistiques</div>
<span style="color: black;">Graph Addict a ouvert le <b>14 Septembre 2013</b><br/>
Nous comptons<b><span class="FORUMCOUNTUSER"></span></b> membres,<br/>
Pour un total de <b><span class="FORUMCOUNTPOST"></span></b> messages postés dans <b><span class="FORUMCOUNTOPIC"></span></b> sujets.</span></div><br />

<div class="GAcadre GAstaff">
<div class="GAtitre">STAFF</div>

<div class="infobulle">
<!-- Illustration de l'infobulle -->
<img src="http://img4.hostingpics.net/pics/542240iconeElfypub.png" alt="rondstaff" class="rondstaff" />
<!-- Contenu de l'infobulle -->
<div class="bouh">
<h1>El-of-Nature</h1>
<hr />
<p><img src="http://r23.imgfast.net/users/2316/50/19/70/avatars/4-55.png" /></p>
<div class="fleche"></div>
<i><img src="http://img11.hostingpics.net/pics/275708RangADMIN.png" /></i><br />
<a href="http://graph-addict.forumactif.pro/privmsg?mode=post&u=4">MP</a> / <a href="http://graph-addict.forumactif.pro/u4">Profil</a><br /><br />
</div>
</div>

<div class="infobulle">
<!-- Illustration de l'infobulle -->
<img src="http://img4.hostingpics.net/pics/190987iconeEllapub.png" alt="rondstaff" class="rondstaff" />
<!-- Contenu de l'infobulle -->
<div class="bouh">
<h1>Ellanna</h1>
<hr />
<p><img src="http://r23.imgfast.net/users/2316/50/19/70/avatars/2-24.jpg" /></p>
<div class="fleche"></div>
<i><img src="http://img11.hostingpics.net/pics/275708RangADMIN.png" /></i><br />
<a href="http://graph-addict.forumactif.pro/privmsg?mode=post&u=2">MP</a> / <a href="http://graph-addict.forumactif.pro/u2">Profil</a><br /><br />
</div>
</div>

<div class="infobulle">
<!-- Illustration de l'infobulle -->
<img src="http://img4.hostingpics.net/pics/807749iconemisspub.png" alt="rondstaff" class="rondstaff" />
<!-- Contenu de l'infobulle -->
<div class="bouh">
<h1>Miss CC</h1>
<hr />
<p><img src="http://r23.imgfast.net/users/2316/50/19/70/avatars/3-8.jpg" /></p>
<div class="fleche"></div>
<i><img src="http://img11.hostingpics.net/pics/275708RangADMIN.png" /></i><br />
<a href="http://graph-addict.forumactif.pro/privmsg?mode=post&u=3">MP</a> / <a href="http://graph-addict.forumactif.pro/u3">Profil</a><br /><br />
</div>
</div>

<div class="infobulle">
<!-- Illustration de l'infobulle -->
<img src="http://img4.hostingpics.net/pics/911936iconeMODOpub.png" alt="rondstaff" class="rondstaff" />
<!-- Contenu de l'infobulle -->
<div class="bouh">
<h1>Modérateur</h1>
<hr />
<p><img src="http://img4.hostingpics.net/pics/987556avatarpardfaut.jpg" /></p>
<div class="fleche"></div>
<i><img src="http://img11.hostingpics.net/pics/925562RangMODO.png" /></i><br />
<a href="http://graph-addict.forumactif.pro/t66-integrer-le-staff#128">Postuler</a><br /><br />
</div>
</div>

<div class="infobulle">
<!-- Illustration de l'infobulle -->
<img src="http://img4.hostingpics.net/pics/315805iconeGRAPHpub.png" alt="rondstaff" class="rondstaff" />
<!-- Contenu de l'infobulle -->
<div class="bouh">
<h1>Graphiste</h1>
<hr />
<p><img src="http://img4.hostingpics.net/pics/987556avatarpardfaut.jpg" /></p>
<div class="fleche"></div>
<i><img src="http://img11.hostingpics.net/pics/995526RangGRAPHISTE.png" /></i><br />
<a href="http://graph-addict.forumactif.pro/t66-integrer-le-staff#128">Postuler</a><br /><br />
</div>
</div>

<div class="infobulle">
<!-- Illustration de l'infobulle -->
<img src="http://img4.hostingpics.net/pics/226281iconePUBpub.png" alt="rondstaff" class="rondstaff" />
<!-- Contenu de l'infobulle -->
<div class="bouh">
<h1>Pubiste</h1>
<hr />
<p><img src="http://img4.hostingpics.net/pics/987556avatarpardfaut.jpg" /></p>
<div class="fleche"></div>
<i><img src="http://img11.hostingpics.net/pics/543857RangPUBISTE.png" /></i><br />
<a href="http://graph-addict.forumactif.pro/t66-integrer-le-staff#128">Postuler</a><br /><br />
</div>
</div>

</div>
</td>
</tr><tr>
<td colspan="2">
<div class="GAcadre GAlien">
<div class="GAtitre">Nous Lier</div>
<div style="color: black;text-align: left;">Merci d'avoir pris le temps de nous lire.<br />
Il ne vous reste plus qu'à nous découvrir et venir partager, en attendant quoi de mieux que de nous lier ?</div><br />

<a href="http://graph-addict.forumactif.pro/" target="_blank"><img src="http://img11.hostingpics.net/pics/231327logopartenariat.gif" /></a><br /><br />
<textarea><a href="http://graph-addict.forumactif.pro/" target="_blank"><img src="http://img11.hostingpics.net/pics/231327logopartenariat.gif" /></a></textarea>
</div>
</td>
</tr>
</table>

<div class="GAfoot"><a href="http://graph-addict.forumactif.pro/">Forum</a> • <a href="http://www.youtube.com/channel/UCtCfaY7hwxRGM_ns-T5ML6Q?feature=watch">YouTube</a> • <a href="http://graphaddict2013.deviantart.com/gallery/">DeviantArt</a></div>

</div>
</body>
</html>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Miss CC le Dim 22 Sep 2013 - 8:27

bonjour,

Etrange nous n'avions pas se soucis Oo pour les statistique ce n'est pas grave nous mettrons à jours manuellement si ce n'est que ça.

Si vous avez une solution je suis tout à fait preneuse. Merci beaucoup pour la rectification du code!

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Scoubifitz le Dim 22 Sep 2013 - 22:24

un nouvel essai ? j'ai un peu modifié le CSS ...

normalement vous devriez voir les titres devenir rouge et avoir la rotation comme vous le vouliez ...

Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/png" href="http://i71.servimg.com/u/f71/18/46/08/14/favico12.png" />
<title>Graph Addict Pub</title>
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<style type="text/css">
/* bulle staff horizontale */
.infobulle {
display: inline-block;height:42px;width:98px;position:relative;
}

/* Affichage infobulle passage */
.infobulle > div{
position: absolute;
margin-top: -40px;
opacity: 0;
display:block;
z-index:800;
-webkit-transform: scale(0) rotate(-45deg);
-moz-transform: scale(0) rotate(-45deg);
-o-transform: scale(0) rotate(-45deg);
transform: scale(0) rotate(-45deg);

-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
/* rotation lors de l affichage */
.infobulle:hover > div{
position: absolute;
opacity: 1;
z-index:900;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
/* apparence grande bulle staff */
.bouh {
width: 200px;
z-index:900;
margin: auto;
background-color:#7a7a7a;
color: black;
text-align: center;
-webkit-box-shadow: 0 0 5px #212121;
-moz-box-shadow: 0 0 5px #212121;
-o-box-shadow: 0 0 5px #212121;
box-shadow: 0 0 5px #212121;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
/* mp et profil */
.bouh a {
padding: 5px;
margin: 5px 0 0 0;
display: inline-block;
background-color: white;
text-decoration: none;
-webkit-box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
-moz-box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
-o-box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
box-shadow: 0 0 3px #ffffff, 0 0 5px #212121;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.bouh a:hover {
color: #000000;
}
.bouh h1 {
color:#11a2c8;
-webkit-text-shadow: 0 0 5px #000000;
-moz-text-shadow: 0 0 5px #000000;
-o-text-shadow: 0 0 5px #000000;
text-shadow: 0 0 5px #000000;
}
.bouh p {
text-align: center;
}
.bouh hr {
-webkit-box-shadow: 0 0 3px #666666;
-moz-box-shadow: 0 0 3px #666666;
-o-box-shadow: 0 0 3px #666666;
box-shadow: 0 0 3px #666666;
}
.fleche {
width: 0;
margin-left: 100px;
border: 5px solid transparent;
border-bottom: 10px solid #ffffff;
}
.GAfond{background-color: #000000;
width: 600px;
color: #11a2c8;
margin:auto;
text-align:center;
}
.GAcadre{
background-color: #7a7a7a;
margin: auto;
padding: 20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.GAtitre{color: #11a2c8;
text-align: center;
margin: -30px 0px 0px 0px;
font: 30px impact;
text-shadow: 3px 3px 4px #25201D;
}
.GAtitre:hover{color: red;
text-shadow: 3px 3px 4px darkred;
}
.GAcontext{width: 235px; height: 350px;}
.GAstats{width: 210px; height: 125px; text-align: left;font-size: 14px;}
.GAstaff{width: 210px; text-align: center; font-size: 14px;}
.GAlien{width: 400px; text-align: center; font-size: 14px;margin-top:-15px;}
.GAfoot a{color: #11a2c8 !important; font-size: 14px; font-family: arial narrow; letter-spacing: 2px;}
</style>
</head>
<body><div class="GAfond"><img src="http://img15.hostingpics.net/pics/263569fichepubbannire.jpg" />
<p><img src="http://img15.hostingpics.net/pics/757771GRAPHADDICTTITRE.png" /><br />
<span style="font-size: 16px; font-family: Courier New; line-height:0px; color: #11a2c8;">Forum de Graphisme</span></p>
<table width="100%" border="0" cellspacing="25">
<tr>
<td width="60%"><div class="GAcadre GAcontext"><div class="GAtitre">Contexte</div>
<div style="overflow:auto;width:100%"><marquee height="315" direction="up" scrollamount="1">
<p style="text-align: justify;color: black;">GA est un forum de Graphisme basé en premier lieu sur la convivialité et l'entraide ! Vous y trouverez une communauté axée avant tout sur le partage, la passion et une envie commune : grapher !<br /> <br />
Que vous soyez débutant ou plus expérimenté cela nous importe peu, ce qui compte c'est la détermination à apprendre ou à évoluer, le désir de grapher et de partager.<br />
Et pour vous aider, vous accompagner dans cette quête de graphisme effrénée Graph Addict vous propose des tutoriels, des cours particuliers et collectifs mais aussi un système de Team qui vous permettra de progresser dans un groupe qui vous ressemble !<br />
En effet, Graph Addict n'est pas un forum comme les autres, puisqu'il est entièrement basé sur un système de teams.<br />
En ce sens, pour pouvoir profiter pleinement des concours, défis et duels, il vous faudra appartenir à l'une d'entre elles.<br />
Vous aurez aussi la possibilité de faire évaluer votre niveau, de nous montrer vos talents de graphistes et d'apprendre via le partage mais aussi grâce aux tutos, cours collectifs et particuliers.<br /> <br />
Bienvenue sur Graph Addict !
</p></marquee>
</div>
</div><div style="margin: -35px 0px 0px 20px; transform: rotate(-8deg);text-align:left;"><img src="http://img4.hostingpics.net/pics/299445iconficheprez.png" /></div>
</td>
<td width="50%"><div class="GAcadre GAstats"><div class="GAtitre">Statistiques</div>
<span style="color: black;">Graph Addict a ouvert le <b>14 Septembre 2013</b><br/>
Nous comptons<b><span class="FORUMCOUNTUSER"></span></b> membres,<br/>
Pour un total de <b><span class="FORUMCOUNTPOST"></span></b> messages postés dans <b><span class="FORUMCOUNTOPIC"></span></b> sujets.</span></div><br />
<div class="GAcadre GAstaff"><div class="GAtitre">STAFF</div>
<div class="infobulle">
<!-- Illustration de l'infobulle -->
<img src="http://img4.hostingpics.net/pics/542240iconeElfypub.png" alt="rondstaff" class="rondstaff" />
<!-- Contenu de l'infobulle --><div class="bouh">
<h1>El-of-Nature</h1>
<hr />
<p><img src="http://r23.imgfast.net/users/2316/50/19/70/avatars/4-55.png" /></p><div class="fleche"></div>
<i><img src="http://img11.hostingpics.net/pics/275708RangADMIN.png" /></i><br />
<a href="http://graph-addict.forumactif.pro/privmsg?mode=post&u=4">MP</a> / <a href="http://graph-addict.forumactif.pro/u4">Profil</a><br /><br />
</div>
</div>
<div class="infobulle">
<!-- Illustration de l'infobulle -->
<img src="http://img4.hostingpics.net/pics/190987iconeEllapub.png" alt="rondstaff" class="rondstaff" />
<!-- Contenu de l'infobulle --><div class="bouh">
<h1>Ellanna</h1>
<hr />
<p><img src="http://r23.imgfast.net/users/2316/50/19/70/avatars/2-24.jpg" /></p><div class="fleche"></div>
<i><img src="http://img11.hostingpics.net/pics/275708RangADMIN.png" /></i><br />
<a href="http://graph-addict.forumactif.pro/privmsg?mode=post&u=2">MP</a> / <a href="http://graph-addict.forumactif.pro/u2">Profil</a><br /><br />
</div>
</div>
<div class="infobulle">
<!-- Illustration de l'infobulle -->
<img src="http://img4.hostingpics.net/pics/807749iconemisspub.png" alt="rondstaff" class="rondstaff" />
<!-- Contenu de l'infobulle --><div class="bouh">
<h1>Miss CC</h1>
<hr />
<p><img src="http://r23.imgfast.net/users/2316/50/19/70/avatars/3-8.jpg" /></p><div class="fleche"></div>
<i><img src="http://img11.hostingpics.net/pics/275708RangADMIN.png" /></i><br />
<a href="http://graph-addict.forumactif.pro/privmsg?mode=post&u=3">MP</a> / <a href="http://graph-addict.forumactif.pro/u3">Profil</a><br /><br />
</div>
</div>
<div class="infobulle">
<!-- Illustration de l'infobulle -->
<img src="http://img4.hostingpics.net/pics/911936iconeMODOpub.png" alt="rondstaff" class="rondstaff" />
<!-- Contenu de l'infobulle --><div class="bouh">
<h1>Modérateur</h1>
<hr />
<p><img src="http://img4.hostingpics.net/pics/987556avatarpardfaut.jpg" /></p><div class="fleche"></div>
<i><img src="http://img11.hostingpics.net/pics/925562RangMODO.png" /></i><br />
<a href="http://graph-addict.forumactif.pro/t66-integrer-le-staff#128">Postuler</a><br /><br />
</div>
</div>
<div class="infobulle">
<!-- Illustration de l'infobulle -->
<img src="http://img4.hostingpics.net/pics/315805iconeGRAPHpub.png" alt="rondstaff" class="rondstaff" />
<!-- Contenu de l'infobulle --><div class="bouh">
<h1>Graphiste</h1>
<hr />
<p><img src="http://img4.hostingpics.net/pics/987556avatarpardfaut.jpg" /></p><div class="fleche"></div>
<i><img src="http://img11.hostingpics.net/pics/995526RangGRAPHISTE.png" /></i><br />
<a href="http://graph-addict.forumactif.pro/t66-integrer-le-staff#128">Postuler</a><br /><br />
</div>
</div>
<div class="infobulle">
<!-- Illustration de l'infobulle -->
<img src="http://img4.hostingpics.net/pics/226281iconePUBpub.png" alt="rondstaff" class="rondstaff" />
<!-- Contenu de l'infobulle --><div class="bouh">
<h1>Pubiste</h1>
<hr />
<p><img src="http://img4.hostingpics.net/pics/987556avatarpardfaut.jpg" /></p><div class="fleche"></div>
<i><img src="http://img11.hostingpics.net/pics/543857RangPUBISTE.png" /></i><br />
<a href="http://graph-addict.forumactif.pro/t66-integrer-le-staff#128">Postuler</a><br /><br />
</div>
</div>

</div>
</td>
</tr><tr>
<td colspan="2"><div class="GAcadre GAlien"><div class="GAtitre">Nous Lier</div><div style="color: black;text-align: left;">Merci d'avoir pris le temps de nous lire.<br />
Il ne vous reste plus qu'à nous découvrir et venir partager, en attendant quoi de mieux que de nous lier ?</div><br />

<a href="http://graph-addict.forumactif.pro/" target="_blank"><img src="http://img11.hostingpics.net/pics/231327logopartenariat.gif" /></a><br /><br />
<textarea><a href="http://graph-addict.forumactif.pro/" target="_blank"><img src="http://img11.hostingpics.net/pics/231327logopartenariat.gif" /></a></textarea>
</div>
</td>
</tr>
</table>
<div class="GAfoot"><a href="http://graph-addict.forumactif.pro/">Forum</a> • <a href="http://www.youtube.com/channel/UCtCfaY7hwxRGM_ns-T5ML6Q?feature=watch">YouTube</a> • <a href="http://graphaddict2013.deviantart.com/gallery/">DeviantArt</a></div>

</div>
</body>
</html>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Miss CC le Lun 23 Sep 2013 - 9:34

YOUHOUUUUUUUUUUUU NIKEL MERCI MERCI MERCI!!!!

Par contre je veux bien que vous m'indiquiez comment vous avez procéder pour que cela fonctionne sur tout les navigateurs, que je dorme moin bête ce soir ^^

merci encore

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [codage] problème de rotation sur image

Message par Scoubifitz le Lun 23 Sep 2013 - 10:42

ben , au départ , je suis parti d'un "display:block" pour la div principale qui devrait supporter le survol ...

ça peut paraitre bête comme ça , mais chrome a besoin qu'on lui rappelle que les "div" sont de type block !^^

ensuite , j'ai donné une dimension à l'infobulle , et réduit le scale à zéro pour éviter des bugs mineurs de survol .

D'ailleurs , le seul à avoir besoin d'un z-index , c'est ".infobulle:hover > div" , les autres peuvent s'en passer .


Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: [codage] problème de rotation sur image

Message par Miss CC le Mar 24 Sep 2013 - 18:57

Ok merci beaucoup pour ton aide et tes précisions, c'est vraiment sympa de ta part!

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum