Problème de "marge non désirée" + taille de zone bizarre

**straitch** · 25/09/2007, 17h27

Bonjour,

Je souhaite obtenir une mise en page de ce type:

Basique quoi...

Voilà mon code html de base:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="classic.css" />
</head>

<body>

<div id="header">
</div>

<div id="menu">
</div>

<div id="corps">
</div>

<div id="footer">
</div>

</body>
</html>

Pareil pour mon CSS (les couleurs sont là juste pour tester):

body
{
width:1024px;
height:768px;
}

#header {
background: #159f0e ;
width:1024px;
height:100px;

}

#menu {
float: left;
background: #626262 ;
width:224px;
height:400px;
}

#corps {
background: #f55d01 ;
width:900px;
height:400px;

}

#footer {
background: #23d2ec ;
width:1024px;
height:100px;

}

Et voilà le résultat:

Pourquoi y a des marges à gauche et en haut et comment les enlever?

De meme pourquoi le "corps" (en orange) ne prend pas toute la largeur?
A départ j'avais mis pour le menu width:224px; et pour le corps width:800px; en pensant que ça allait remplir toute la largeur pile poil,mais non alors j'ai mis 900 pour le corps et c'est juste un peu plus large au final sans pour autant remplir la largeur.... comprend pô ...

Merci pour votre aide

**kaiser59** · 25/09/2007, 17h57

Salut,

Ceci résoudra ton problème, je l'ai testé et cela fonctionne. Par contre je sais pas si en hauteur tu veux que cela fasse toute la page donc je n'ai pas touché à la hauteur.

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
 
body
{margin:auto;}
 
#header {
background: #159f0e ;
width:100%;
height:100px;
}
 
#menu
{
float: left;
background: #626262 ;
width:20%;
height:400px;
}
 
#corps {
float:left;
background: #f55d01 ;
width:80%;
height:400px;
}
 
 
#footer {
clear:both;
background: #23d2ec ;
width:100%;
height:100px;
}

**straitch** · 25/09/2007, 18h19

Decidement ce Roy Focker toujours là quand on a besoin de lui

Merci

Par contre sans vouloir faire mon chieur y a pas un moyen d'y arriver sans passer par les positions relatives?
Je sais que c'est "theoriquement mieux" mais j'aime bien tester toutes les methodes possibles ça peut toujours servir d'en maitriser plusieurs.

PS: y a pas un moyen que Firefox n'aille pas en priorité dans ce qui est en cache? .... j'ai mis 5min à comprendre qu'il fallait p'tete réactualiser la page pour que le nouveau CSS soit pris en compte vu que ça changeait rien et ça risque de pas etre pratique en cas de nombreux changements

**straitch** · 25/09/2007, 18h36

Deja en reprenant mon CSS de depart et en remplaçant

Code :

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

1
2
3
4
5
body
{
width:1024px;
height:768px;
}

Par

Code :

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

1
2
 body 
              {margin:auto;}

Ca resoud le problème des marges ... mais ça m'explique pas pourquoi les 2 marges etaient apparues sans jamais les avoir réclamées,je sais je suis chiant

Et ça resoud pas non plus le problème du corps qui refuse d'aller jusqu'au bord de la fenetre alors qu'en theorie ça ne devrait poser aucun problème .... oui finalement je suis TRES chiant meme

**kaiser59** · 25/09/2007, 22h54

Envoyé par straitch

Deja en reprenant mon CSS de depart et en remplaçant

Code :

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

1
2
3
4
5
body
{
width:1024px;
height:768px;
}

Par

Code :

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

1
2
 body 
              {margin:auto;}

Ca resoud le problème des marges ... mais ça m'explique pas pourquoi les 2 marges etaient apparues sans jamais les avoir réclamées,je sais je suis chiant

Et ça resoud pas non plus le problème du corps qui refuse d'aller jusqu'au bord de la fenetre alors qu'en theorie ça ne devrait poser aucun problème .... oui finalement je suis TRES chiant meme

Pourquoi tu veux délimiter une taille fixe dans body, impose plutôt une limite à tes div plutôt. Par contre je comprend pas ta question les div sont placé en float pas en relative

PS : Je vois qu'il y a des connaisseurs

**djoyeux** · 26/09/2007, 00h42

kaiser dira si je me trompe mais tu aurais pu rajouter aussi ça dans ton corps

Code :

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

1
2
 
	margin:0 0px 0 224px;

non ?

ça aurait peut etre résolu le problème.

De plus juste pour info 1024 c'est trop large n'oublie pas que bcp de personnes utilise leur navigateur en fenetre et non en plein écran.

Apres si c pour une appli pro c peut etre voulu.

**onirisme** · 26/09/2007, 08h07

Envoyé par straitch

PS: y a pas un moyen que Firefox n'aille pas en priorité dans ce qui est en cache? .... j'ai mis 5min à comprendre qu'il fallait p'tete réactualiser la page pour que le nouveau CSS soit pris en compte vu que ça changeait rien et ça risque de pas etre pratique en cas de nombreux changements

Menu options de firefox ->
Outils -> Options -> Avancé (bouton en haut à droite) -> Onglet réseau

Tu mets tons cache à 0

Envoyé par straitch

mais ça m'explique pas pourquoi les 2 marges etaient apparues sans jamais les avoir réclamées,je sais je suis chiant

T'as pas besoin de réclamer quoi que ce soit.... Il y a des marges par défaut. Si tu ne spécifies pas de valeurs autres et bien il y a des marges. Je te conseille vivement de toujours spécifier une valeur de marges à ta balise body, ça évite bien des problèmes de comportement entre ie et ff

Problème de "marge non désirée" + taille de zone bizarre

CSS

Discussions similaires

Partager

Partager