Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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
avatar

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.
avatar

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 ?
avatar

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.
avatar

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 ?
avatar

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;
        }
avatar

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 ) ::
avatar

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.
avatar

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 ...
avatar

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.
avatar

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 ...
avatar

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.
avatar

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
avatar

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 "
avatar

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="https://redcdn.net/hpimg11/pics/36885973WT.png" /> </td> <td> <img src="https://redcdn.net/hpimg11/pics/97733014WC.png" /></td> <td> <a href="#" style="text-decoration:none;"><img src="https://redcdn.net/hpimg11/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.
avatar

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 !
avatar

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