Problème de positionnement avec mes DIV

**Rifton007** · 22/01/2007, 17h48

Bonjour, et encore merci à tous ceux qui participes à cette vie sur le forum, j'ai beaucoup appris aujourd'hui.

Aujourd'hui j'ai commencé la maitrise des DIV pour la mise en page de mes HTML.
Mais je rencontre un probléme que je n'arrive pas à résoudre.

Voici mon site.
http://users.skynet.be/FTP_Exchange/OD/HTML/Home.htm

Tout d'abord mon HTML est conçu de la façon suivante.

1er Div: Sur le coté gauche avec un background répeter, pour faire la bordure gauche du site.
2éme et 3éme Div: Ensemble pour le contenue du site
4éme Div: Meme chose que la 1er mais pour le coté droit.

Probléme 1
Mes Div 1 et 4 ne font pas toute la longeur du site.

Probléme 2
Mes Div 1 et 4 sont visible sur IE mais pas sur FireFox.

Merci de vos réponces a+

**francis m** · 22/01/2007, 22h24

commence par nous mettre le code principal pour regarder

**Rifton007** · 23/01/2007, 04h33

Oui, pardon je pensais que le lien du site suffirait, voici.

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<link href="CSS/DIV_Format.css" rel="stylesheet" type="text/css">
 
 
			<script language='javascript' src='http://127.0.0.1:1025/js.cgi?pca&r=5651'></script>
 
</head>
<script type="text/javascript" src="javascript.js"></script>
 
<script language="javascript">
function LoadHTML(Iback){
 
var iFrame = document.getElementById("iContent");
iFrame.src = Iback;
iFrame.height + 1000;
}
 
</script>
<body>
<div id="BorderG"></div>
<div id="Main">
	<div id="Header"></div>
	<div id="Flash">
	  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="770" height="252" onload="MM_goToURL('parent','Temp.htm');return document.MM_returnValue">
        <param name="movie" value="FLASH/Menu.swf">
        <param name="quality" value="high">
        <embed src="FLASH/Menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="252"></embed>
 
      </object>
	</div>
	<div id="Content"><iframe  frameborder="0" id="iContent" src="Accueil.htm" scrolling="auto"></iframe></div>
</div>
<div id="BorderD"></div>
</body>
</html>
 
<script language='javascript'>postamble();</script>

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
div#BorderG {
	background-color: #000000;
	width: 65px;
	float:left;
	background-image: url(../JPG/G0.jpg);
	background-repeat: repeat;
	}
div#Main {
	background-color: #000000;
	width: 770px;
	float:left;
	height: 100%;
	}
div#Header {
	background-color: #000000;
	width: 770px;
	height: 98px;
	background-image: url(../PICS/Index_01.gif);
}
div#Flash {
	background-color: #000000;
	width: 770px;
	height: 252px;
}
div#Content {
	background-color: #000000;
	width: 770px;
	height: 100%;
}
div#BorderD {
	background-color: #000000;
	width: 65px;
	float:left;
	background-image: url(../JPG/D0.jpg);
	background-repeat: repeat;
}
body {
	margin: 0px auto auto;
	background-color: #000000;
}
html {
	height: 100%;
}
iframe {
	height: 100%;
	width: 100%;
}

Et Excusez moi de vous ajouter ça sur le dos, mais je n'arrive pas non plus à centrer l'ensemble de la page.

Encore merci

**Bisûnûrs** · 23/01/2007, 08h47

Mets déjà, dans ton CSS, les déclaration de html et body tout en haut.

Ensuite, pour centrer ta page, il faut mettre

Code :

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

margin:0 auto;

sur le main et non

Code :

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

margin:0 auto auto;

sur le body.

**Rifton007** · 23/01/2007, 09h25

Merci
C'est surment du aufaite que je suis debout depuis 3h du mat, mais je pense pas avoir compris, désole

Code :

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

1
2
3
html, body {
	margin:0 auto auto;
}

J'ai mi ceci dans mon CSS, c'est bien ça que tu ma conseille de faire ?

**Bisûnûrs** · 23/01/2007, 09h27

Non ...

Justement, il faut enlever ça qui ne sert à rien.

Et mettre sur #main :

Code :

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

margin:0 auto;

**Rifton007** · 23/01/2007, 10h00

1- Pour la balise HTML et BODY j ai mis ça

Code :

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

1
2
3
4
5
html, body {
	margin:0;
	height: 900px;
	background-color: #000000;
}

J'ai laissé margin:0; pour collé le bord de mon site vert le haut.

2- Pour #Main

Code :

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

1
2
3
4
5
6
7
div#Main {
	background-color: #000000;
	width: 770px;
	float:left;
	height: 100%;
	margin:0 auto;
	}

Et le site n'est toujours pas centré.
Merci de ton aide.

**MasterOfChakhaL** · 23/01/2007, 10h04

Salut,

C'est surement le float left qui te pose problème...

Le coup du margin auto suffit à centrer le bloc normalement. Pour que cela marche aussi pour IE, il faut en mettre un peu plus...

Tu peux regarder ce qui est dit dans la FAQ: http://web.developpez.com/faq/html/?...orizontalement

**Rifton007** · 23/01/2007, 10h29

Merci tous les deux, j'ai réussi à centrer, mais avec qq soucis.
Voici tout d'abord le code.

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
<div class="centrer">
<div id="BorderG"></div>
<div id="Main">
	<div id="Header"></div>
	<div id="Flash">
	  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="770" height="252" onload="MM_goToURL('parent','Temp.htm');return document.MM_returnValue">
        <param name="movie" value="FLASH/Menu.swf">
        <param name="quality" value="high">
        <embed src="FLASH/Menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="252"></embed>
      </object>
	</div>
	<div id="Content"><iframe  frameborder="0" id="iContent" src="Accueil.htm" scrolling="auto"></iframe></div>
</div>
<div id="BorderD"></div>
</div>

Sous IE centrage parfait, sauf que les deux DIV sur le coté ne font plus toute la longeur du site.

Sous FireFox centrage est décale vers gauche, et même chose pour les DIV sur le coté.

**Rifton007** · 23/01/2007, 10h36

J'ai mis le site à jour si vous désirez voir le probléme.http://users.skynet.be/FTP_Exchange/OD/HTML/Home.htm

**Bisûnûrs** · 23/01/2007, 10h37

Tu utilises un DOCTYPE "périmé".

Passe-le en XHTML (Transitionnal ou Strict bien que ma préférence aille au Strict) (cf : http://web.developpez.com/faq/html/?...#html_doctypes ).

Je devance ta prochaine question en citant MasterOfChakhal :

Envoyé par Un jour, MasterOfChakhal

Cette balise indique quelle "grammaire" tu vas utiliser.
C'est cette ligne qui indique au navigateur comment il devrait interpréter ton code. Et a plus forte raison, le validateur a besoin de cette précision, sinon, il ne peut pas te dire si tu es valide sans que tu lui indique à quoi tu te conformes.

Si cela casse ton design, c'est parce que les différentes normes ne sont pas interprétées de la même manière. En l'absence de précision, le navigateur se débrouille comme il peut et tous les navigateurs ne se débrouillent pas de la même manière... Ce n'est pas à 100% vrai car les éditeurs suivent les recommandations du w3c avec une rigueur qui leur est propre, mais indiquer un doctype te permet, entre autres, d'uniformiser le rendu de tes pages sur les différents navigateurs existant.

Je te suggères de choisir ton doctype (tu trouveras beaucoup d'infos facilement avec notre ami google) puis de corriger les différents problèmes.

**Rifton007** · 23/01/2007, 10h48

Ben je retire ce que j'ai dis, le centrage fonctionne maintenant.

C'est juste les deux DIV du coté qui ne font pas toute la longeur.
Je vous ai assez dérangé comme ça, je vais essaye de résoudre le probléme moi même.
J'ai vais en tout cas m'informer sur le DOCTYPE.

Merci à vous deux

Problème de positionnement avec mes DIV

Positionnement en CSS

Discussions similaires

Partager

Partager