Légère modification d'un QEEL [Résolu] Bouton_activeLégère modification d'un QEEL [Résolu] Bouton_hoverLégère modification d'un QEEL [Résolu] Fb-hoverLégère modification d'un QEEL [Résolu] Fb-active
AccueilForumÉquipe 
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
Légère modification d'un QEEL [Résolu] EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Légère modification d'un QEEL [Résolu] EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Légère modification d'un QEEL [Résolu] EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Légère modification d'un QEEL [Résolu] EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Légère modification d'un QEEL [Résolu] EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Légère modification d'un QEEL [Résolu] EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Légère modification d'un QEEL [Résolu] EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Légère modification d'un QEEL [Résolu] EmptySam 11 Fév 2023, 06:04 par Krager


CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

Légère modification d'un QEEL [Résolu]

Voir le sujet précédent Voir le sujet suivant Aller en bas 
chouchounette
chouchounette
{ Membre }
{ Membre }

Féminin Messages : 52



Légère modification d'un QEEL [Résolu] Empty

Merci d'avance Smile
Bonjour,

alors je m'explique, sur mon QEEL actuel, toutes les images correspondant aux groupes se trouvent en bas en ligne. Hors je ne veux pas toucher à la longueur du QEEL et je vais avoir 8 groupes.

Alors j'aurai aimé avoir 4 images en haut et 4 images en bas du QEEL.

Je vous laisse mon template :




et mon CSS :




De plus j'aimerai que les images de mes groupes aient cette forme Smile

Spoiler:
MessageSujet: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptyJeu 12 Déc 2013, 14:28
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Légère modification d'un QEEL [Résolu] Empty
Je post pour avoir accès au contenu sous hide.

EDIT :

Citation :
alors je m'explique, sur mon QEEL actuel, toutes les images correspondant aux groupes se trouvent en bas en ligne. Hors je ne veux pas toucher à la longueur du QEEL et je vais avoir 8 groupes.

Alors j'aurai aimé avoir 4 images en haut et 4 images en bas du QEEL.

Pourrais ton avoir une screen ou mieux un lien ? Pourrais tu rajouter un schéma ? Par ce que là sans exemple concret, c'est assez vague.

Pourrais tu aussi m'expliquer pourquoi tu rencontres une difficulté (ce qui pose problème) comme ça, cela évitera que je te propose ce que tu as déjà essayé ^^ ?
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptyVen 13 Déc 2013, 07:33
Revenir en haut Aller en bas
chouchounette
chouchounette
{ Membre }
{ Membre }

Féminin Messages : 52



Légère modification d'un QEEL [Résolu] Empty
Et voilà l'état actuel Légère modification d'un QEEL [Résolu] Captur10

Ce qui pose problème c'est le HTML je ne maitrise pas du tout, hormis avoir rajouter les deux dernières images c'est tout ce que j'ai su faire. Je n'ai rien tenté de peur de tout déréglé ^^
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptyVen 13 Déc 2013, 14:45
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Légère modification d'un QEEL [Résolu] Empty
Si je comprends bien ce sont des images qui au survol affichent le nom du groupe ?
Et tu en veux quatre en haut, quatre en dessous, centrées ? Toutes les images auront la même forme (celle de l'exemple en haut) ? Pour les effet, tu tiens à ce que le sens continu d'être différent ou bien tu préfères que ce soit toujours vers le haut / vers le bas / vers la gauche / vert la droite ?
Je te demande car toutes ces petites questions, car il y a une amélioration possible, qui te permettrait de gérer l'ajout d'image bien plus facilement Wink
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptyVen 13 Déc 2013, 18:21
Revenir en haut Aller en bas
chouchounette
chouchounette
{ Membre }
{ Membre }

Féminin Messages : 52



Légère modification d'un QEEL [Résolu] Empty
Oui c'est exactement ça ! Smile

Oui 4 en haut et 4 en bas centrées. Ce seront des gifs de cette taille et j'aimerai le meme effet pour la forme

Code:
<img src="https://24.media.tumblr.com/tumblr_m7emvug4Bz1qkjsuxo1_500.gif" width="150px" style="-moz-box-shadow:0px 0px 2px black;padding:5px;border-radius:110px 50px/30px 130px;">

Légère modification d'un QEEL [Résolu] Captur11


Pour l'effet de sens lors du survol ca m'est égal Smile
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptyVen 13 Déc 2013, 18:28
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Légère modification d'un QEEL [Résolu] Empty
Dis moi si c'est quelque chose comme ça que tu cherches (après les tailles, tu peux les régler dans le CSS).

Template :
Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN message_admin_titre -->
 <tr>
 <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
 </tr>
 <!-- END message_admin_titre -->
 <!-- BEGIN message_admin_txt -->
 <tr>
 <td class="row1" rowspan="3" align="center" valign="middle">
 <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
 </td>
 </tr>
 <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <!-- BEGIN switch_fb_connect_no -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td class="row1" align="center">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span>
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect_no -->

 <!-- BEGIN switch_fb_connect -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td valign="top" width="100%" class="row1" align="center">
 <table width="100%">
 <tr>
 <td width="55%" valign="middle" align="right">
 <table class="right">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span>
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 <td width="10%" align="center" valign="middle">
 <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
 </td>
 <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="50%" valign="top">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
 <!-- END switch_delete_cookies -->
 </span>
 </td>
 <td width="50%" align="right">
 <span class="gensmall">
 <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
 <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
 <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
 <!-- BEGIN switch_on_index -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 <!-- END switch_delete_cookies -->
 <!-- END switch_on_index -->
 </span>
 </td>
 </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <!-- BEGIN switch_fb_connect_no -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td class="row1" align="center">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span>
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect_no -->

 <!-- BEGIN switch_fb_connect -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td valign="top" width="100%" class="row1" align="center">
 <table width="100%">
 <tr>
 <td width="55%" valign="middle">
 <table class="right">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span>
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 <td width="10%" align="center" valign="middle">
 <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
 </td>
 <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<center><table cellspacing="0" cellpadding="0">
   <tr>
      <td colspan="2" class="bloc3">
      <!-- LES GROUPES EN HAUT -->
         <div class="slides" >
            <div>
               <p><br><br>I got the power</p>
               <img alt="Mon image" src="http://www.bloggif.com/output/3/0/3082ee910e89ea6054c58ef654090572.gif?1386871143" />
            </div>
         </div>
         <div class="slides" >
            <div>
               <p><br><br>Who run the world</p>
               <img alt="Mon image" src="http://nsa22.casimages.com/img/2012/03/08/120308102825698853.png" />
            </div>
         </div>
         <div class="slides" >
            <div>
              <p><br><br>I'm sexy & I know it</p>
              <img alt="Mon image" src="http://nsa21.casimages.com/img/2012/03/08/120308102941214804.png" />
            </div>
         </div>
         <div class="slides" >
            <div>
              <p><br><br>Uptown guys</p>
              <img alt="Mon image" src="http://nsa22.casimages.com/img/2012/03/08/120308103042339792.png" />
            </div>
         </div>
      </td>
   </tr>
<tr><td>
  <center><div class="bloc1"><CENTER><div class="titq">Les Statistiques</div></CENTER><span class="gensmall"><span id="kumao">{TOTAL_POSTS}</span><script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Nos membres ont posté un total de/,"Nos monstres se sont déjà bien amusés puisqu'ils ont versé ");</script><script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/messages/,"litres de sang");</script>. <span id="matt">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Il y a ");</script><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"personnes à Lima");</script><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membre enregistré/,"personne à Lima");</script>. <span id="matt">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/L'utilisateur enregistré le plus récent/,"Le dernier loser à avoir reçu un slushy est");</script>. {TOTAL_USERS_ONLINE}<br><br>{LOGGED_IN_USER_LIST}</span></div></center></td><td>
                             
               
                     
   
  <center><div class="bloc2"><CENTER><div class="titq">Les Dernières Visites</div></CENTER><table width="100%" border="0" cellpadding="10" cellspacing="1">
                              <tr>
                                <td style="text-align: center; padding-top:0" width="100%">
                                  {L_CONNECTED_MEMBERS}
                                </td>
                              </tr>
      </table></div></center>
                   
     
    </td>
  </tr>
  <tr>
     <td class="bloc3" colspan="2">
   <!-- LES GROUPES EN BAS -->
      <div class="titq">Les Groupes</div>
      <div class="slides">
         <div>
            <p><br><br>I feel pretty</p>
            <img alt="Mon image" src="http://nsa21.casimages.com/img/2012/03/08/120308103144605287.png" />
         </div>
      </div>
      <div class="slides">
         <div>
            <p><br><br>I'm sexy & I know it</p>
            <img alt="Mon image" src="http://nsa21.casimages.com/img/2012/03/08/120308102941214804.png" />
         </div>
      </div>
      <div class="slides">
         <div>
            <p><br><br>I'm sexy & I know it</p>
            <img alt="Mon image" src="http://nsa21.casimages.com/img/2012/03/08/120308102941214804.png" />
         </div>
      </div>      
   </td>
  </tr>
    </table>
    <link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
 <tr>
 <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
 <td><span class="gensmall">{L_NEW_POSTS}</span></td>
 <td></td>
 <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
 <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
 <td>  </td>
 <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
 <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
 </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

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

CSS :
Code:

div.slides div {
   border-radius:110px 50px/30px 130px;
   background: #fff;
   height: 80px; /* Égal à la hauteur de l'image */
   margin: 10px;
   overflow: hidden;
   font-size : 10px ;
   color : #240404 ;
   font-family : "Ubuntu Condensed" ;
   position: relative;
   width: 100px; /* Égal à la largeur de l'image */
}


div.slides div p {
    margin: auto;
    text-align: center;
    width: 90%;
}


div.slides {
   display: inline-block;
}

div.slides div img {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

div.slides div:hover img {
  transform: translateY(100px);
  -moz-transform: translateY(100px);
  -o-transform: translateY(100px);
  -webkit-transform: translateY(100px);
}

/*FIN*/
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptySam 14 Déc 2013, 09:08
Revenir en haut Aller en bas
chouchounette
chouchounette
{ Membre }
{ Membre }

Féminin Messages : 52



Légère modification d'un QEEL [Résolu] Empty
Oui c'est tout à fait ça mais regarde ce que ca me donne :

Légère modification d'un QEEL [Résolu] Captur12
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptySam 14 Déc 2013, 09:32
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Légère modification d'un QEEL [Résolu] Empty
Est ce que tu peux me donner le lien du forum, par ce que sur mon forum test avec ce template et css cela ne fait pas le problème.
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptySam 14 Déc 2013, 09:55
Revenir en haut Aller en bas
chouchounette
chouchounette
{ Membre }
{ Membre }

Féminin Messages : 52



Légère modification d'un QEEL [Résolu] Empty
je te l'ai envoyé par mp Smile
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptySam 14 Déc 2013, 10:31
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Légère modification d'un QEEL [Résolu] Empty
Ah oui, je suis bête ^^

Remplace :
Code:
.titq {
letter-spacing: -1pt ;
text-shadow : 0px 0px 1px black ;
color : #DEC38A ;
font-style : italic ;
font-size : 30px ;
font-family : "Rochester", cursive;
margin-top : -7px ;
text-align : center ;
height : 3px ;
margin-bottom : -10px ;
  -moz-transform : rotate(0deg) ;
-moz-transition-property : background, border, -moz-transform ;
-moz-transition-duration : 1s ;
}

Par :
Code:
.titq {
letter-spacing: -1pt ;
text-shadow : 0px 0px 1px black ;
color : #DEC38A ;
font-style : italic ;
font-size : 30px ;
font-family : "Rochester", cursive;
margin-top : -7px ;
text-align : center ;
  -moz-transform : rotate(0deg) ;
-moz-transition-property : background, border, -moz-transform ;
-moz-transition-duration : 1s ;
}
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptySam 14 Déc 2013, 10:36
Revenir en haut Aller en bas
chouchounette
chouchounette
{ Membre }
{ Membre }

Féminin Messages : 52



Légère modification d'un QEEL [Résolu] Empty
Effectivement ça marche mieux comme cela ! Merci beaucoup

Je me demandais juste s'il n'y avait pas moyen qu'ils soient un peu mieux alignés ?
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptySam 14 Déc 2013, 10:41
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Légère modification d'un QEEL [Résolu] Empty
Hum, tu utilises quoi comme navigateur ? Car je viens de tester sur Firefox, Chrome et Internet Explorer (tous mis à jours) et ça marche sans problèmes au niveau de l'alignement.

Au fait, je sais pas si tu l'as fait, mais tu peux enlever de ton CSS tout ça :
Code:

#slides div {
  background: #fff;
  height: 85px; /* Égal à la hauteur de l'image */
  margin: 10px;
        overflow: hidden;
        font-size : 10px ;
        color : #19B338;
        font-family : "Ubuntu Condensed" ;
  position: relative;
        -moz-border-radius : 50px ;
  width: 85px; /* Égal à la largeur de l'image */
}

#slides div img {
  left: 0;
  position: absolute;
  top: 0;
        -moz-border-radius : 50px ;
        border : 4px solid #19B338 ;
  transition: transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

#slides div:hover img {
  transform: translateX(-100px); /* Valeur négative égale à la hauteur de l'image */
  -moz-transform: translateX(-100px);
  -o-transform: translateX(-100px);
  -webkit-transform: translateX(-100px);
}

#slides2 div {
  background: #fff;
  height: 85px; /* Égal à la hauteur de l'image */
  margin: 10px;
  overflow: hidden;
        font-size : 10px ;
        color : #A01ACC ;
        font-family : "Ubuntu Condensed" ;
  position: relative;
        -moz-border-radius : 50px ;
  width: 85px; /* Égal à la largeur de l'image */
}


#slides2 div img {
  left: 0;
  position: absolute;
  top: 0;
        -moz-border-radius : 50px ;
        border : 4px solid #A01ACC ;
  transition: transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

#slides2 div:hover img {
  transform: translateY(-100px); /* Valeur négative égale à la hauteur de l'image */
  -moz-transform: translateY(-100px);
  -o-transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
}
#slides3 div {
  background: #fff;
  height: 85px; /* Égal à la hauteur de l'image */
  margin: 10px;
  overflow: hidden;
        font-size : 10px ;
        color : #240404 ;
        font-family : "Ubuntu Condensed" ;
  position: relative;
        -moz-border-radius : 50px ;
  width: 85px; /* Égal à la largeur de l'image */
}


#slides3 div img {
  left: 0;
  position: absolute;
  top: 0;
        -moz-border-radius : 50px ;
        border : 4px solid #240404 ;
  transition: transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

#slides3 div:hover img {
  transform: translateY(+100px); /* Valeur négative égale à la hauteur de l'image */
  -moz-transform: translateY(+100px);
  -o-transform: translateY(+100px);
  -webkit-transform: translateY(+100px);
}

#slides4 div {
  background: #fff;
  height: 85px; /* Égal à la hauteur de l'image */
  margin: 10px;
  overflow: hidden;
        font-size : 10px ;
        color : #5093C7 ;
        font-family : "Ubuntu Condensed" ;
  position: relative;
        -moz-border-radius : 50px ;
  width: 85px; /* Égal à la largeur de l'image */
}


#slides4 div img {
  left: 0;
  position: absolute;
  top: 0;
        -moz-border-radius : 50px ;
        border : 4px solid #5093C7 ;
  transition: transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

#slides4 div:hover img {
  transform: translateX(+100px); /* Valeur négative égale à la hauteur de l'image */
  -moz-transform: translateX(+100px);
  -o-transform: translateX(+100px);
  -webkit-transform: translateX(+100px);
}
#slides5 div {
  background: #fff;
  height: 80px; /* Égal à la hauteur de l'image */
  margin: 10px;
  overflow: hidden;
        font-size : 10px ;
        color : #E64A4A ;
        font-family : "Ubuntu Condensed" ;
  position: relative;
        -moz-border-radius : 50px ;
  width: 80px; /* Égal à la largeur de l'image */
}


#slides5 div img {
  left: 0;
  position: absolute;
  top: 0;
        -moz-border-radius : 50px ;
        border : 4px solid #E64A4A ;
  transition: transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

#slides5 div:hover img {
  transform: translateY(-100px); /* Valeur négative égale à la hauteur de l'image */
  -moz-transform: translateY(-100px);
  -o-transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
}


#slides6 div {
  background: #fff;
  height: 80px; /* Égal à la hauteur de l'image */
  margin: 10px;
  overflow: hidden;
        font-size : 10px ;
        color : #240404 ;
        font-family : "Ubuntu Condensed" ;
  position: relative;
        -moz-border-radius : 50px ;
  width: 80px; /* Égal à la largeur de l'image */
}


#slides6 div img {
  left: 0;
  position: absolute;
  top: 0;
        -moz-border-radius : 50px ;
        border : 4px solid #240404 ;
  transition: transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

#slides6 div:hover img {
  transform: translateY(+100px); /* Valeur négative égale à la hauteur de l'image */
  -moz-transform: translateY(+100px);
  -o-transform: translateY(+100px);
  -webkit-transform: translateY(+100px);
}


#slides7 div {
  background: #fff;
  height: 80px; /* Égal à la hauteur de l'image */
  margin: 10px;
  overflow: hidden;
        font-size : 10px ;
        color : #240404 ;
        font-family : "Ubuntu Condensed" ;
  position: relative;
        -moz-border-radius : 50px ;
  width: 80px; /* Égal à la largeur de l'image */
}


#slides7 div img {
  left: 0;
  position: absolute;
  top: 0;
        -moz-border-radius : 50px ;
        border : 4px solid #240404 ;
  transition: transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

#slides7 div:hover img {
  transform: translateY(+100px); /* Valeur négative égale à la hauteur de l'image */
  -moz-transform: translateY(+100px);
  -o-transform: translateY(+100px);
  -webkit-transform: translateY(+100px);
}
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptySam 14 Déc 2013, 10:47
Revenir en haut Aller en bas
chouchounette
chouchounette
{ Membre }
{ Membre }

Féminin Messages : 52



Légère modification d'un QEEL [Résolu] Empty
Oh oui je viens de voir, j'étais sous safari c'est pour ça que ca semblait pas aligné.

Et oui j'ai enlevé tout ça, merci le code est beaucoup plus simple ainsi c'est super.

Merci beaucoup pour ton aide !  Légère modification d'un QEEL [Résolu] 577704309 
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] EmptySam 14 Déc 2013, 10:49
Revenir en haut Aller en bas
Contenu sponsorisé




Légère modification d'un QEEL [Résolu] Empty
MessageSujet: Re: Légère modification d'un QEEL [Résolu]   Légère modification d'un QEEL [Résolu] Empty
Revenir en haut Aller en bas
 

Légère modification d'un QEEL [Résolu]

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

 Sujets similaires

-
» [Résolu]Probllème de Qeel - Modification non appliquées :(
» Modification de catégories & de QEEL; help ?
» [résolu]modification de code
» modification des noms de mon qeel
» Modification possible sur un CSS [Résolu]

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-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

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 | Forumactif.com