Probleme de placement d'un texte contenu dans une div qui se place en fonction d'une div precedente

**artenis** · 07/06/2012, 23h53

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)

**mcoutant** · 08/06/2012, 10h08

Alors si j'ai bien compris ce que tu veux,

un menu, avec au passage de la souris (je suppose) un sous menu qui apparaît ?

**artenis** · 08/06/2012, 13h12

Le menu et sous menu ça va, la n'est pas le problème,

il s'agit du positionnement du texte dans les rectangles orange qui est décallé sous les div de sous menu, alors que les textes devraient chacun se situé dans un rectangle orange.

ça fait plus de 20 menu animé en jquery que je fais et n'ai jamais eu ce rpobleme de decallage .

petite précision j'utilise wordpress, la partie menu ce situe dans une page header.php

et la partie contenu "accueil" se situe dans index.php.

autre question, l'utilisation de "header" html5 peut-il être la cause de ce décallage ? au niveau du css

**mcoutant** · 08/06/2012, 13h24

La cause de ton décalage:

Code :

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

1
2
 
#choix-menu .m{float:left;}

Je serais toi, j'aurais fait le menu et sous menu comme ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<ul>
      <li>Accueil</li>
      <li>Qui <br> sommes-nous ?</li>
           <ul>
                 <li>premier lien du sous menu</li>
                 <li>deuxième lien du sous menu</li>
           </ul>
      <li>Activités</li>
           <ul>
                 ...
           </ul>
</ul>

Pour faire en ligne, tu applique un

Code :

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

1
2
3
4
 
li{
   display:inline;
}

De cette façon tu auras ton menu en ligne sans float:left,
après tu fais:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<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>

Et il n'y aura pas de problème normalement, je viens de te trouver un petit tuto pour que tu comprenne mieux regarde ceci

**artenis** · 08/06/2012, 14h02

un grand merci pour cette réponse,

cependant, sois je suis rouillé, soit il y a un bug, voici mon ul, li, peux tu me dire ce qui cloche ?

voici un imp ecran: pj

donc accueil et les autres doivent chacun être situé dans un espace du bandeau, pour le placement de ceux-ci a priori il n'y a pas de probleme mais pour le display inline ,je comprends pas:

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
/* /////////////////////////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:80px; border:1px solid black; font-size:11pt; color:black; }
 
#choix-menu .m{  border:px solid black;  z-index:100; border:1px solid black;} 
#choix-menu ul{ padding:0; list-style:none; border:1px solid black; display:inline;}
#choix-menu li{list-style:none; display:inline; border:1px solid black;}
#choix-menu .sm{display:none; z-index:10; border:1px solid black;}
 
#choix-menu #list-menu1{width:135px; height:40px; margin:16% 0 0 2%;  text-align:center; }
 
 
#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;}

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
<header>
 
 
    <div id="bandeau"></div>
    <nav>
    <div id="menu">
    	<div id="choix-menu">
 
            	<ul>
                    <li id="list-menu1" >Accueil</li>
 
                    <li id="zm2" >Qui <br> sommes-nous ?</li>
                        <ul id="s-m2" class="sm">
 
                        </ul>
                    </li>
                    <li id="zm3">Nos <br> activités</li>
                        <ul id="s-m3" class="sm">
 
                        </ul>
                    </li>
                    <li id="zm4">Les <br> actualités</li>
                        <ul id="s-m4" class="sm">
 
                        </ul>
                    </li>
 
                    <li  id="list-menu5">Contact</li>
            	</ul>
        </div>
    </div>
    </nav>
 
    </header>

**artenis** · 08/06/2012, 15h18

ta réponse était juste, cependant dans mon cas actuel, je n'ai aucun moyen de stylisé les li, (de plus mon menu horizontal a besoin d'être stylisé pour chaque bouton : en hauteur, largeur, padding, ).

n'existe t-il pas un moyen de stoper l'action du float-left pour le conteneur qui le précède ?

**mcoutant** · 08/06/2012, 15h27

Si pour rétablir le flux tu peux faire une div de class="cb":

Code :

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

1
2
 
.cb{clear:both;}

Comment ça tu ne peux pas stylisé les li ??

**artenis** · 08/06/2012, 15h44

peut-on appliquer un margin-top negatif "-200px" sur le clear both ?

**artenis** · 08/06/2012, 15h50

par contre je ne comprends toujours pas pourquoi un float-left situé dans un conteneur, peut affecter un conteneur précédent, j'ai toujours fait comme ça et ça a toujours fonctionner, la je suis dans l’incompréhension.

**mcoutant** · 08/06/2012, 15h50

Hmm jamais essayé mais ne le fait pas ce n'est pas propre, mais normalement en mettant le .cb tu n'a plus de problème il faut juste que tu mette tes sous menu en position relative.

**mcoutant** · 08/06/2012, 16h00

Tout simplement parce que le float fait sortir le bloc de son flux d'affichage, donc après un float pour rétablir on utilise clear:both.

**artenis** · 08/06/2012, 16h06

bon probleme resolu, mais uniquement grace a du bricolage,

dans le conteneur posant probleme j'ai du mettre ceci:

Code :

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

#contenu-accueil{ position:absolute;width:1024px;clear:both; }

faut encore que je regarde si c valide sur tout les principaux navigateurs.

en tout cas merci pour ton aide,

**artenis** · 08/06/2012, 16h09

Envoyé par mcoutant

Tout simplement parce que le float fait sortir le bloc de son flux d'affichage, donc après un float pour rétablir on utilise clear:both.

c'est sympas, mais vu que mon systeme marche avec 20 sites internet , je penche plus pour un ajout de code que j'utilise rarement ou un probleme de html
qui pose probleme

**mcoutant** · 08/06/2012, 16h19

Tu n'a jamais été confronté avec ce problème, mais parfois tu devra obligatoirement rétablir le flux pour que ton affichage soit correct je t'invite à lire l'article que je t'es partagé tu comprendra surement.

Probleme de placement d'un texte contenu dans une div qui se place en fonction d'une div precedente

Positionnement en CSS

Discussions similaires

Partager

Partager