Mise en page incorrecte

**Ex-floodeur** · 21/04/2008, 21h57

Bonsoir,

comme vous le voyez sur cette page : http://www.animecdz.com/V6/styles.html, sous firefox, le menu déborde sur le bloc de navigation (là où il y a le bouton RSS) et sous IE, la mise en en page est totalement farfelue.

Ci-dessous, le code de la page :

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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Animecdz v6.0</title>
</head>
<body>
    <div align="center">
 
        <div id="bandeau">
        <img src="http://www.animecdz.com/images/design/elysion/hyoga.jpg" alt="Bienvenue sur Animecdz !!" />
        </div>
 
        <div id="topmenu">
 
        <ul id="menuDeroulant">
         <li><a href="etape5.html">Accueil</a></li>        
         <li>
          <a href="#">Saint Seiya</a>
          <ul class="sousMenu">
           <li><a href="#">Résumés</a></li>
           <li><a href="#">Personnages</a></li>
           <li><a href="#">DVDs</a></li>
          </ul>
         </li>
         <li><a href="etape2.html">Les films</a></li>
         <li>
          <a href="#">Saint Seiya G</a>
          <ul class="sousMenu">
           <li><a href="#">Résumés</a></li>
           <li><a href="#">Personnages</a></li>
           <li><a href="#">DVDs</a></li>
          </ul>
        </li>
        <li><a href="etape3.html">Saint Seiya G</a></li>
        <li><a href="etape4.html">The Lost Canvas</a></li>
        <li><a href="etape5.html">Next Dimension</a></li>
        <li><a href="etape5.html">Forums</a></li>
        </ul>
 
        <div>
 
        <br/>
        <div class="norm"><a href="/rss/animecdzrss.php"><img src="http://www.animecdz.com/rss/rss.png" alt="Fil RSS d'Animecdz" /></a> 
        <span class="navlink"><a href="index-1-0-0.html"><b>Saint Seiya Animecdz</b></a> > Sondage</span>
        </div>
        <br />
 
        <div id="contenant">
 
            <div id="contenu">
            <p><span id="titre">Test de titre</span><em> - proposé par Jeez</em></p>
            <p>Ce n'est un secret pour personne, l'audience de la série animée a atteint son point culminant avec la grande bataille de Sanctuaire (épopée qui passionna le plus les fans japonais) avant de descendre en flèche au cours de la diffusion de la saga Asgard, inédite en manga. Le public se détachera de plus en plus de la série animée et très peu de fans reviendront pour assister à l'adaptation de la deuxième partie du manga, Poséidon. Conséquence directe : le 114e opus terminant cette saga sera également l'ultime épisode qui conclura la version animée des aventures des chevaliers d'Athéna, bien que Masami Kurumada ait entamé deux mois plus tôt la troisième et dernière partie de son manga, Hadès. Mais Bandai refusera de continuer à sponsoriser la série suite à cette baisse drastique d'audience, pensant à juste titre qu'elle n'atteindrait plus jamais les sommets de la traversée des douze temples. Qui plus est, quand on voit que seuls deux petits mois séparent le début de la saga Hadès (dont le premier chapitre sera prépublié dans le Weekly Shônen Jump n°10 de l'année 1989, paru le 7 février) de la diffusion du dernier épisode de la série (le 1er avril de la même année), il s'avère naturel de penser que le staff technique se serait à nouveau retrouvé face à un problème de délais de production. En définitive et jusqu'à récemment, ces explications/suppositions étaient les seules raisons logiques à cette fin prématurée.</p>
            </div>
 
        </div>
 
 
        <div id="droite">
            <div id="bloc_nav">
                <p id="nav"><strong style="color:#ffffff">Navigation :</strong><br /><br />
                - Home Univers<br />
                - Résumés<br />
                - Personnages<br />
                - Le Staff<br />
                - DVDs<br />
                - Goodies<br />
                - Galerie</p>
            </div>
            <div id="inter_bloc"></div>
            <div id="bloc_liens">
                <p id="liens"><strong style="color:#ffffff">Autres articles :</strong><br /><br />
                - <a href="">Test de titre</a><br />
                - <a href="">Test de titre</a><br />
                - <a href="">Test de titre</a></p>
            </div>
        </div>
 
        <br />
 
        <div id="pied_page">Ceci est le pied de page</div>
 
    </div>
</body>
</html>

et là ma feuille de style :

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
body
{
    text-align: center;
    vertical-align:top;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color:#00143F;
    font-size:12px;
    color: #cccccc ;
}
 
a {  text-decoration: none; color: #ffffff; font-style: normal}
a:hover { color: #FF9966; font-style: normal}
img { border :0px }
 
div#bandeau {
    width:900px;
    height:106px;
    background-color:#00143F;
    }
div#topmenu {
    width:900px;
    background-color:#003366;
    height:22px;
    float: center ;
    }
div#contenant {
    width:900px;
    background-color:#00143F;
    }
 
 
#menuDeroulant
{
 width: 900px;
 list-style-type: none;
 font-weight: bold ;
 margin: 0;
 padding: 0;
 border: 0;
 position :absolute;
z-index : 1;
}
#menuDeroulant li
{
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
}            
 
#menuDeroulant .sousMenu
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}            
 
#menuDeroulant li
{
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
}    
 
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: auto;
 color: #FFF;
 background: #003366;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #3A4F80;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #3A4F80; }
#menuDeroulant li a:active { background-color: #3A4F80; }
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
}
 
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #3A4F80;
}    
 
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 border-top: 1px solid #3A4F80;
 border-right: 1px solid #3A4F80;
}            
 
#menuDeroulant .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}    
 
#menuDeroulant li:hover > .sousMenu { display: block; }        
 
.navlink {background-color: #003366;margin: 2px 2px 0 2px;border: 1px solid #3A4F80;padding:2px 5px 2px 5px;color: #FFFFFF;font-weight:bold;font-size: 8pt;}
.norm{ color: #ffffff; font-size: 8pt;text-align:left}
 
 
div#contenu
{
    float:left;
    width:585px;
    padding: 0px 10px 0px 10px;    
    margin: 0px auto 0px auto;
    background-color: #003366;
    border : 1px solid #3A4F80;
    text-align: justify;
}
 
 
div#droite {
    margin-left: 619px;
    width:281px;
    background-color:#00143F;
    }
 
div#inter_bloc {
  width:280px;
  height:5px;
  background-color: #00143F;
}
 
div#bloc_nav {
  width:280px;
  height:150px;
  background-color: #003366;
  border : 1px solid #3A4F80;
  text-align: justify;
}    
 
div#bloc_liens {
  width:280px;
  height:150px;
  background-color: #003366;
  border : 1px solid #3A4F80;
  text-align: justify;
}
 
div#pied_page {
    width:900px;
    background-color:#003366;
    }
 
p#nav {
    margin-left: 10px;
}    
 
p#liens {
    margin-left: 10px;
}    
 
span#titre
{
    color:#ffffff;
    font-size:20px;
    font-weight: bold ;
}

Pourriez-vous me donner la marche à suivre pour que la mise en page, tant sous Firefox que sous IE, ressemble à quelque chose ?

Merci beaucoup de votre aide,

**pierre24** · 22/04/2008, 09h39

Tu es sûr de ta syntaxe 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

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
}

div#contenu
{
    float:left;
    width:585px;
    padding: 0px 10px 0px 10px;    
    margin: 0px auto 0px auto;
    background-color: #003366;
    border : 1px solid #3A4F80;
    text-align: justify;
}

**Candygirl** · 22/04/2008, 10h41

Hello,

Ton menu est positionné en absolu; il est sorti de flux et n'influence plus sur tes autres éléments. Ton image rss vient donc se positionner à la suite du bandeau comme si le menu n'existait pas, raison pour laquelle il se retrouve à moitié en-dessous. A toi de laisser l'espacement nécessaire.

Tu attribues un text-align:center au body puis ne spécifie aucune valeur de positionnement pour ton menu. Par défaut IE considère, vu le text-align:center qu'il doit le positionner depuis le milieu de page.

Plutôt que de redéfinir pour chacun des éléments de ton site une largeur de 900, tu ferais mieux de l'attribuer à ton div englobant ainsi que des marges latérales à auto pour le centrage (même si tu affiches un doctype transitionnel autant passer par du css plutôt que l'attribut align):

Code :

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

1
2
3
4
5
div#global {
  width:900px;
  margin:0 auto;
  position:relative; /* pour servir de référence au positionnement absolu du menu */
}

Ensuite ajouter un left:0 sur ton menu devrait règler le pb du positionnement du menu sur IE.

La valeur center n'existe pas pour la propriété float.

Pour ton contenu qui passe en-desssous sur IE c'est du à la fermeture de ton #contenant qui aurait du être fermée après la partie droite. De toute manière si tu as attribué le width de 900 à ton div englobant il n'a plus sa raison d'être et tu peux le virer.

Tu devrais ajouter un clear sur ton pied de page au cas plus que probable où ton contenu serait plus long que ta partie droite:

Code :

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

1
2
3
div#pied_page {
  clear:both;
}

Vu les dimensions fixes tu ferais mieux de faire flotter ta partie droite, cela évitera, entre autre, le bug des 3px sur IE6:

Code :

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

1
2
3
4
5
div#droite {
	float:right;
	width:281px;
	background-color:#00143F;
	}

**Ex-floodeur** · 22/04/2008, 18h32

Bonsoir,

tout d'abord merci de ces conseils.

Il semble que le bandeau du bas soit trop collé aux blocs de droite. J'ai essayé de poser des retours chariots mais sans réussite

**Candygirl** · 22/04/2008, 19h36

Pour cet usage, les <br /> sont à proscrire; tu dois jouer avec les margin pour espacer tes différents éléments. Pour espacer ton footer, tu peux ajouter un margin-bottom à ton #contenu et ton #droite:

Code :

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

1
2
3
4
div#contenu,div#droite
{
	margin-bottom:10px;
}

**Ex-floodeur** · 26/04/2008, 14h12

Bonjour,

encore une fois, j'ai un souci de css. Cette fois, ci, j'ai un formulaire récalcitrant :

Page : http://www.animecdz.com/V6/styles1.html

Le code :

Code xhtml :

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
        <div id="sousmenu">
 
            <div id="sousmenugauche">
                    Se Connecter | Créer un compte | Design
 
            </div>
 
            <div id="sousmenudroite">
 
            <form name="searchMain" action="http://www.animecdz.com/recherche.php" method="post">Recherche
                <input type="text" name="recherche" maxlength="64" value="" />
                <select name="voirtout">
                <option value="">Sur tout le site</option>
                <option value="news">Actualit&eacute;s</option>
                <option value="dossiers">Articles</option>
                <option value="lexique">Lexique</option>
                <option value="forum">Forum</option>
                </select>
                <input type="submit" value="Chercher" class="btn" />
                </form>
            </div>
 
        </div>

L'extrait de la feuille de style :

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
div#sousmenu {
    background-color:#003366;
    height:20px;
    left:0;
    padding-top: 3px;
    padding-left: 5px;
    font-weight: bold ;
    color : #ffffff;
    }
 
div#sousmenugauche {
    float:left;
    width:450px;
    }
 
div#sousmenudroite {
    float:right;
    width:450px;
    }

Que dois-je faire pour bien aligner ce formulaire ?

Merci encore de votre aide,

**Ex-floodeur** · 01/05/2008, 16h16

Pour préciser, il s'agit du formulaire de recherche.

Merci de votre aide,

Mise en page incorrecte

CSS

Discussions similaires

Partager

Partager