Problème avec un code dans mon en-tête

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

Résolu Problème avec un code dans mon en-tête

Message par BZH35 le Ven 11 Mai 2012 - 1:14

Bonjour.

Voilà, aujourd'hui j'ai trouvé un code fort intéressant qui me permet d'afficher la miniature d'une image, et d'en faire le zoom quand je passe le curseur de ma souris dessus.

J'ai donc calé ce code dans l'espace pour l'en-tête dans mon panneau d'administration. Et bien c'est parfait, ça marche, comme vous pourrez le voir en cliquant sur mon forum dans mon profil. L'image en question est l'affiche de catch.

Le seul problème, et vous l'aurez sûrement remarqué, c'est que la totalité des autres images de la pages sont aussi contraintes à cette règle, pourtant elles ne font pas parti de l'en-tête. Comment je peux régler ça?

Je suis en phpbb2 et et je ne peux pas poster le code sans être interdit de poster, c'est nul.


Dernière édition par BZH35 le Ven 11 Mai 2012 - 20:03, édité 1 fois

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par Psyaliah le Ven 11 Mai 2012 - 5:54

Bonjour,
Il vous suffit de donner une ID css à votre image d'en tête, et de rajouter cette ID devant la class déja inscrite dans le code css que vous avez inséré !

Psyaliah
# Tropactif #

Féminin
Messages : 1280
Inscrit(e) le : 22/12/2011

http://e-booking.forumgratuit.org
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par BZH35 le Ven 11 Mai 2012 - 7:20

J'avoue ne pas trop comprendre, concrètement cela consiste à ajouter quoi à mon code? De plus, mon code est en html, pas en css, je ne l'avais pas précisé désolé.

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par Psyaliah le Ven 11 Mai 2012 - 17:06

Mmmh, pouvez vous me fournir le code html dans ce cas s'il vous plait ?

Psyaliah
# Tropactif #

Féminin
Messages : 1280
Inscrit(e) le : 22/12/2011

http://e-booking.forumgratuit.org
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par BZH35 le Ven 11 Mai 2012 - 17:46

Le voilà :
Code:
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a img {border:none}
a:hover img {width:225px ; height:293px}
</style>
</head>
<body>
<a href="#"><img src="http://i43.servimg.com/u/f43/14/83/93/30/smsqbv10.png" width="112" height="146" alt=""></a>
</body>
</html>

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par Psyaliah le Ven 11 Mai 2012 - 18:47

On va faire autrement ^^
La ou vous mettez votre image, écrivez le comme ceci:
Code:
<span class="catchimg">ton image ici</span>

Ensuite dans PA Arrow Affichage Arrow Couleurs Arrow Feuille de style CSS, insérez:

Code:
a:hover.catchimg {
width: 225px;
height: 293px;
}

Psyaliah
# Tropactif #

Féminin
Messages : 1280
Inscrit(e) le : 22/12/2011

http://e-booking.forumgratuit.org
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par BZH35 le Ven 11 Mai 2012 - 18:58

Décidement, je ne comprends pas... j'ai fais ce que vous me dîtes, et l'image ne s'affiche même plus, mais le reste continue d'être zoomé.

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par Psyaliah le Ven 11 Mai 2012 - 19:09

Votre balise pour l'image est fausse.
De plus il faut supprimer tout ce que vous m'avez copier plus haut.

Donc dans le message de la page d'accueil vous mettez ceci:
Code:
<span class="catchimg">[img]http://i43.servimg.com/u/f43/14/83/93/30/smsqbv10.png[/img]</span>

Et ensuite, la ou je vous l'ai indiqué précédemment, vous coller le code CSS.
Avez vous un autre CSS déja présent ? Si oui merci de le montrer.

Psyaliah
# Tropactif #

Féminin
Messages : 1280
Inscrit(e) le : 22/12/2011

http://e-booking.forumgratuit.org
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par BZH35 le Ven 11 Mai 2012 - 19:13

Code:
.forumlink
{
letter-spacing : 4px;
}

body
{
width : 770px;
margin : auto;
margin-top : 10px;
margin-bottom : 10px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
}

table
{
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
}

.quote
{
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
border : 3px solid #666666;
padding : 5px;
}

.quote:hover
{
border : 3px solid white;
}

body.chatbox { background: #ffffff url(''); } 
p.chatbox_row_1.clearfix,p.chatbox_row_2.clearfix{background-color:transparent;}



@charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
  color: black;
    font-size: 16px; 
  font-weight: normal;
  margin: 0;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }
 
/***************************************** Light */
.accordion {
    border: 9px solid white;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #a0a0a0;
    -webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); 
    -o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% }
.accordion .slide > h2 span {
    background: #fcfcfc;
    background: -moz-linear-gradient(left,  #fcfcfc 0%, #ededed 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
    background: -webkit-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: -o-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: -ms-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
    -webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    -moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    -o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
  box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    color: #909090;
}
.accordion .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white }
.accordion .slide > h2.selected span, .accordion .slide h2.selected span:hover, .accordion .slide > h2.selected b { background: #ffffff }
.accordion .slide > div { background: #a0a0a0; margin-left: 5px }
 
/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }
 
/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.accordion .slide > h2 span { filter: none }
 
/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }
 
/* centrer l'accordéon */
.accordion { margin: auto; }









a:hover.catchimg {
width: 225px;
height: 293px;
}


 

 



 




Sinon j'ai suivi ce que vous m'avez dis de faire et... l'image s'affiche sans problème maintenant, au détail près qu'il n'y a plus de zoom nul part, même sur elle.

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code dans mon en-tête

Message par Psyaliah le Ven 11 Mai 2012 - 19:19

J'ai trouvé mon erreur ><
Donc voici pour afficher l'image:

Code:
<img  class="catchimg" src="http://i43.servimg.com/u/f43/14/83/93/30/smsqbv10.png" width="100" height="130"/>
J'ai attribué la class directement à l'image, avec des valeurs pour la rendre plus petite.

Ensuite, dans le css, on remplace le précédent par celui ci:
Code:
.catchimg:hover {
width: 225px;
height: 293px;
}

J'ai testé, ça fonctionne bien cette fois ci !

Psyaliah
# Tropactif #

Féminin
Messages : 1280
Inscrit(e) le : 22/12/2011

http://e-booking.forumgratuit.org
Psyaliah a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème avec un code dans mon en-tête

Message par BZH35 le Ven 11 Mai 2012 - 19:28

ça fonctionne aussi! Mon héroïne Yahoo

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 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