Sujets similaires

Bonjour !
Trouvant que des gros blocs sur les côtés du forum, c'est pas très esthétique, je cherche un moyen de les faire devenir comme une chatbox latéral coulissante.
J'ai donc fait quelques recherches sur cssactif et j'ai trouvé quelques tutos et sujets :
http://www.css-actif.com/t14522-infobulle-sur-le-cote-termine
http://www.css-actif.com/t12680-infobulle-avec-effets-css3

Seulement voilà, comme je suis une grosse bouse, ben je n'arrive pas à trouver comment je pourrais justement insérer le code "coulissant" à celui de mon bloc.
Je n'ai pas compris aussi le fichier LESS... C'est du chinois pour moi .___.

Merci à ceux qui me répondront.

Alors pour ce qui est du fichier LESS, tu peux oublier, ce n'est pas important (c'est une version particulière du CSS). C'est en plus du tuto, une sorte de bonus Razz

!.

Je ne comprends pas vraiment de quoi tu parles en disant "les gros blocs sur les côtés du forum". Les widgets Razz

? Ou bien le fait de mettre des infobulles sur le côté plutôt ? (2 visions totalement différentes, mais là c'est un peu flou Razz

)

Je parle bien d'infobulles et pas de widgets ^^
Merci d'avoir répondu ♥

Je ne connais pas tous les tutos et code de CSS Actif, je suppose donc que tu as déjà cherché ^___^
Partant du principe qu'il n'y en a pas, tu va avoir l'IMMEEEEENSE (notons que j'ai mis le mot en majuscule pour donner encore plus de poids) privilège d'avoir un mini tuto.

Mais avant j'aimerai savoir si tu peux me donner le code des infobulles que tu as déjà mises (ça sera plus simple pour mon explication de partir d'un exemple concret Razz

) !

Voici le CSS concernant les cadres :

Code:: img.sidebar {
padding:1px; -moz-opacity: 0.6; margin:2px; -moz-border-radius: 4px; border: 1px solid #6e8d90;
background-color:#B2C8CF
}
img.sidebar:hover {
padding:2px; -moz-opacity: 1; margin:2px; -moz-border-radius: 4px; border: 1px solid #a63f43;
}

.boxtoproundtitle {
background-color: #ada49f;
color:#FFFFA8;
font-weight:bold;
text-decoration:none;
-moz-border-radius:5px;
font-size:11px;
margin:0px 0px 5px 0px; padding: 3px 10px 3px 10px;
display:block;
text-transform : uppercase;
text-align : center;
}
.box {
background-color: #333333;
-moz-border-radius:5px;
font-size:11px;
margin:0px; padding: 3px 10px 3px 10px;
color:#ABABAB;
}
.boxmenu {
background-color: #333333;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
font-size:12px;
margin:0px; padding: 3px 10px 3px 10px;
color:#ABABAB;
}

Et le template overall_footer_end :

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">
<body>
<table>
<tr>
   <td>
      <div>
         <div>
            <div>

            </div>
         </div>
         
         <div align="center">
            <div class="gen">
               
                   | 
                  <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
               
            </div>
         </div>
         
      </div>
      {PROTECT_FOOTER}
   </td>
</tr>
</table>


<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({appId: '{switch_facebook_login.FACEBOOK_APP_ID}', status: true, cookie: true, xfbml: true, oauth: true});
//]]>
</script>



<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
if ($('a#logout'))
{
   var lien_redir = $('a#logout').attr('href');

   if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
   {
      document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
   }
}
});

$(document).ready( function() {
$('a#logout').click( function() {
   FB.logout();
} );
});
//]]>
</script>


<script type="text/javascript">
//<![CDATA[
fa_endpage();
//]]>
</script>
<div style="position: fixed; top: 200px; left: 5px; ">
<div style="width: 150px; text-align: center;" class="boxmenu"><span style="font-variant: small-caps; font-size:15px; color: #ffffff; text-shadow: 0px 0px 2px #ffffff">CALENDRIER</span>
<br/>
<span style="font-variant: small-caps; font-size:12px;">Soirée Tinychat</span> - 23/06.<br/>
<span style="font-variant: small-caps; font-size:12px;">Quizz FS</span> - 23/06.<br/>
<span style="font-variant: small-caps; font-size:12px;">Quizz Equit'</span> - A prévoir.<br/>
<span style="font-variant: small-caps; font-size:12px;">Quizz Disney</span> - A prévoir.<br/>
<a href="http://falonasynae.forumactif.com/t446-activites-diverses?tt=1">Plus d'infos ?</a>
</div>
<div style="width: 150px; text-align: center;" class="boxmenu"><span style="font-variant: small-caps; font-size:15px; color: #ffffff; text-shadow: 0px 0px 2px #ffffff;">RAPPELS</span>
<br/><span style="font-variant: small-caps; font-size:12px;">Apparition :</span> Le Chasseur, mi-homme mi-loup.<br/>
<span style="font-variant: small-caps; font-size:12px;color: red">Event :</span> Inscriptions closes, c'est parti !<br/>
<a href="http://falonasynae.forumactif.com/t488-oo-chapitre-iii-la-belle-et-la-bete">Plus d'infos ?</a></div>
<div style="width: 150px; text-align: center;" class="boxmenu"><span style="font-variant: small-caps; font-size:15px; color: #ffffff; text-shadow: 0px 0px 2px #ffffff">MÉTÉO</span>
<br/>
<center><table style="text-align: center"><tr><td>Südarya<br/><img src="http://img11.hostingpics.net/pics/948773soleil.png"> <img src="http://img15.hostingpics.net/pics/625140peunuageux.png"></td>
<td>Estyöra<br/><img src="http://img15.hostingpics.net/pics/340804soleil.png"> <img src="http://img15.hostingpics.net/pics/269550averses.png"></td></tr>
<tr><td>Oudalyä<br/><img src="http://img15.hostingpics.net/pics/782719peunuageux.png"> <img src="http://img15.hostingpics.net/pics/373281averses.png"></td>
<td>Nördayron<br/><img src="http://img15.hostingpics.net/pics/173202orage.png"> <img src="http://img15.hostingpics.net/pics/625140peunuageux.png"></td>
<tr><td>Event<br/><img src="http://img15.hostingpics.net/pics/263407oragepluie.png"> <img src="http://img15.hostingpics.net/pics/925183aversesfortes.png"></td>
<td>Prévisions<br/><img src="http://img15.hostingpics.net/pics/445000thermomaxi.png"> <img src="http://img15.hostingpics.net/pics/894204brume.png"></td></tr></table></center></div>
</div>

<div style="position: fixed; top: 150px; left: 5px; ">

</body>
</html>

Hum, dans le code que tu m'as donné, tout à la fin tu as une div qui ne se ferme pas o_o

Code:: <div style="position: fixed; top: 150px; left: 5px; ">

</body>
</html>

Sinon, le code que tu as est un peu brouillon, on peut le rendre plus simple Razz

(SI SI SI je te jure, c'est pas si compliqué que ça xD !).
En effet dans ton code tu as pour plusieurs div avec ceci :

Code:: <div style="width: 150px; text-align: center;" class="boxmenu">

Il serait plus simple mettre toute la partie style dans ton css Wink

Ca permettrait d'alléger ton code, de le rendre plus lisible et aussi de tout modifier d'un coup ! Car là si tu veux changer la largeur (width) il faudrait la changer autant de fois qu'elle apparait dans ton code HTML. Grâce à la modification, tu le changes une fois et c'est bon Wink

Code:: .boxmenu {
background-color: #333333;
border-radius: 20px;
font-size:12px;
margin:0px; padding: 3px 10px 3px 10px;
color:#ABABAB;
width: 150px;
text-align: center;
}

Dans ton CSS, je peux voir une partie box, boxtoproundtitle, img.sidebar:hover , img.sidebar. Dans le HTML qui correspond, tu n'utilises pas ces classes... Si tu ne les utilises pas, tu peux supprimer toute cette partie là Wink

Code:: img.sidebar {
padding:1px; -moz-opacity: 0.6; margin:2px; -moz-border-radius: 4px; border: 1px solid #6e8d90;
background-color:#B2C8CF
}
img.sidebar:hover {
padding:2px; -moz-opacity: 1; margin:2px; -moz-border-radius: 4px; border: 1px solid #a63f43;
}

.boxtoproundtitle {
background-color: #ada49f;
color:#FFFFA8;
font-weight:bold;
text-decoration:none;
-moz-border-radius:5px;
font-size:11px;
margin:0px 0px 5px 0px; padding: 3px 10px 3px 10px;
display:block;
text-transform : uppercase;
text-align : center;
}
.box {
background-color: #333333;
-moz-border-radius:5px;
font-size:11px;
margin:0px; padding: 3px 10px 3px 10px;
color:#ABABAB;
}

Donc, maintenant on peut enfin s'attaquer à notre code !
Pour cela, on va repérer la div qui englobe tout notre graaaand cadre :

Code:: <div style="position: fixed; top: 200px; left: 5px; ">

Bien donc, comme on a vu, c'est mieux de mettre une class, plutôt que de mettre le css dans la partie style. Allez, on crée une class... Bon, en nom je vais mettre box_side. Ca devient donc

Code:: <div class="box_side">

Le principe d'un menu déroulant, ça serait :
NORMAL : la box est décalée sur la gauche, de XX pixels (XX sera une valeur à adapter selon tes besoins)
SURVOL : la box reprends sa place normale

Au niveau du CSS on aurait donc :

Code:: .box_side {
position: fixed;
top: 200px;
left: -150px; /* A l'état normal, on décale de 150px pour cacher*/
-webkit-transition: all 1s ; /*code pour la transition*/
-moz-transition: all 1s ; /*code pour la transition */
-ms-transition: all 1s ; /*code pour la transition */
-o-transition: all 1s ; /*code pour la transition */
transition: all 1s ; /*code pour la transition */
}

.box_side:hover {
left: 5px; /* Au survol on place au bon endroit */
}

Toute la partie depuis le "-webkit-transition" jusqu'au "transition", en fait c'est la même propriété, sauf que pour l'instant, les différents navigateurs ont besoin de mettre un préfixe devant pour que ça fonctionne Wink

Normalement ça devrait marcher Wink

Ca marche nikel ! Merci beaucoup ! ♥
Par contre, comment je peux faire pour y ajouter un bouton ? Par exemple "ouvrir", "fermer"... ?

Hum, le truc c'est que là l'action se déroule au survol, pas quand on clique ^^'
Est ce que tu peux me décrire ce que tu veux exactement ? Quelque chose au clic ou bien au survol ?
Si c'est juste au survol, je peux te proposer genre une image sur la gauche du bloc, avec écrit "Ouvre moi !", et qui disparait peu à peu quand on survol.
Quand tu arrêtes de survoler l'image réapparait.
Qu'en penses tu ?

Oh oui ! J'aime beaucoup !
Et est-ce que je pourrais mettre ce même effet sur une chatbox latérale par la suite ?

Pour une chatbox latérale, c'est un peu plus galère ^^'

En tout cas, pour l'effet là, ça serait tout simplement du css :

Code:: div.box_side:before {
content: "";
display: block;
position: absolute;
top: 0; /* on positionne en haut */
left: -22px; /* on décale vers la gauche, de la largeur de ton image */
width: 22px; /* largeur de ton image*/
height: 100%; /* Pour que ça prenne toute la hauteur*/
background: white url('http://i.imgur.com/RJZ2Bd0.jpg') no-repeat center;
}

div.box_side:hover:before {
opacity: 0;
}

Normalement si j'me trompe pas ça devrait marcher XDDD

Super ça marche !
Merci beaucoup en tout cas.
Je vais essayer de me mettre une chatbox latéral maintenant xD

Merci ♥

Cadres coulissants ?

Cadres coulissants ?

Sujets similaires

Sujets similaires

Partenaires Or