Probléme positionnement des DIV (image du problém)

**badway** · 15/10/2007, 22h23

Bonsoir tout le monde,
J'ai divers questions a propos de mon site qui ne s'affiche plus correctement.

1.Pour le code XTHML, voici la partie concernant le probleme:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
	<body>
	<div id="header"></div> <div id="conteneur">  <div class="menu">
		<ul>  <li><a href="lien1.html">Accueil</a></li>
		........</ul></div>
	<div id="corps">
		<h2 class="intro">bienvenue chez vous</h2>
	<p>Bienvenue dans ....</p>
	<p class="citations"><span class="citation">Citation.....</span><br>
			.......
               	<div id="pied_de_page"> </div>
		</diV> 
		</body>

2.Pour le code css equivalent

Juste la partie qui nous interesse)

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
body
{
   width: 760px;
   margin: auto; 
   margin-top: 20px; 
   margin-bottom: 0px;   
   padding-top: 0px;
   background-image: url("fon.png");
}
 
#header
{
	width: 700px;
	height: 200px;
	background-image: url("baka.jpg");
	padding-bottom: 0px;
	margin: auto;	
 
}
#conteneur
{
	width: 700px;
	background-image: url("fonda.jpg");
	background-repeat: repeat-y;
	margin: auto;	
}
.menu
{
	float: left;
	width: 120px;
	margin-top: 2px;
	margin-left: 30px;
	padding-top: 60px;
	background-image: url("menu2.gif");
	background-repeat: no-repeat;
	list-style-image: url("puce.gif");
	padding-bottom: 20 px;
 
}
.citations
{
	border: 3px double;
	padding: 5px;
	text-align: center;
	color: rgb(177, 170, 146);
	}
.citation
{
	font-family: "times new roman";
	color: rgb(106, 100, 77);
	}
#corps
{
	background: url("fonda2.jpg");
	margin: auto;
	width: 516px;
	margin-right: 32px;
}
p
{
	margin-left: 20px;
	margin-right: 30px;
	color: rgb(102, 63, 49);
	font-family: "times new roman";
 
}

Le probléme en mozilla firefox 2

en internet explorer 6

3.Donc comme vous le constatez entre les 2 images, j'ai mis un margin-left de 30px pour le menu pour qu'il laisse la partie gauche extreme du conteneur s'afficher, donc ca marche pour firefox mais pour ie impossible et ca prend trop de place ce qui met la partie corps au dessous du menu.

4.Pourquoi il ya ce vide entre le header et le corps du site en firefox alors que en internet ecplorer les 2 parties sont collees?

5.Pour les citations, pourquoi internet explorer encadre la 1er lettre de la citation alors que ce n'est pas le cas pour mozilla?

Merci d'avance pour la lecture de mon probleme. SVP aidez moi je ne peux plus avancer je suis bloque et je vous serais reconnaissant si vous essayez de m'aider a resouder ces problems.

Bonne journée

**Candygirl** · 16/10/2007, 10h44

Hello,

Ton problème de menu provient d'un bug sous IE6 qui double la marge du même côté que le flottement sur le premier élément flottant. POur le corriger tu peux essayer d'ajouter un

Code :

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

display:inline;

sur ton menu. SI cela ne fonctionne pas tu peux peut-être jouer sur le padding-left de ton main plutôt qu'attribuer un amrgin-left à ton menu. EN dernier recours tu peux spécifier une marge de 15px juste pour IE6-

Pour ton espace en haut sur FF il provient probablement de la fusion des marges entre to h3 et ton div #corps. Pour empêcher la fusion tu peux soit jouer avec un border ou padding-top sur ton #corps soit lui attibuer une propriété qui crèe un nouveau contexte de formatage genre float ou overflow.

Pour ta citation, pourrais-tu donner le html correspondant?

**badway** · 17/10/2007, 22h46

Merci beaucoup pour ton aide
Pour le display inline ca marche pas

tu peux peut-être jouer sur le padding-left de ton main plutôt qu'attribuer un amrgin-left à ton menu

Comment? le probleme est que j'ai une image d'arriere plan seulement pour le menu.

EN dernier recours tu peux spécifier une marge de 15px juste pour IE6-

Je veux bien que le menu ne cache pas la partie gauche du design...

Pour l'espace, je vais essayer plus tard.

Pour le code html des citations

Citation numero 210510360 bla bla bla; toujours klk choz pour remplir le site {Madamae Z} 
Aucun bla bla bla n'est cite dans ce site {Monsieur B}

Merci encore

**Candygirl** · 18/10/2007, 09h32

Envoyé par badway

Comment?

Comme ça par exemple:

Code :

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

1
2
3
4
#conteneur
{
	padding-left:30px;
}

et tu vires le margin-left de ton menu.

Rien à voir avec ton problème, mais pour tes citations tu devrais utiliser la balises appropriées: blockquote, q et cite.

Autrement il me semble que tu as omis de mettre le css qui spécifie que la première lettre des paragraphes doit être plus grande. J'imagine que tu as utilisé le pseudo-élément first-letter pas mal bugué sur un peu tous les navigateurs, particulièrement IE. Peut-être qu'en fesant une recherche sur le net avec IE bug :first-letter tu trouveras des pistes intéressantes. Bonne chance

Probléme positionnement des DIV (image du problém)

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager