Problème de menu flottant

**totche123** · 03/09/2011, 17h06

Bonjour a tous,
Je suis en train de créer un site pour une association (c'est mon premier site, je me suis basé sur des cours trouvés sur internet). J'ai réalisé une première maquette de démonstration parfaitement fonctionnelle. On m'a demandé de modifier le menu (qui est flottant) et la problème le corps du site se trouve décalé par le bas. J'ai essayé plusieurs modifs impossible de réaligner le menu et le corps du site. J'ai donc retaper tous le site avec les modifs, tout fonctionne, mais a peine je tente de changer l'aspect du menu et tout se redécale.
Je cherche la solution depuis pas mal de temps merci d'avance.

Voici le html du menu :

Code html :

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
 <div id="menu">
    <div class="rubrique">
      <h3>Acceuil</h3>
        <ul>
          <li><a href="ct/essai.html">Sangha M-P</a></li>
          <li><a href="ct/news.html">Thay</a></li>
          <li><a href="ct/groupe.html">Le village des pruniers</a></li>
          <li><a href="ct/photo.html">Nous contacter</a></li>        
        </ul>        
    </div>
    <div class="Article">
      <h3>Sangha</h3>
        <ul>
          <li><a href="ct/pratique.html">Aix en Provence</a></li>
          <li><a href="ct/sangha.html">La Ciotat</a></li>
          <li><a href="ct/chant.html">Marseille Aygalades</a></li>
          <li><a href="ct/chant.html">Marseille centre</a></li>
          <li><a href="ct/chant.html">Miramas</a></li>
        </ul> 
    </div>
    <div class="pratiquer">
      <h3>Pratiquer</h3>
        <ul>
          <li><a href="ct/pratique.html">La pleine conscience</a></li>
          <li><a href="ct/sangha.html">Texte de pratique</a></li>
          <li><a href="ct/chant.html">Chant du village</a></li>
                  </ul> 
                  <div/>     
    <div class="lien">
       <h3>Partenaires</h3>
         <ul>

Et voici le css complet du site

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
body
{
width: 760px;
background-image: url("image/brnbck18.gif");
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
#banniere
{
width: 760px;
height: 97px;
margin-bottom: 20px;
background-image: url("image/entete1.jpg");
}
#corps
{
 
width: 525px;
height: 750px;
margin-left: 220px;
padding: 7px;
background-image: url("image/fondfiles.jpg");
color: #9f550a;
}
#menu
{
float: left;
width: 200px;
height: 750px;
background-image: url("image/fondfiles.jpg");
}
.rubrique h3
{
text-indent: 10px;
color: #634a42;
}
.rubrique a
{
text-decoration: none;
color: #9f550a;
}
.rubrique ul
{
color: #634a42;
}
.Article h3
{
text-indent: 10px;
color: #634a42;
}
.Article a
{
text-decoration: none;
color: #9f550a;
}
.Article ul
{
color: #634a42;
}
.pratiquer h3
{
text-indent: 10px;
color: #634a42;
}
.pratiquer a
{
text-decoration: none;
color: #9f550a;
}
.pratiquer ul
{
color: #634a42;
}
.lien h3
{
text-indent: 10px;
color: #634a42;
}
.lien a
{
text-decoration: none;
color: #9f550a;
}
.lien ul
{
color: #634a42;
}
 
 
#corps h2
{
color: #634a42;
}
#corps a
{
color: #634a42;
}
#pied
{
width: 760px;
height: 20px;
background-image: url("image/fondfiles.jpg");
}
#pied p
{
color: #634a42;
text-indent: 170px;
}

**Atomya Rise** · 04/09/2011, 09h44

As-tu essayé de mettre un clear:both à la fin de ton menu pour supprimer les floats ?

Code html :

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

1
2
3
4
5
 
<div> <!-- ouverture de ton menu en float -->
blablabla <!-- ton menu -->
<div style="clear:both;"></div> <!--- suppression des flottants --->
</div> <!-- fermeture tu menu -->

**totche123** · 04/09/2011, 10h27

Cela n'a rien changé. Par contre j'ai remarqué que le corps du site se décaler par le bas au niveau de la dernière ligne du menu.

**Atomya Rise** · 04/09/2011, 10h28

Aurais-tu un screenshot ou un lien afin de nous montrer ?

**totche123** · 04/09/2011, 17h58

Le CSS fonctionne
http://imageshack.us/photo/my-images/143/site1m.png
Après modification du menu
http://imageshack.us/photo/my-images/153/site2s.png

**Atomya Rise** · 04/09/2011, 18h12

Quand tu modifies ton menu, tu dois bien changé quelque chose de spécifique pour que celui-ci refonctionne ?
Toutes les balises ouvertes sont-elles bien refermées ?
Là, ton contenu ne se situe pas en bas de ta div menu, mais en dessous de la rubrique partenaire... qu'y a t'il à cette endroit ?
Comment est positionné ton contenu ?
Toutes les suppressions de flottant sont elles bien appliqué ?

La construction de ton html aurait été souhaité entièrement pas juste un morceau du menu.... Car là, difficile à dire avec se peux d'information....