Sujets similaires

Bonjour ou Bonsoir, c'est encore moi, j'ai un autre problème qui je suis sûre sera résolu sans mal par vous chers codeurs alors que je me prends la tête depuis des heures dessus... Pour aller droit au but j'ai mis en place un script de transition pour les images de mon staff et comme l'indique le titre, le hic c'est que les images se placent les unes au-dessus des autres et j'aimerai les avoir aligner... En image cela donne :

Voici mon code pour le CSS :

Et mon code HTML :

Merci d'avance de l'aide que vous pourrez m'apporter

Bonjour,

Il s'agit en effet d'appliquer un display un peu particulier qui fera se comporter tes éléments comme des blocs (pour garder les propriétés intéressantes), mais qui s'aligneront comme des éléments de type inline.

C'est donc la valeur... inline-block qu'il te faut appliquer au display de tes div.anima.

Code:: .anima {
position: relative;
display: inline-block;
}

En ce qui concerne la compatibilité multi-navigateur, il me semble que cette propriété ne fonctionne pas sur IE 7 et inférieur. Si tu estime avoir besoin d'une compatibilité sur ces navigateurs, il est également possible de recourir à certaines astuces pour que cela fonctionne, cela dépend de ta politique.

J'en profite enfin pour te signaler qu'il y a une erreur majeur dans ton code : on ne peut appliquer le même id à deux éléments différents d'une même page. Pour cela, il faut donc transformer id="anima" en class="anima" dans ton HTML (libre à toi de combiner les class comme il se doit), et reporter ce changement dans ton CSS.

Tiens moi au courant si cela fonctionne ou non Wink

Salut,

Essaie d'ajouter à tes divs #anima :

Un float ->

Code:: #anima{position:relative;float:left;}

Ou si le float ne marche pas ->

Code:: #anima{position:relative;display:inline-block;}

(je n'ai pas le temps de tester désolé) Smile

Edit: Doublé Wink

Encore une fois vous me sauvez tout les deux ♥
J'avais bien essayer le display:inline mais ce fut un échec ._.
En revanche si j'enlève le id="anima", même en reportant le changement par une class dans le CSS ça ne m'affiche plus qu'une seule image :/
Et pour les compatibilités, c'est toujours un grand problème puisque mon script ne fonctionne que sous Chrome mais je n'y ai pas encre trouvé d'alternative.
Merci ♥

Etrange. Voici les modifications dont je te parlais, ça fonctionne pourtant chez moi :

Code:: <div class="anima">
<img src="http://i47.tinypic.com/2ylw9w8.png" />
<div class="details">
   <br /><span style="color:#dc788c;font-weight:bold;text-transform:uppercase;">Scarlet</span><br />
   FONDATRICE
</div>
</div>

<div class="anima">
<img src="http://i47.tinypic.com/2ylw9w8.png" />
<div class="details">
<br /><span style="color:#dc788c;font-weight:bold;text-transform:uppercase;">Pseudonyme</span><br />
   MODÉRATRICE
</div>
</div>

<div class="anima">
<img src="http://i47.tinypic.com/2ylw9w8.png" />
<div class="details">
   <br /><span style="color:#dc788c;font-weight:bold;text-transform:uppercase;">Pseudonyme</span><br />
   MODÉRATRICE
</div>
</div>

<div class="anima">
<img src="http://i47.tinypic.com/2ylw9w8.png" />
<div class="details">
   <br /><span style="color:#dc788c;font-weight:bold;text-transform:uppercase;">Pseudonyme</span><br />
   MODÉRATRICE
</div>
</div>

Code:: .anima{
position:relative;
display: inline-block;
width:80px;
height:45px;
border:2px solid #e4e5c4;
}

.anima img{
position:absolute;
top:0;
left:0;
z-index:0;
}

.anima .details{
opacity: .7;
position:absolute;
top:100;
left:150;
z-index:999;
-webkit-transform: scale(0);
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 700ms;
}

.anima:hover .details{
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 700ms;
}

.details{
display:inline;
width:80px;
height:45px;
background:#eaebd4;
color:#b5c29e;
text-align:center;
font-family:verdana;
font-size:10px;
}

Bonjour Gareki !
Ton sujet est-il toujours d'actualité ? Les réponses de Hiro et Espeon t'ont-t-elles satisfaite ?
Si nous n'avons pas de réponse dans 3 jours, le problème sera considéré comme résolu et archivé.
Merci de ta compréhension. Smile

Non il n'est plus d'actualité, mon problème est réglé ♥
Merci de m'avoir accordé de votre temps.

Hello !
D'acc-o-d'acc ! Dans ce cas je déplace dans les problèmes résolus !
Merci de ta réponse, à bientôt Again problème d'alignement 926145

Again problème d'alignement

Again problème d'alignement

Sujets similaires

Sujets similaires

Partenaires Or