Discussion :

[artenis]

Bonjour,

c'est un cas un peu particulier car je n'ai jamais rencontré ce problème auparavant:

j'ai un menu avec des div (sous-menu) contenues dans le menu mais placées sous le menu.ici pas de probleme,

en dessous du menu, j'ai un conteneur pour les informations et liens ,
dans ce conteneur j'ai une div en float left qui contient trois même images(les une en-dessous des autres) qui vont contenir chacun un texte .

les div et images se placent correctement sans css, particulier, de placement (la div d'information et de lien passe sans probleme sous la div du menu)
mais les textes contenus dans les images ne restent pas dans leur images respectives.
ces textes se placent en fonction des div de sous-menus.

voici mon code html et css:
css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
/* /////////////////////////ACCUEIL//////////////////////////////////// */
 
/* //////////////////header//////////////////// */
#contenu{width:1024px; margin:auto;}
#bandeau{width:100%; height:241px; background:url(images/header_v2.png) no-repeat; }
#menu{width:100%; height:80px; background:url(images/menu.png) no-repeat; margin-top:-10px;}
#choix-menu{width:100%; height:102px; border:px solid black; font-size:11pt; color:black; }
#choix-menu .m{ float:left; border:px solid black;  z-index:100; } 
 
#choix-menu .sm{display:none; z-index:10;}
 
#choix-menu #zm1{width:135px; height:253px;  margin:0.5% 0 0 0; }
	#choix-menu #list-menu1{width:105px; height:40px; padding:10px 0 0 30px;  text-align:center; }
	/*#choix-menu #s-m1{background:url(images/menu1.png); width:138px; height:233px; position:relative; top:-21px; left:0;  }*/
 
#choix-menu #zm2{width:140px; height:258px;  margin:0.5% 0 0 0.2%; }
	#choix-menu #list-menu2{width:140px; height:60px; text-align:center; padding:7px 0 0 0;}
	#choix-menu #s-m2{background:url(images/menu2.png); width:140px; height:205px; position:relative; top:-17px; left:3px;}
 
#choix-menu #zm3{width:120px; height:248px;  margin:0.5% 0 0 0.4%; }
	#choix-menu #list-menu3{width:120px; height:58px;  text-align:center;padding:15px 0 0 0;}
	#choix-menu #s-m3{background:url(images/menu3.png); width:120px; height:177px;  position:relative; top:-6px; left:0;}
 
#choix-menu #zm4{width:114px; height:228px;  margin:1% 0 0 0.3%;  }
	#choix-menu #list-menu4{ width:114px; height:49px; padding:15px 0 0 0; text-align:center; }
	#choix-menu #s-m4{background:url(images/menu4.png); width:114px; height:170px;  position:relative; top:3px; left:0;}
 
#choix-menu #list-menu5{width:120px; height:35px; margin:1.4% 0 0 0.1%; text-align:center; padding:25px 0 0 0;}
	/*#choix-menu #s-m5{background:url(images/menu5.png); width:191px; height:205px; position:absolute; top:301px; left:192px; }*/
 
 
 
/* /////////////////////////ACCUEIL//////////////////////////////////// */
 
/* //////////////////Contenu Accueil//////////////////// */
#contenu-accueil{width:100%; border:1px solid black;  z-index:-1;}
#local{width:150px; height:345px; border:1px solid black;  }
.ls{width:150px; height:100px; margin-bottom:15px; text-align:center; font-size:13pt;  background:url(images/bloc-degrade-blanc.png);}
.t-ls{text-align:center; }

html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<header>
 
 
    <div id="bandeau"></div>
    <div id="menu">
    	<div id="choix-menu">
 
            	<!--<div id="zm1" class="m"> -->
            		<div id="list-menu1" class="m">Accueil</div>
                <!--	<div id="s-m1" class="sm"></div>
                </div>-->
                <div id="zm2" class="m">
                	<div  id="list-menu2">Qui <br> sommes-nous ?</div>
                	<div id="s-m2" class="sm"></div>
                </div>
                <div id="zm3" class="m">    
                	<div id="list-menu3">Nos <br> activités</div>
                	<div id="s-m3" class="sm"></div>
                </div>
                <div id="zm4" class="m" >    
                	<div id="list-menu4">Les <br> actualités</div>
                	<div id="s-m4" class="sm"></div>
                </div>
                <div class="m" id="list-menu5">Contact</div>
            		<!--<div id="s-m5" class="sm"></div>-->
        </div>
    </div>
 
    </header>
 
<div id="contenu-accueil">
	<div id="local">
        	<div id="local1" class="ls"> 
            	<span class="t-ls">Lieu<br />& <br />environs</span>
            </div>
            <div id="local2" class="ls">
            	<span class="t-ls">Lieu <br />& <br />environs</span>
            </div>
            <div id="local3" class="ls">
            	<span class="t-ls">Lieu<br />& <br />environs</span>
            </div>
    </div>
</div>

en piece jointe l'exemple de ce que je voudrais (img1) et celui ou il y a le probleme (img2)