Image du Staff's réactive

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

Résolu Image du Staff's réactive

Message par Mitsoky le Ven 7 Oct 2011 - 18:56

Bonjour,
je viens de me creer une petite P.A cependant pour le staff's je ne sais rien faire.
Je sais mettre les images mais pour le reste , comme mettre du texte en dessous , j'suis nulle.

Apres j'aimerais faire une image réactive comme ceci (brouillon trop moche fait sur paint)


Cordialement , Mitso'


Dernière édition par Mitsoky le Jeu 20 Oct 2011 - 18:46, édité 1 fois

Mitsoky
***

Féminin
Messages : 127
Inscrit(e) le : 15/08/2011

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

Résolu Re: Image du Staff's réactive

Message par Chouquette~ le Sam 8 Oct 2011 - 0:00

Bonjour,
Il suffit de faire un tableau. Et encore ...

Code:
<table>
  <tr>
      <td> cellule A </td>
  </tr>
  <tr>
      <td> cellule B </td>
  </tr>
  <tr>
      <td> cellule C </td>
  </tr>
</table>
Pour afficher une image :

Code:
<img src="add_img" />
Pour l'image réactive : lien.

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

Chouquette~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image du Staff's réactive

Message par Mitsoky le Sam 8 Oct 2011 - 11:50

merci beaucoup.
Mais les images sont comme ceci ::
Spoiler:
l_l
l_l
l_l

Et j'aimerais qu'elles soit comme ceci ::
Spoiler:
l_l l_l l_l
Est-ce possible ?

Mitsoky
***

Féminin
Messages : 127
Inscrit(e) le : 15/08/2011

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

Résolu Re: Image du Staff's réactive

Message par Chouquette~ le Sam 8 Oct 2011 - 12:03

Oui effectivement, voici le nouveau code à utiliser :

Code:
<table>
  <tr>
      <td> cellule A </td>
      <td> cellule B </td>
      <td> cellule C </td>
  </tr>
</table>
Ca devrait marcher comme ça Wink.

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

Chouquette~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image du Staff's réactive

Message par Mitsoky le Sam 8 Oct 2011 - 16:35

Merci seulement regarder sur mon forum test dans la partie Staff's la categorie qui etait a coté c'est mises a l'interrieur ::
Mon Forum Test

EDIT :: On met le code HTML sur une page HTML ou autre part ?

Mitsoky
***

Féminin
Messages : 127
Inscrit(e) le : 15/08/2011

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

Résolu Re: Image du Staff's réactive

Message par Chouquette~ le Sam 8 Oct 2011 - 17:02

Je ne saisi pas ...

Je vois bien les trois image, il ne manque plus que l'image réactive.
Il suffit d'intégrer le code pour afficher l'image dans celui pour créer l'infobulle.

Exemple:
Pour cette image :
Code:
<a href="#" style="text-decoration:none;"><img src="http://img11.hostingpics.net/pics/610096BID.png"><span> Texte à afficher dans l'infobulle </span></a>
Le CSS est bien à mettre dans la feuille de style (PA >> couleur >> feuille de style) :
Code:
        a.info {
        position:relative;
        z-index:24;
        color:#000000;
        text-decoration:none
        }
       
        a.info:hover {
        z-index:25;
        background-color:#FFFFFF
        }
       
        a.info span {
        display: none
        }
       
        a.info:hover span {
        display:block;
        position:absolute;
        top:2em;
        left:2em;
        width:15em;
        border:1px solid #000000;
        background-color:#FFFFFF;
        color:#000000;
        font-weight:none;
        padding:5px;
        }

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

Chouquette~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image du Staff's réactive

Message par Mitsoky le Sam 8 Oct 2011 - 17:30

mon CSS ::
Code:
body {
background-repeat: no-repeat;
}
.forumline{border:1px dotted #4A1806;
}


a.infobulle {
  position: relative;
  color: #576186; 
text-decoration: none;
}

a.infobulle span {
  display: none; /* on masque l'infobulle */
font-size: 12px;

}
a.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.infobulle:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;

  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 60px; /* on positionne notre infobulle */
  left: 60px;

  background: #5897DF; /* couleur fond de l'infobulle */

  color: #01172F; /* couleur de la police */

  padding: 3px;

  border: 3px solid #01172F; /* couleur du contour de l'infobulle */

-border-radius: 30 px; /* tous les côtés sont arrondis */
-moz-border-radius: 30 px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30 px; /* tous les côtés sont arrondis */
}




a.blah:hover {
letter-spacing: 5px;
}




.statistiques{
border:0px;
background-image: url("http://img20.imageshack.us/img20/176/lgdctheme2.png");
background-repeat: no-repeat;
background-position: center;
height:310px;}

.groupes{
background-color: #000000;border: 1px #455e8a solid;
-moz-border-radius : 5px;
-webkit-border-radius: 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}



.quote{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    padding: 10px;
    text-indent: 30px ;
    color: #0B2C66;
    line-height: 125%;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #627699;
-border-radius: 30px; /* tous les côtés sont arrondis */
-moz-border-radius: 30px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30px; /* tous les côtés sont arrondis */
border: 1px solid;
}
.code{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    padding: 10px;
    text-indent: 30px ;
    color: #0B2C66;
    line-height: 125%;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #627699;
-border-radius: 30px; /* tous les côtés sont arrondis */
-moz-border-radius: 30px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30px; /* tous les côtés sont arrondis */
border: 1px solid;
}

.spoiler_content{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    padding: 10px;
    text-indent: 30px ;
    color: #0B2C66;
    line-height: 125%;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #627699;
-border-radius: 30x; /* tous les côtés sont arrondis */
-moz-border-radius: 30px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30px; /* tous les côtés sont arrondis */
border: 1px solid;
}
.spoiler_closed{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    padding: 10px;
    text-indent: 30px ;
    color: #0B2C66;
    line-height: 10%;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #627699;
-border-radius: 30px; /* tous les côtés sont arrondis */
-moz-border-radius: 30px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30px; /* tous les côtés sont arrondis */
border: 1px solid;
}.textecontenu {
overflow: auto;
height: 100px;
padding: 3px;
}

.textecontenu2 {
overflow: auto;
height: 230px;
padding: 3px;
}

.titretable {
border-bottom: 2px inset black;
width: 300px;
display: block;
text-align: center;
font-size: 20px;
font-family: Times new Roman;
font-style: italic;
}


        a.info {        position:relative;        z-index:24;        color:#000000;        text-decoration:none        }                a.info:hover {        z-index:25;        background-color:#FFFFFF        }                a.info span {        display: none        }                a.info:hover span {        display:block;        position:absolute;        top:2em;        left:2em;        width:15em;        border:1px solid #000000;        background-color:#FFFFFF;        color:#000000;        font-weight:none;        padding:5px;        }

Ma P.A ::
Code:
<font color="black"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 24px; line-height: normal">Bienvenu sur SC {USER&amp;#8288;NAME}</span></div></font>
<br><br>
<table border="0"><tr><td rowspan="2"><span class="titretable">Nouveautés</span><div class="textecontenu2"> -Un recensement a été mis en place veuillez vous y rendre <a href="http://les-6-clans.guildjdr.net/t190-dernier-recensement-avant-mis-a-jours-du-forum" class="postlink" target="_blank" rel="nofollow">ici</a> et il s'achèvera dans moins d'un mois.<br><br>

-Nous recherchons des posts importants ( Guerisseur , Lieutenant , Chef )dans tous les Clans .<br><br>

-Un nouveau Design vient d'arrivées, et une Page d'Accueil a été mise en place .Un grand remerciement a Chronique de Minuit.<br><br>

-Qui est donc ce personnage mystère? Faites votre enquête!<br><br>

</div></td><td><span class="titretable">Mascotte</span><div class="textecontenu">
<a href="http://www.squiby.net/level/7155297"><img src="http://squiby.net/view/7155297.png" border=0><br>
Notre Mascotte du moment n'est autre que notre Feufounet collectif , notre co-admin fondateur , notre homme du forum j'ai nommée Etoile de Feu! Alors, pourquoi lui? Tout simplement parce qu'il a toujours été là pour nous. Il a toujours su faire respecter l'ordre et la discipline. Admin diplomate jamais aucun d'entre nous n'a eu de problème avec toi. J'espères que tu sera fièr d'être notre mascotte profite en!.
</div></td><td><span class="titretable">Priorités</span><div class="textecontenu"><span><marquee behavior="scroll" direction="up" scrollamount="1" height="60">-Merci de remplir tous les grands rôles (Chefs ,Lieutenants ,Guérisseur) . Mais avant passer par la case Règlement (le réglement va être changé et les chef devront être choisi par les admins pour leur niveau de rp).<br><br>

-Recherche de Modérateur en Chef et de Modérateur veuillez adresser un mp pour proposer votre candidature a l'un des admins.<br><br>



</marquee></span>

</div></td></tr><tr><td><span class="titretable">Staff's</span><div class="textecontenu">  <table>  <tr>      <td> <img src="http://img11.hostingpics.net/pics/36885973WT.png" /> </td>      <td> <img src="http://img11.hostingpics.net/pics/97733014WC.png" /></td>      <td> <a href="#" style="text-decoration:none;"><img src="http://img11.hostingpics.net/pics/610096BID.png"><span> <b> Flamby </b><br>Gereuse de l'Affichage du Forum</span></a>  </td>  </tr></table>
<span
class="titretable">Event</span><div class="textecontenu">Aucun event en cours, nous attendons vos propositions et idée .</div></td></tr><tr><td><span class="titretable">Clans</span><div class="textecontenu"><font color="black">Ombre ::</font> Ouvert<br>
<font color="yellow">Tonnerre ::</font> Ouvert<br>
<font color="cyan">Vent ::</font> Ouvert<br>
<font color="blue">Riviere ::</font> Ouvert <br>
<font color="white">Ciel ::</font> Ouvert<br>
<font color="green">Errants et Solitaires ::</font> Ouvert<br>
<font color="brown">Domestiques ::</font> Ouvert<br></div></td><td><span class="titretable">Saison</span><div class="textecontenu">des Feuilles mortes. Les clans trouve du gibier a foison ce qui est rare.
La saison des amours viens de se terminer. Les naissances ne devraient plus tarder a arrivée.
</div></td><td><span class="titretable">Crédits</span><div class="textecontenu">Design by <b>Chronique</b><br>
P.A by <b>Chronique</b>.<br><font color="red"><span style="font-size: 7px; line-height: normal">Tout plagia sera signalé au FDF , et le forum en question sera supprimé .</span></font></center></div></td></tr></table>

Et ca donne ca (sur IE ) ::

Mitsoky
***

Féminin
Messages : 127
Inscrit(e) le : 15/08/2011

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

Résolu Re: Image du Staff's réactive

Message par Chouquette~ le Dim 9 Oct 2011 - 18:03

Bon reprenons.

Le CSS :
Code:
        a.info {
        position:relative;
        z-index:24;
        color:#000000;
        text-decoration:none
        }
       
        a.info:hover {
        z-index:25;
        background-color:#FFFFFF
        }
       
        a.info span {
        display: none
        }
       
        a.info:hover span {
        display:block;
        position:absolute;
        top:2em;
        left:2em;
        width:15em;
        border:1px solid #000000;
        background-color:#FFFFFF;
        color:#000000;
        font-weight:none;
        padding:5px;
        }
Le HTML :
Code:
        <table>
          <tr>
              <td><a href="#" style="text-decoration:none;" class="info"><img src="ADRESSE DE L'IMAGE" alt="Texte alternatif" /><span> Texte à afficher dans l'infobulle </span></a> </td>
              <td><a href="#" style="text-decoration:none;" class="info"><img src="ADRESSE DE L'IMAGE" alt="Texte alternatif" /><span> Texte à afficher dans l'infobulle </span></a> </td>
              <td><a href="#" style="text-decoration:none;" class="info"><img src="ADRESSE DE L'IMAGE" alt="Texte alternatif" /><span> Texte à afficher dans l'infobulle </span></a> </td>
          </tr>
        </table>
Plus qu'à remplacer les adresses et le texte Wink. Ca devrait marcher.

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

Chouquette~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image du Staff's réactive

Message par Mitsoky le Dim 9 Oct 2011 - 19:21

Ca marche <3
Sauf que (comme sur la photo ) l'event se met dans la Partie Staff's ...

Mitsoky
***

Féminin
Messages : 127
Inscrit(e) le : 15/08/2011

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

Résolu Re: Image du Staff's réactive

Message par Chouquette~ le Dim 9 Oct 2011 - 22:56

C'est normal, il y a une erreur dans le code.
Repérez :
Code:
<span
        class="titretable">Event</span><div class="textecontenu">Aucun event en cours, nous attendons vos propositions et idée .</div>
Et remplacez par :
Code:
</td>
        <td><span
        class="titretable">Event</span><div class="textecontenu">Aucun event en cours, nous attendons vos propositions et idée .</div>
Normalement ça devrait être bon Wink.

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

Chouquette~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image du Staff's réactive

Message par Mitsoky le Lun 10 Oct 2011 - 15:56

Merci <3
Et...Encore desoler mais y a encore un default :s
Quand on met sur l'infobulle un scrollbarre se met seulement des qu'on enleve sa souris de l'image pour dessendre il disparait.

Encore desoler ...

Mitsoky
***

Féminin
Messages : 127
Inscrit(e) le : 15/08/2011

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

Résolu Re: Image du Staff's réactive

Message par Chouquette~ le Mar 11 Oct 2011 - 21:09

Bonjour,

Retirez la classe textecontenu du div contenant les images du staff.

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

Chouquette~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image du Staff's réactive

Message par Mitsoky le Mer 12 Oct 2011 - 10:37

Pardon ? x.x

Mitsoky
***

Féminin
Messages : 127
Inscrit(e) le : 15/08/2011

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

Résolu Re: Image du Staff's réactive

Message par Mitsoky le Mer 19 Oct 2011 - 19:14

Up , je ne vois aucun " class=textcontenu "

Mitsoky
***

Féminin
Messages : 127
Inscrit(e) le : 15/08/2011

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

Résolu Re: Image du Staff's réactive

Message par Chouquette~ le Jeu 20 Oct 2011 - 16:17

</div></td></tr><tr><td><span class="titretable">Staff's</span><div class="textecontenu"> <table> <tr> <td> <img src="http://img11.hostingpics.net/pics/36885973WT.png" /> </td> <td> <img src="http://img11.hostingpics.net/pics/97733014WC.png" /></td> <td> <a href="#" style="text-decoration:none;"><img src="http://img11.hostingpics.net/pics/610096BID.png"><span> <b> Flamby </b><br>Gereuse de l'Affichage du Forum</span></a> </td> </tr></table>
Attention : ne faites pas un copier/coller. Ce code est obsolète. Recherchez le dans votre code actuel, et supprimez la class textecontenu qui parasité tout.

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

Chouquette~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image du Staff's réactive

Message par Mitsoky le Jeu 20 Oct 2011 - 18:43

Merci c'est parfait !

Mitsoky
***

Féminin
Messages : 127
Inscrit(e) le : 15/08/2011

http://jewelsdream.forumgratuit.org/
Mitsoky 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