Design Probleme avec IE/FF

**Curby** · 14/04/2007, 19h15

Bonjour, je viens de passer un moment sur mon codage et je me rend compte que y a un soucil je vous passe le lien vous regarderez par vous même Liens

Le probleme etant le decalage sur IE le div corps ne veux pas se mettre a droite du menu il se met en dessous

Voila je vous passe aussi les codes html/css
Lien fichier HTML (txt) / Lien fichier CSS (txt)

Merci des reponses

Bonne soirée, Curby

**Candygirl** · 14/04/2007, 19h51

Hello,

Tu as quelques soucis au niveau de tes dimensions:

Code css :

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
#conteneur
{
	width: 775px;
}
 
#menu
{
	width: 187px;
	padding-left: 13px;
}
 
#corps
{
	margin-left: 187px;
	width: 588px;
}

Ton menu a une largeur réelle de 187+13, soit 200 px+588 de corps = un total de 788px, soit plus qu les 775 déclaré pour ton conteneur. IE considère donc qu'il n'a pas la place de mettre les 2 éléments côtes à côtes.

Ensuite, si tu ne souhaites pas être confronté au bug des 3px sur IE6, vu ton design de taille fixe, je te conseille plutôt de positionner ton corps en float plutôt qu'avec une marge gauche de la largeur du menu:

Code css :

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

1
2
3
4
5
#corps
{
        float:right;
	width: 575px;
}

**Curby** · 14/04/2007, 20h09

Merci je vais essayer les dimensions ^^

**Curby** · 14/04/2007, 20h23

Voila ca marche je te remercie maintenant j'ai plus qu' a me mettre au finissage :p

**Curby** · 14/04/2007, 20h30

Rebonjour, J'ai un autre souci ^^

J'ai decider de fais un conteneur ( vous allez comprendre ) pour que le fond sois a niveau.

Lien

Mais lorsque je l'ouvre sous FF tout va mal le fond ne s'affiche pas pourquoi ôÔ?

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
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr-FR" />
<title>Bienvenue sur Miru Rakuen !</title>
<link rel="stylesheet" media="screen" type="text/css" href="design.css" /> 
</head>
	<body>
			<div id="header"><div class="barre">.Inscription .Connexion</div></div>
		<div id="conteneur">
			<div id="menu">
				<img class="margin" src="img/navigation.gif"><br>
					<div class="liens">- News<br>- Membres<br>- Staff<br>- Forum<br>- Projet<br>- FAQ</div>
				<img class="margin" src="img/media.gif"><br>
					<div class="liens">- Episodes<br>- Osts<br>- Articles<br>- Scans<br>- Wallpapers<br></div>
				<img class="margin" src="img/stat.gif"><br>
					<div class="stat">
						 <img src="img/puce.gif"> <span>xxx</span> Visites<br>
						 <img src="img/puce.gif"> <span>xxx</span> Aujourd'hui<br>
						 <img src="img/puce.gif"> <span>xxx</span> Connectés<br>
						 <img src="img/puce.gif"> <span>xxx</span> Membres<br><br>
					     <img src="img/puce.gif"> <span>xx</span> Series  <br>
						 <img src="img/puce.gif"> <span>xx</span> Episodes<br>
						 <img src="img/puce.gif"> <span>xx</span> Articles<br>
						 <img src="img/puce.gif"> <span>xx</span> Scans<br>
						 <img src="img/puce.gif"> <span>xx</span> OAVs<br>
					     <img src="img/puce.gif"> <span>xx</span> OSTs<br>
						 <img src="img/puce.gif"> <span>=> xx</span> Go<br>
					</div>
			</div>
			<div id="corps">		
 
 
			xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 
 
 
 
 
 
 
			</div>
		</div>
	</body>
</html>

Code css :

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
body
{
   width: 775px;
   margin: auto;
   margin-top: 10px;
   margin-bottom: 10px; 
}
/*----------------------------- Conteneur --------------------------------------*/
 
#conteneur
{
	width: 775px;
	margin: auto;
	background-image: url("img/backbody.gif");
	background-repeat: repeat-y;
}
 
/*----------------------------- Header --------------------------------------*/
#header
{
   margin: auto;
   width: 775px;
   height: 220px;
   background-image: url("img/header.png");
}
.barre
{
	padding-top: 202px;
	padding-right: 5px;
	text-align: right;
	font-size: 11px;
	font-family: "Verdana";
	font-weight: bold;
}
/*----------------------------- Menu --------------------------------------*/
#menu
{
	overflow: auto;
	float: left;
	width: 187px;
 
	padding-top: 10px;
 
}
.liens
{
	padding-left: 33px;
	color: #676ac7;
	font-size: 11px;
	font-family: "Verdana";
}
.margin
{
	padding-left: 13px;
	padding-top: 10px;
}
.stat
{
 
	width: 140px;
	margin-top: 5px;
	margin-left: 23px;
	margin-right:0px;
	background-color: #f5f1fd;
	border: 1px dashed #9798d6;
	color: #5258c1;
	font-size: 11px;
	font-family: "Verdana";
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.stat span
{
	color: #000000;
	font-size: 11px;
	font-family: "Verdana";
}
 
/*----------------------------- Corps --------------------------------------*/
 
#corps
{
	float: left;
	HEIGHT: 0px;
	width: 588px;
	padding-top: 10px;
 
 
}

Voila les codes originaux

**Candygirl** · 14/04/2007, 22h12

A cause des flottants. Pour que le conteneur prennent en compte les flottants et descende jusqu'au bas, tu dois créer un nouveau contexte de formatage, par exemple avec un overflow:

Code css :

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

1
2
3
4
5
6
7
8
9
 
#conteneur
{
	width: 775px;
        overflow:auto;
	margin: auto;
	background-image: url("img/backbody.gif");
	background-repeat: repeat-y;
}

Design Probleme avec IE/FF

CSS

Vue hybride

Discussions similaires

Partager

Partager