Bouton du style Afficher / Cacher

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

Résolu Bouton du style Afficher / Cacher

Message par LadyRaven le Mer 13 Fév 2013 - 8:11

Bonjour !
Je cherche comment pouvoir mettre ceci sous mon cadre de profil => https://i76.servimg.com/u/f76/15/30/73/42/ex_bmp11.jpg
Et lorsque on survole le "Contact & Infos " il y ait les infos qui s'affichent. En effet sur l'image on n'arrive pas à voir le curseur sur le "Contact & Infos" mais c'est seulement en le survolant que les trois onglets s'affichent. Comme vous le verrez à la page du forum (ci-dessous) j'ai déjà une " infobulle coulissante " mais ce n'est pas ce que je recherche et je n'ai pas assez de connaissances là dedans... On m'a dit que ça touchait le java ? /:




Merci !!


Dernière édition par LadyRaven le Sam 9 Mar 2013 - 5:23, édité 2 fois

LadyRaven
**

Féminin
Messages : 70
Inscrit(e) le : 09/02/2013

http://forum---test.creationforum.net/t1-votre-1er-sujet#1
LadyRaven a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton du style Afficher / Cacher

Message par Automne le Mer 13 Fév 2013 - 13:42


Automne
+ Hyperactif +

Messages : 8423
Inscrit(e) le : 22/03/2010

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton du style Afficher / Cacher

Message par LadyRaven le Mer 13 Fév 2013 - 14:10

Merci j'ai bien suivi le tuto mais ce n'est pas ça que je recherche /:
Comme je l'ai dit plus haut ce n'est pas les informations âge, localisation & cie que je veux masquer mais le lien Profil, le lien MP et le lien WWW (s'il y a).
Si on va sur le lien que j'ai donné menant au forum test, on voit qu'il y a un tiroir coulissant sous l'avatar avec : MP, Profil, WWW. C'est ça que je veux Cacher / Afficher. De plus ce n'est pas un bouton à proprement parler (le fait de cliquer quoi) mais un bouton que l'on survole /:

J'espère avoir été claire :S

LadyRaven
**

Féminin
Messages : 70
Inscrit(e) le : 09/02/2013

http://forum---test.creationforum.net/t1-votre-1er-sujet#1
LadyRaven a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton du style Afficher / Cacher

Message par LadyRaven le Ven 15 Fév 2013 - 12:16

Up Smile

LadyRaven
**

Féminin
Messages : 70
Inscrit(e) le : 09/02/2013

http://forum---test.creationforum.net/t1-votre-1er-sujet#1
LadyRaven a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton du style Afficher / Cacher

Message par LadyRaven le Dim 17 Fév 2013 - 7:24

Up ? :/

LadyRaven
**

Féminin
Messages : 70
Inscrit(e) le : 09/02/2013

http://forum---test.creationforum.net/t1-votre-1er-sujet#1
LadyRaven a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton du style Afficher / Cacher

Message par Automne le Dim 17 Fév 2013 - 8:23

Bonjour,

@LadyRaven a écrit:
J'espère avoir été claire :S

J'avais compris votre demande.

Dans le lien que je vous est donné, il y a le code du bouton pour afficher/masquer des infos sous le profil. Il suffit de faire un petit effort et de reprendre le code pour l'adapter a votre forum.
Code:

<div onClick="this.firstChild.value=(this.firstChild.value=='Afficher')?'Masquer':'Afficher';this.lastChild.style.display=(this.firstChild.value=='Afficher')?'none':'block';" style="text-align: center;"><input type="button" value="Afficher"/><div style="display: none; text-align: left;">CE QU'IL Y A  CACHER</div></div>

Les boutons que vous citez se trouvent dans le template viewtopic_body
Rechercher dans le template :

Code:
<table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
Explications des codes boutons
{postrow.displayed.PROFILE_IMG} << bouton profil
{postrow.displayed.PM_IMG} << bouton mp
{postrow.displayed.EMAIL_IMG} << bouton email
<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> << site www
{postrow.displayed.ONLINE_IMG} << bouton en ligne

Ensuite il suffit de mettre votre code bouton sous le profil entre <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
ICI VOTRE CODE BOUTON ET INFO A MASQUER
</td>

Pour le survol au lieu du clic, il suffit de changer dans le code bouton <div onClick par <div onmouseout (au survol mais reste actif)


Automne
+ Hyperactif +

Messages : 8423
Inscrit(e) le : 22/03/2010

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton du style Afficher / Cacher

Message par LadyRaven le Dim 17 Fév 2013 - 13:39

Merci de votre aide (:
Il reste un problème => http://forum---test.creationforum.net/t1-votre-1er-sujet#1
En touchant j'ai peur de tout gâcher :S
J'ai enlevé le CSS de l'onglet coulissant mais dans le template je ne trouve pas ce qui correspond aux boutons annexes qui s'affichent (bug)


Voici donc le template actuel :
Code:
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                    <div class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div><br />
                    <span class="postdetails poster-profile">
                        {postrow.displayed.POSTER_RANK}<br />
                      <div class="blocProfil"> <!-- OUVERTURE DU DIV .blocProfil -->
                        {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br/><br/>
                        <center><!-- BEGIN profile_field -->
                        {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                          <!-- END profile_field --></center>
                        {postrow.displayed.POSTER_RPG}
                    </span><br />
                </div> <!-- FERMETURE DU DIV .blocProfil -->
                  <div id="div_contact">
          {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
          <!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
        </div>
                <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
                  <div onmouseout="this.firstChild.value=(this.firstChild.value=='contact & infos')?'contact & infos':'contact & infos';this.lastChild.style.display=(this.firstChild.value=='contact & infos')?'none':'block';" style="text-align: center;"><input type="button" value="contact & infos"/><div style="display: none; text-align: left;">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}</div></div>
            </td>
         


Mon CSS :
Code:
a.forumlink:link, a.forumlink:visited {
background-image: url("");
font-family: Georgia;
text-transform : uppercase;
text-align: center;
font-size: 100%;
border-bottom: 4px dotted #FFFFFF;
color: #FFFFFF;
letter-spacing: 3px;
display: block;
-moz-border-radius:10px;
}
a.forumlink:hover, a.forumlink:hover:visited {
background-image: url("");
color: #ffffff;
letter-spacing: 4px;
text-align: center;
display: block;
border-bottom: 4px dotted #ffffff;
-moz-border-radius:10px;
}



body { background-attachment: no-fixed; background-repeat: no-repeat; background-position: top center;}



.name /* centrer le pseudo */ {text-align:center;}
.name {font-size:30px; /*taille et police du pseudo*/
  font-family: 'Patrick Hand', cursive;
 }

        .name:hover {font-size:30px!important;}/*enlever le zoom du pseudo*/
a { text-decoration: none; } /*enlever le soulignement des pseudos*/



.bodyline{ -moz-border-radius: 10px;}

a { text-decoration: none; }


.statistiques{
border:0px;
background-image: url("");
background-repeat: no-repeat;
background-position: center;
height:270px;}

.groupes{
background-color:#FFFFFF;border: 1px #D0D0D0 dotted;
-moz-border-radius : 5px 5px 5px 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;}

u {
text-decoration: none;
border-bottom: 2px #000000 solid;
-moz-border-radius: 6px;
}

.code{
font-family: Georgia;
font-size: 12px;
color: #000000;
line-height: 125%;
background-color: #6699CC;
border: #FFFFFF;
border-style: solid;
border: 3px #FFFFFF dotted;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px}

.blocProfil { /*code Profil*/
        padding:20px; /* une marge entre la bordure et l'intérieur du bloc */
        margin:20px; /* une marge entre la bordure et l'extérieur du bloc */
        border-radius:25px; /*la bordure */
        border-color:#990000; /*couleur de la bordure*/
        background:#EF7A7A; /*une couleur de fond */
    }

        .blocProfil {max-width:190px; /* largeur maximale */
        min-width:190px; /* largeur minimale */}



.postdetails.poster-profile a img { /*centrer l'avatar dans le profil*/
margin: auto;
display: block;
margin-bottom: -10px;
}

 

       

.postbody { /*Justification du texte automatique*/
    padding-left: 10 px;
    padding-right: 10 px;
    text-align:justify;
}
 
.ascenseur { /*boutons flèches permettant d'aller directement en haut ou en bas du forum*/
position: fixed; /*--- Cette ligne permet de toujours afficher l'ascenseur à l'écran ---*/
top: 50px; /*--- On le place à 50 px du haut de l'écran ---*/
right: 0px; /*--- On le place à 0px de la gauche de l'écran ---*/
background-color: #e7dfcf; /*--- On donne une couleur au fond ---*/
moz-border-radius: 0px 35px 35px 0px; /*--- On arrondit les bords ---*/
-webkit-border-radius: 0px 35px 35px 0px;
border-radius: 0px 35px 35px 0px;
}

/*CSS Page d'Accueil*/
 
     

          /* Début de la feuille de style */


            .onglet-content > div {
            display : none ; /* permet de spécifier la manière dont un élément est affiché */
            border : 5px; /* Bordure de la page d’accueil */
            border-radius : 25px ; /* l'arrondi de l'encadrement, à retirer selon ce que tu veux */
            padding : 02px ; /* correspond à la marge interne d'une boite, et permet de définir la distance */
            margin-bottom : 02px ; /*correspond à la marge externe d'une boite, et permet de définir la distance */
            width : 150px ; /* définit l'hauteur de la Page d'accueil */
            height : 300px; /* définit la largeur de la Page d'accueil */
            background: [img]http://i76.servimg.com/u/f76/15/30/73/42/1024x710.jpg[/img]; /* fond de la Page d'accueil */

          }
          .onglet-content > div.active{ display : block ; }
 
          .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; }
          .onglet-table td {
          style : top ;
          vertical-align:middle ; /* permet de gérer l'alignement vertical du texte */
          border : solid 05px ; /* Bordure de la page d’accueil (encadrement, voir tuto d'Illu)  */
          border-radius : 25px;
          font-size: 15px;
            padding : Xpx; /* taille en largeur des onglets */
            width: Xpx; /* taille en hauteur des onglets */
            text-align:center; /* permet de centré le nom des onglets */
       
            opacity : 0.5 ; /* (entre 0,1 et 1) opacité de tes onglets inactifs (que tu n'as pas sélectionné ou que tu ne survole pas) */
            font-size: Xpx; /* taille des titres de tes onglets */
            background: X; /* fond de tes onglets */
            }
          .onglet-table td.active, .onglet-table td:hover {
            opacity : 1 ; /* (entre 0,1 et 1) opacité d'un onglet survolé ou que tu as sélectionné */
            }
          /* Fin de la feuille de style */
     

LadyRaven
**

Féminin
Messages : 70
Inscrit(e) le : 09/02/2013

http://forum---test.creationforum.net/t1-votre-1er-sujet#1
LadyRaven a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton du style Afficher / Cacher

Message par LadyRaven le Lun 18 Fév 2013 - 15:59

Up : )

LadyRaven
**

Féminin
Messages : 70
Inscrit(e) le : 09/02/2013

http://forum---test.creationforum.net/t1-votre-1er-sujet#1
LadyRaven a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton du style Afficher / Cacher

Message par LadyRaven le Sam 23 Fév 2013 - 10:43

UP.

LadyRaven
**

Féminin
Messages : 70
Inscrit(e) le : 09/02/2013

http://forum---test.creationforum.net/t1-votre-1er-sujet#1
LadyRaven a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton du style Afficher / Cacher

Message par Automne le Dim 24 Fév 2013 - 4:47

Bonjour,

Se qui touche au bouton de contact, profil, c'est ceci

Code:
<div id="div_contact">
          {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
          <!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
        </div>

Il suffit donc de le placer a l'endroit indiqué dans le code donné plus haut et de le supprimer de là ou il se trouve. Ensuite votre bouton ne fonctionne pas, car vous avez placé les même pour ouvrir et fermé. Il suffit d'une petite différence (par exemple deux majuscules) pour que le bouton marche.

Comme ceci cela fonctionne, après a vous d'ajouter du style (là j'ai mis une marge et centrer)
Code:
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
           <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                        <div class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div><br />
                            <span class="postdetails poster-profile">
                              {postrow.displayed.POSTER_RANK}<br />
                              <!-- OUVERTURE DU DIV .blocProfil -->
                              <div class="blocProfil">
                              {postrow.displayed.RANK_IMAGE}
                              {postrow.displayed.POSTER_AVATAR}<br/><br/>
                              <center><!-- BEGIN profile_field -->
                              {postrow.displayed.profile_field.LABEL}
                              {postrow.displayed.profile_field.CONTENT}
                              {postrow.displayed.profile_field.SEPARATOR}
                              <!-- END profile_field --></center>
                              {postrow.displayed.POSTER_RPG}
                              </div>
                            </span>
                              <!-- FERMETURE DU DIV .blocProfil -->
                            <br />
                         
                              <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
                 
                          <div onmouseout="this.firstChild.value=(this.firstChild.value=='contact & infos')?'Contact & Infos':'contact & infos';this.lastChild.style.display=(this.firstChild.value=='contact & infos')?'none':'block';" style="text-align: center;"><input type="button" value="contact & infos"/>
                            <div style="display: none; text-align: center; margin-top:10px;">
                          <div id="div_contact">
                          {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
                          <!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
                          </div>
                            </div>
                          </div>
                </td>

Automne
+ Hyperactif +

Messages : 8423
Inscrit(e) le : 22/03/2010

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton du style Afficher / Cacher

Message par LadyRaven le Ven 1 Mar 2013 - 12:06

J'y suis arrivée => http://forum---test.creationforum.net/t1-votre-1er-sujet#1
Mais je recherche un effet plus fluide au moment de l'apparition des onglets, en effet quand on passe la souris dessus il y a un agrandissement du cadre en dessous qui est très direct, c'est possible de le faire plus lentement ?

LadyRaven
**

Féminin
Messages : 70
Inscrit(e) le : 09/02/2013

http://forum---test.creationforum.net/t1-votre-1er-sujet#1
LadyRaven a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton du style Afficher / Cacher

Message par Anzu le Jeu 7 Mar 2013 - 18:30

Bonsoir

Pourrait-on avoir des nouvelles ?

Cordialement.

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton du style Afficher / Cacher

Message par LadyRaven le Ven 8 Mar 2013 - 8:08

Je n'ai toujours pas réussi à trouver comment rendre plus fluide le survolage, quand on passe avec la souris ça continue de bugué...

Et puis quand on le survole, tout disparait : http://la-guerredesclans.forum-actif.net/

LadyRaven
**

Féminin
Messages : 70
Inscrit(e) le : 09/02/2013

http://forum---test.creationforum.net/t1-votre-1er-sujet#1
LadyRaven 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