Espace blanc au sommet de la page

Résolu/Fermé
Toto - 9 avril 2011 à 22:44
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 - 10 avril 2011 à 17:55
Bonjour,
j'ai créé une page basique avec XHTML mais un tout petit peu de CSS (pas encore terminé). Mais avec les div, je m'aperçois qu'il y a un gros problème : il y a un espace blanc au sommet de la page, mais aussi en bas de la page.

Voici une capture d'écran : http://www.hostingpics.net/viewer.php?id=536612Capture.png.

Que dois-je faire en CSS pour enlever cette marge ?

Cordialement.
A voir également:

8 réponses

Rodolphe_ Messages postés 1481 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 285
10 avril 2011 à 13:21
Bonjour,

ce sont les marges du premier h1 et du dernier p que tu vois.

Pour te rendre compte de ce genre de soucis, tu peux utiliser firebug pour firefox.
1
D'accord, mais il y a-t-il une astuce CSS pour éliminer cette marge ?
0
theshadoo Messages postés 786 Date d'inscription samedi 26 mai 2007 Statut Membre Dernière intervention 3 mai 2016 123
10 avril 2011 à 13:41
Tu retires les margin en trop des balises cités tout simplement.

les balises html de type block t'ajouteront toujours des marges en plus, c'est conventionnel et logique à la base. Si on regarde une structure de document, pour la mise en page il faut bien aérer les titres des paragraphes.
0
"Tu retires les margin en trop des balises cités tout simplement. " : c'est-à dire ?

Désolé, je suis encore assez débutant en CSS...
0
theshadoo Messages postés 786 Date d'inscription samedi 26 mai 2007 Statut Membre Dernière intervention 3 mai 2016 123
10 avril 2011 à 14:07
#entete h1 { margin: 0;} dans ta première div d'entete

#sidebar h1 { margin-top: 0 }

mais vue qu'il n'y a pas de mise en page je doute que cela soit ces balises que tu désires ciblé, car ta sidebar logiquement si elle s'appelle sidebar c'est qu'elle est dans le corps de la div concerné de ton site.

si c'est vraiment dans le header et le footer de ta page alors pour le footer c'est :
Ta dernière balise <p> où il faudra enlever le margin-bottom: 0
0
J'ai testé, et effectivement, la marge a diminué, mais n'a pas disparu. Je suppose qu'il va falloir faire une illusion avec le background de la page, non ?
0
creadiff Messages postés 445 Date d'inscription samedi 3 avril 2010 Statut Membre Dernière intervention 3 novembre 2011 57
Modifié par creadiff le 10/04/2011 à 08:02
C'est difficile à dire quand on ne voit pas le résultat dans son contexte réel... Existe-t-il une version en ligne que l'on pourrait consulter ?
0
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
10 avril 2011 à 12:11
donne le lien sous la forme "www.monsite.ici" sans les http : //
là on pourra te répondre :)
@+
0
theshadoo Messages postés 786 Date d'inscription samedi 26 mai 2007 Statut Membre Dernière intervention 3 mai 2016 123
10 avril 2011 à 12:12
lool en plus ton screenshot est vraiment pas parlant ! on voit tout un tas de ligne qui ne ressemble à rien et on ne sait même pas où se situe ton navigateur....

regarde tes margin dans ton css c'est certainement ca qui merde (tes margins sur les balises principales)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
10 avril 2011 à 12:26
c'est quoi ce "binzzz" sur le 'capture ' ?
0
Bonjour à tous, et merci de vos réponses.

En fait, la page n'est qu'une simple ébauche, mais on remarque déjà le problème de marge en haut et en bas.

J'ai uploadé les fichiers ici : scout123.net/ebauche.

Cordialement.
0
creadiff Messages postés 445 Date d'inscription samedi 3 avril 2010 Statut Membre Dernière intervention 3 novembre 2011 57
10 avril 2011 à 16:07
Il est souvent souhaitable de commencer son CSS par un "déformatage", du type :

* {margin:0;padding:0}
0
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
10 avril 2011 à 17:55
pas grand chose dans la css, mais elle est bonne ...
html, body {
margin : 0;
}
#entete h1 {
margin : 0;
}
#container {
width : 1000px;
border-right : 1px solid black;
border-left : 1px solid black;
margin-left : auto;
margin-right : auto;
}
#contenu h1 {
margin-left : 10px;
}
#contenu p {
margin-left : 10px;
}

:)
0