[codage] problème de rotation sur image
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
[codage] problème de rotation sur image
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!
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
Re: [codage] problème de rotation sur image
bonsoir ,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!
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>
Re: [codage] problème de rotation sur image
Bonsoir,
merci pour votre réponse mais l'animation des boutons staff ne fonctionne toujours
merci pour votre réponse mais l'animation des boutons staff ne fonctionne toujours
Re: [codage] problème de rotation sur image
L'iframe fonctionne très bien , même dans un message de topic ...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!
Vous placez l'iframe où ?
Re: [codage] problème de rotation sur image
coucou l'iframe fonctionner très bien auparavant malgrés la ptite erreur ^^
c'est l'animation sur les info bulle qui ne fonctionne pas quand je veux partager la page via l'iframeMiss 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
Re: [codage] problème de rotation sur image
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 :
- 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ù ?
Re: [codage] problème de rotation sur image
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
Ai-je mal fait quelque chose?
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
Ai-je mal fait quelque chose?
Re: [codage] problème de rotation sur image
bien ... faites un test simple ...
placez le code de l'iframe dans un sujet de votre forum , et vérifiez si ça fonctionne .
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>
Re: [codage] problème de rotation sur image
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
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
Re: [codage] problème de rotation sur image
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 .)
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 .)
Re: [codage] problème de rotation sur image
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
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
Re: [codage] problème de rotation sur image
Trouvé !
vous utilisez tous Google Chrome , vrai ?
éditez votre page HTML et supprimez ceci (en rouge) dans la partie CSS :
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 {
Re: [codage] problème de rotation sur image
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é je désespère et j'ai peur de vous ennuyer, merci encore pour votre aide
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é je désespère et j'ai peur de vous ennuyer, merci encore pour votre aide
Re: [codage] problème de rotation sur image
un problème entre Google Chrome et :hover , mais je ne vois pas pourquoi ...
Re: [codage] problème de rotation sur image
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...
Re: [codage] problème de rotation sur image
Coucou
Un petit UP avec se problème persistant qui persiste et dont je ne trouve pas la solution;
Merci
Un petit UP avec se problème persistant qui persiste et dont je ne trouve pas la solution;
Merci
Re: [codage] problème de rotation sur image
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 ...
Il n'y a pas de solution connue en ce moment ...
Re: [codage] problème de rotation sur image
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
En tout cas merci beaucoup pour votre aide
Re: [codage] problème de rotation sur image
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 ...
é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 .
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 ...
é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>
Re: [codage] problème de rotation sur image
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!
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!
Re: [codage] problème de rotation sur image
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 ...
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>
Re: [codage] problème de rotation sur image
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
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
Re: [codage] problème de rotation sur image
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 .
ç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 .
Re: [codage] problème de rotation sur image
Ok merci beaucoup pour ton aide et tes précisions, c'est vraiment sympa de ta part!
Sujets similaires
» Modifier le codage d'une image
» PA codée et codage d'image
» Problème codage
» Problème de codage
» Codage image
» PA codée et codage d'image
» Problème codage
» Problème de codage
» Codage image
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum