Cadres coulissants ? Bouton_activeCadres coulissants ? Bouton_hoverCadres coulissants ? Fb-hoverCadres coulissants ? Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Cadres coulissants ? EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Cadres coulissants ? EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Cadres coulissants ? EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Cadres coulissants ? EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Cadres coulissants ? EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Cadres coulissants ? EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Cadres coulissants ? EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Cadres coulissants ? EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -28%
-28% Machine à café avec broyeur ...
Voir le deal
229.99 €

Partagez
 

Cadres coulissants ?

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://falonasynae.forumactif.com
Lyo
{ Membre }
{ Membre }

Féminin Messages : 65



Cadres coulissants ? Empty
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.
MessageSujet: Cadres coulissants ?   Cadres coulissants ? EmptyVen 28 Juin 2013, 06:05
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Cadres coulissants ? Empty
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)
MessageSujet: Re: Cadres coulissants ?   Cadres coulissants ? EmptyVen 28 Juin 2013, 16:07
Revenir en haut Aller en bas
http://falonasynae.forumactif.com
Lyo
{ Membre }
{ Membre }

Féminin Messages : 65



Cadres coulissants ? Empty
Je parle bien d'infobulles et pas de widgets ^^
Merci d'avoir répondu ♥
MessageSujet: Re: Cadres coulissants ?   Cadres coulissants ? EmptySam 29 Juin 2013, 16:53
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Cadres coulissants ? Empty
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) !
MessageSujet: Re: Cadres coulissants ?   Cadres coulissants ? EmptyDim 30 Juin 2013, 10:20
Revenir en haut Aller en bas
http://falonasynae.forumactif.com
Lyo
{ Membre }
{ Membre }

Féminin Messages : 65



Cadres coulissants ? Empty
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:
<!-- BEGIN html_validation -->
<!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>
<!-- END html_validation -->
               </div>
            </div>
            <!-- BEGIN switch_footer_links -->
            <div align="center">
               <div class="gen">
                  <!-- BEGIN footer_link -->
                     <!-- BEGIN switch_separator --> | <!-- END switch_separator -->
                     <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>
                  <!-- END footer_link -->
               </div>
            </div>
            <!-- END switch_footer_links -->
         </div>
         {PROTECT_FOOTER}
      </td>
   </tr>
</table>

<!-- BEGIN switch_facebook_login -->
<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>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<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>
<!-- END switch_facebook_logout_TMP -->

<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>
MessageSujet: Re: Cadres coulissants ?   Cadres coulissants ? EmptyLun 01 Juil 2013, 05:14
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Cadres coulissants ? Empty
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
MessageSujet: Re: Cadres coulissants ?   Cadres coulissants ? EmptyLun 01 Juil 2013, 10:22
Revenir en haut Aller en bas
http://falonasynae.forumactif.com
Lyo
{ Membre }
{ Membre }

Féminin Messages : 65



Cadres coulissants ? Empty
Ca marche nikel ! Merci beaucoup ! ♥
Par contre, comment je peux faire pour y ajouter un bouton ? Par exemple "ouvrir", "fermer"... ?
MessageSujet: Re: Cadres coulissants ?   Cadres coulissants ? EmptyLun 01 Juil 2013, 15:39
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Cadres coulissants ? Empty
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 ?
MessageSujet: Re: Cadres coulissants ?   Cadres coulissants ? EmptyLun 01 Juil 2013, 20:08
Revenir en haut Aller en bas
http://falonasynae.forumactif.com
Lyo
{ Membre }
{ Membre }

Féminin Messages : 65



Cadres coulissants ? Empty
Oh oui ! J'aime beaucoup !
Et est-ce que je pourrais mettre ce même effet sur une chatbox latérale par la suite ?
MessageSujet: Re: Cadres coulissants ?   Cadres coulissants ? EmptyMar 02 Juil 2013, 05:27
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Cadres coulissants ? Empty
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
MessageSujet: Re: Cadres coulissants ?   Cadres coulissants ? EmptyMar 02 Juil 2013, 06:35
Revenir en haut Aller en bas
http://falonasynae.forumactif.com
Lyo
{ Membre }
{ Membre }

Féminin Messages : 65



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

Merci ♥
MessageSujet: Re: Cadres coulissants ?   Cadres coulissants ? EmptyMar 02 Juil 2013, 08:07
Revenir en haut Aller en bas
Contenu sponsorisé




Cadres coulissants ? Empty
MessageSujet: Re: Cadres coulissants ?   Cadres coulissants ? Empty
Revenir en haut Aller en bas
 

Cadres coulissants ?

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Finitions des cadres
» Bordure et cadres
» Textes superposés & cadres changés.
» Aide arrondi cadres de l'index
» Textes dépassant des cadres arrondis

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit