Problème de menu flottant [Résolu]

[totche123]

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 :

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 :

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]

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

Code html :

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]

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]

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

[totche123]

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]

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....

[totche123]

Voici le html complet de la page.

Les modifications apportées au menu ne sont que l'ajout d'une nouvelle classe ou de puce supplémentaire.

J'ai retapé plusieurs fois ce code en entier (html + CSS) dans un nouveau dossier, la première fois tout fonctionne, mais dés que je modifie une donnée du menu, la page ressemble au second screen, donc ce n'est pas un problème de balise sinon le problème ne reviendrait pas lors de la nouvelle écriture.

Je ne connais pas la suppression des flottants, ça n'était pas abordé dans les cours sur lesquelles je me suis appuyé, je vais chercher des infos.

Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Sangha Marseille provence</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="ct/essai.css" />
   </head>
   <body>
    <div id="banniere">
    </div>
    <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>
           <li><a href="http://villagedespruniers.net/"> Le village des pruniers</a></li>
           <li><a href="http://sanghardeche.pagesperso-orange.fr/Sangha_de_lArdeche/Accueil.html">Sangha de l'ardéche</a></li>
         </ul>
 
    </div>
        </div>
    <div id="corps">
    <h2>Sangha Marseille provence</h2>
    <p>Bienvenue sur le site de la sangha Marseille provence. <br />
    Ce site est actuellement vide de contenu car il s'agit d'une maquette. 
    Mais pour que la lecture de cette maquette nous soit agréable, je dépose un petit texte de <a href="http://www.thich-nhat-hanh.fr/"><strong>Thich Nath Hanh</strong></a><br />
    <h2>Texte de Thay</h2>
    Certains jours, il nouss arrive de nous sentir épuisés, vidés, sans joie, pas vraiment nous mêmes. Ces jours-là, si nous essayons d'établir le contact avec les autres, nos efforts sont inutiles. Plus nous essayons, plus nous échouons. Dans ce cas, il vaut mieux renoncer à toute tentative de contact avec l'extérieur et revenir 
    à un contact avec nous mêmes et à <em>l'état de solitude.</em> Fermer la porte à l'extérieur social, faire retour en nous-mêmes et pratiquer la respiration consciente, en observant profondément ce qui se passe à l'intérieur et autour de nous. Nous acceptons alors tous les phénomènes que nous observons, leur faisons un petit salut et nous leur sourions.
    Il est bon aussi de faire des choses simples comme : marcher, s'assoir pour méditer, laver nos vétements, nettoyer le sol, faire le thé avec la pleine conscience. En agissant ainsi, c'est la richesse de notre vie spirituellle que nous restaurons.
        </p>
    </div> 
    <div id="pied">
    <p>Propriétés de Sangha Marseille provence 2011</p>
    </div>  
   </body>
</html>

[fab256]

regarde a la ligne 38 de ton code

Code :

 <div/>

au lieu de

Code :

 </div>

[totche123]

Merci beaucoup, j'enrage d'avoir perdu autant de temps sur une petite erreur comme celle la.

Désolé de vous avoir fait perdre votre temps a vous.

Merci beaucoup.

[fab256]

Y'a aussi des choses a dire sur ton code CSS, par exemple tu n'est pas obligé de créer chaque fois une nouvelle classe pour chaque nouveau menu. le CSS de ton menu peux se résumer en

Code :

1
2
3
#menu h3 { text-indent: 10px; color: #634a42; }
#menu a   { text-decoration: none; color: #9f550a;}
#menu ul  { color: #634a42;}

[totche123]

Merci pour le tuyau, je vais me pencher dessus. C'est la première fois que je me lance dans la création de site ce qui explique mes erreurs de débutant.