Sujets similaires

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:

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é ^^ ?

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é ^^

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

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

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}

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>


<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>

</table>



<form action="{S_LOGIN_ACTION}" method="post" name="form_login">

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



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

</form>


{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top">

<span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>


<br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>

</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>


<br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>


</span>
</td>
</tr>
</table>


<form action="{S_LOGIN_ACTION}" method="post" name="form_login">

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



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

</form>



<center><table cellspacing="0" cellpadding="0">
<tr>
   <td colspan="2" class="bloc3">
   
      <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">

   <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'>

{CHATBOX_BOTTOM}
<br clear="all" />

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


{AUTO_DST}


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

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*/

Oui c'est tout à fait ça mais regarde ce que ca me donne :

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

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.

je te l'ai envoyé par mp Smile

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

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 ?

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

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

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

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

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

Sujets similaires

Sujets similaires

Partenaires Or