Bonjour,


J'ai une image située à gauche, une autre située au centre.

Celle située à gauche est plus grande que la marge définie et malheureusement, au lieu d'aller se placer sous l'image situé au centre, elle donne à la marge de gauche sa taille et donc ne donne pas l'effet souhaité. J'ai essayé avec le style z-index, mais cela ne donne rien Smiley decu . Voici une partie du code CSS:

.gauche {
position: absolute;
margin-top:175px;
left: 0; 
background-color: #bddef6;
height: 65.7em;
width: 147px;
border-left: 1px solid #1c86d0;
border-bottom: 1px solid #1c86d0;
}

.centre {
margin-left: 147px; 
width: 600px;
height: 65.7em;
border-bottom: 1px solid #1c86d0;
background-color: #bddef6;
}

.main-texte { /*image située au centre qui doit apparaître dessus */
background-image:url('images/fond_01.png');
width: 600px;
height: 700px;
float: right;
}

.map { /*image dans la marge de gauche et qui doit être en dessous de l'image main-text */
float: left;
margin-top: 2em;
background-image:url('images/image_04.jpg');
width: 360px;
height: 192px;
position: fixed;
}


code html:

<div class="gauche">
<img src="images/image_04.jpg" class="map" alt="image mapmonde" width="360" height="192" style="z-index:2" /></div>

<div class="centre">
<img src="images/fond_01.png" class="main-texte" alt="fond du texte" width="600" height="700" style="z-index:1" /></div>


Avez-vous une petite idée??? je suis allée sur les pages de yoyo.... et sur beaucoup d'autres sites, sans vraiment de succès Smiley decu

Ce seraint sympa un petit coup de pouce Smiley cligne

Merci d'avance,

Koss
Modifié par koss70 (21 Apr 2006 - 21:00)
Hello,

D'un rapide cout d'oeil je dirais que la classe .gauche située en absolue fait cet effet.
Vu que l'absolu fait sortir ton 'div' du flux normal de la page, il se comporte de manière indépendante...

Vu que je ne suis pas un 'gourou' ou encore un 'pro', fais confirmer cela (ou alors teste...).

Enfin, puis-je me permettre (si je ne me suis pas trompé), la lecture du tuto suivant ?

G.
Bonjour groumphy.

Merci pour ta réactivité!
J'ai essayé de retirer dans la .classe gauche position absolue, mais ce fut un peu catastrophique comme résultat Smiley eek .

Si je ne trouve pas la solution sur le lien que tu m'a recommandé, je vais voir sur celui-ci: css_astuces.batraciens, faute de mieux....

Smiley cligne