Div en position absolute

Par Mandra, il y a 12 ans

Les bases HTML/CSS

Bonjour,

Je viens a vous pour un comportement css que je ne comprend pas. En gros j'ai une DIV en position relative qui contient un lien avec plusieurs <span> (chacune en position:relative et display:block). Jusque là, aucun soucis, les div se superpose c'est normal.

Or lorsque je tente d'appliquer un top, un botom, un right ou un left, rien ne bouge toutes mes <span> restent superposées.
Je vous met le code HTML et CSS pour y voir plus clair.

.Le CSS:

#caroussel-conteneur { width: 1024px; margin: auto; padding: 0px; position:relative; }
#caroussel-conteneur a span.caroussel-accueil-title{    display: block; position: absolute; top:0; left:0;}
#caroussel-conteneur a span.caroussel-accueil-l1{   display: block; position: absolute; top:10; left:0;}
#caroussel-conteneur a span.caroussel-accueil-l2{   display: block; position: absolute; top:20; left:0;}
#caroussel-conteneur a span.caroussel-accueil-l3{   display: block; position: absolute; top:30; left:0;}
#caroussel-conteneur a span.caroussel-accueil-l4{   display: block; position: absolute; top:40; left:0;}
#caroussel-conteneur a span.caroussel-accueil-l5{   display: block; position: absolute; top:50; left:0;}

A noter que: 

#caroussel-conteneur span.caroussel-accueil-l5

Ne fonctionne pas non plus.

.Le HTML: 

<div id="caroussel">
    <div id="caroussel-conteneur">
        <a href="" title="">
            <span class="caroussel-accueil-title">Titre</span>
            <span class="caroussel-accueil-l1">aaa</span>
            <span class="caroussel-accueil-l2">aaa</span>
            <span class="caroussel-accueil-l3">aaa</span>
            <span class="caroussel-accueil-l4">aaa</span>
            <span class="caroussel-accueil-l5">aaa</span>
            <span class="caroussel-accueil-l6">aaa</span>
        </a>                                
    </div>
</div>

Voilà, je bloque totalement. Si quelqu'un voit l'erreur, merci de me l'expliquer.

Brice.

EDIT:
Je viens de tenter une autre variante, toujours pareil. 

#caroussel-conteneur { width: 1024px; margin: auto; padding: 0px; position:relative; }
#caroussel-conteneur a { width:1024px; height:390px; display:inline-block; position:relative; }
#caroussel-conteneur a span { position: absolute; }
#caroussel-conteneur span.caroussel-accueil-title{ top:0; left:0;}
#caroussel-conteneur span.caroussel-accueil-l1{ top:10; left:0;}
#caroussel-conteneur span.caroussel-accueil-l2{ top:20; left:0;}
#caroussel-conteneur span.caroussel-accueil-l3{ top:30; left:0;}
#caroussel-conteneur span.caroussel-accueil-l4{ top:40; left:0;}
#caroussel-conteneur span.caroussel-accueil-l5{ top:80; left:0;}

3 réponses

antho07, il y a 12 ans

Bonjour
Je n'ai pas vraiment chercher à lire et comprendre ton code mais une première piste de recherche pour comprendre ce comportement:

Si tu utilises chrome (ou tout autre outil permettant d'afficher les styles appliqués aux élements du DOM) , regarde si les style css que tu as indiqués sont bien appliqués sur les éléments et pas écraser éventuellement par des styles appliqués plus tard par du js ou autres, dans ce cas si c'est bien le problème il faudra passer tes propriétés d styles en !important du genre:

.maclsse{
padding-right:10px !important;
font-size:12px !important;
}

Attention cependant à ne pas péter le comportement du système non plus

bien cordialement

Anthony

Mandra, il y a 12 ans

Merci Anthony pour ta réponse.
Aprés 2h de recherche j'ai finalement trouvé d'où provenait le soucis.
Quand je précisé les top et left, je ne mettais pas la valeur en px.

En gros il me fallait:

caroussel-conteneur span.caroussel-accueil-l5{ top:80px; left:0px;}

antho07, il y a 12 ans

Un truc pratique avec un inspecteur d'élément c'est que tu peux modifier le css appliqué à chaque élément directement sur la page, du coup tu aurais vu que en augmentant la valeur, rien ne se passait et aurait sans doute trouver plus vite le truc qui clochait.
M'enfin l'essentiel c'est de trouver^^
bonne continuation