Aide mise en page web

**Shivas** · 27/07/2010, 20h50

Bonsoir,

J'ai besoin de aide pour enfin réussir à aligner ma page web. J'ai une différence d'affichage entre IE et Mozilla et je n'arrive pas à m'en dépatouiller je fais donc appel à vos lumières.

1er défaut)Mon Menu Horizontal à une marge gauche inférieur sur IE que sur Mozilla

code

Code :

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

1
2
3
4
5
6
7
8
 
body 
{
background-color:#F0F4F3;
font:13px "Trebuchet MS", Arial, Verdana;
margin: 30px 10px 10px 30px;
width: 760px
}

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
 
#nav
{
list-style-type: none;
margin-top:-10px;
margin-left:110px;
border: 0;
position: absolute;
} 
 
 
 
/*PERMET LE POSITIONNEMENT HORIZONTAL DU MENU*/
#nav .sousMenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
display:block;
}
 
 
#nav li a 
{
background-color : #606766; /*couleur cadre haut#009900*/
color: #FFFFFF ; /*Couleur texte menu*/
border: 1px solid #FFFFFF ;
font: 1em "Trebuchet MS",Arial,sans-serif ;
line-height: 2em ;
padding: 0;
text-align: center ;
text-decoration: none 	
}
 
#nav li a:hover 
{
background: #96CA2D no-repeat 0;
text-decoration: underline
} 
 
 
 
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul 
{
left: auto; /* Repositionnement normal */
right: 425px;
min-height: 0; /* Corrige un bug sous IE */
}
 
 
 
/*MISE EN PAGE*/
#nav li
{
float: left;
width: 160px;
margin: 0;
padding: 0;
border: 0;
} 
 
/*POSITIONNEMENT*/
#nav li a:link, #nav li a:visited
{
display: block;
height: 1%;
margin: 0;
padding: 2px 8px; /*bloc menu*/
border-right: 1px solid #fff;
text-decoration: none;
}
 
#nav li ul{
position: absolute;
margin-top:-1px;
width: 10em;
left: -999em;
border-top: 1px solid #fff;
}
 
#MENUgauche{
	float:left;
	height:125px;
	background-color: #DDDDDD
	}
 
 
#MENUcadrerecherche{
margin-top:40px;
background-image : url(/IMAGES/recherche.png);
background-repeat: no-repeat
}
 
#MENUcadrecategorie {
text-align:left;
background-image : url(images/categorie.png);
background-repeat: no-repeat
 
}

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
44
45
46
47
48
49
50
51
52
53
54
 
	<body>
 
<ul id="nav">		
 
<li><a href="<?php echo ROOTPATH;?>/index.php">Accueil</a></li>
<li><a href="<?php echo ROOTPATH;?>/advance_search.php">Recherche avancee</a></li> 
<li><a href="<?php echo ROOTPATH;?>/recettes/ajouter.php">Ajouter votre recette</a></li>
<li><a href="#">Dossier</a>
		<ul class="nav">
			<li class="sousMenu"><a href="<?php echo ROOTPATH;?>/DOSSIER/astuces.php">Astuces</a></li>
			<li class="sousMenu"><a href="<?php echo ROOTPATH;?>/DOSSIER/presentation_dossier.php">Thèmes</a></li>
				</ul>
</li>
<li><a href="<?php echo ROOTPATH; ?>/membres/connexion.php"> Espace perso</a></li></p>
 
		</ul>
 
 
<div class="MENUgauche">
 
	<div id="MENUcadrerecherche">
 
	<form method="GET" action ="<?php echo ROOTPATH;?>/RECETTES/recherche1.php" name="recherche" onSubmit="return verif()" >
 
			<br/><br/>
	<input type="text" name="mot" size="15"/>&nbsp <input type="submit" value="Ok" alt="Rechercher une recette!" style="width:28px"/>
			<BR/>
 
 
	</form>
</div>
 
 
 
 
 
 
 
			<a href="<?php echo ROOTPATH; ?>/RECETTES/entree.php"><img src="<?php echo ROOTPATH;?>/IMAGES/entree.png" class="bordure"></a><br>
			<a href="plat.php"><img src="<?php echo ROOTPATH;?>/IMAGES/plat.png" class="bordure"></a><br>
			<a href="dessert.php"><img src="<?php echo ROOTPATH;?>/IMAGES/dessert.png" class="bordure"></a><br>
 
 
<div id="MENUcadrecategorie">
<FONT FACE="papyrus" color='#009900' SIZE='2'><br/>
<li><a href=""><font color='black'>Recette entre amis</font></li></a><br/>
<li><a href=""><font color='black'>Recette du monde</font></li></a><br/>
<li><a href=""><font color='black'>Recette express</font></li></a><br/>
<li><a href=""><font color='black'>Recette de la mer</font></li></a><br/>
</FONT>
</div>
 
</div>

J'ai des erreurs de positionnement mais j'ai presque tous essayé en vain, merci pour votre aide

**pixeltn** · 28/07/2010, 00h15

Bonjour

pourquoi avoir spécifié une largeur et une largeur a ton body

le mieux et de créer un div conteneur a qui vous attribué les différents valeur.

Code css :

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

1
2
3
4
5
6
7
 
div#container
{
 
margin: auto; // pour centrer horizentalement
width: 760px;
}

pourquoi avoir spécifié : margin: 30px 10px 10px 30px; ? si pour laisser un espacement entre texte et bordure employé plutôt pudding.

ton #nav est en position:absolute et cela peut créer des problème niveau affichage moi je mettrai plutôt un relative c'est mieux.

Si non pour ton problème, s'il persiste vous pourrait toujours créer un feuille css pour IE et utilisé une inclusion conditionnelle

Code :

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

1
2
3
4
 
<!--[if IE ]>
Special instructions for IE  here
<![endif]-->

Aide mise en page web

CSS

Discussions similaires

Partager

Partager