28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Je viens chercher un peu d'aide pour la mise en forme du site que je suis entrain de réaliser sous Wordpress.

Voici l'url : http://s192858473.onlinehome.fr/archi/wordpress/
Je ne comprend pas que l'image ne soit pas collée en haut et en bas, on ne devrait pas voir le rouge de la div #page



body {
 margin:0; 
 padding:0; 
 text-align:center;
 background-color: #2e2e2e;
}

#page {
 width:966px;
 text-align:left; 
 margin-left:auto; 
 margin-right:auto;
 background-color: red;
}

#header {
 background-image: url(images/header.jpg);
 position:relative; 
 height:107px; 
 width:100%;
}

#content {
background: #2e2e2e url('images/page1.jpg') no-repeat top; 
 height:680px; 
 width:100%;
 border: none;
 margin: 0;
}


#footer {
background: #eee url('images/footer.jpg') no-repeat top;
border: none;
height:47px;
}


Quelqu'un voit le problème ?

Merci d'avance !

Mook
Modifié par Mook (07 Jun 2008 - 12:56)
Administrateur
Bonjour,

ton <h2>titre</h2> et le <p>1er paragraphe du pied de page</p> ont une marge par défaut (margin: 0 0.8em; pour le paragraphe et pour h2, voir le "Rendu par défaut des éléments HTML" de J. Royer dans les Tutoriels EDIT: 0.8em aussi dans Fx2, aux erreurs d'arrondi près).
Si tu les supprimes, tout rentre dans l'ordre.
Modifié par Felipe (06 Jun 2008 - 22:57)
@L'univers: Waouh je deviens "bon" (comprendre moins mauvais, hein Smiley cligne ), j'étais arrivé aux mêmes conclusions Smiley party (séquence auto-motivation ON !!!)

On peut aussi "jouer" sur le <padding-top> du conteneur central non ?

@Mook: Le lien de l'outil de Julien R.
Tu pourras jouer sur les marges internes pour aérer tes "blocs"

Jolie photo, ça vient d'où ? Smiley cligne

Cdt,
Sylvain
Super, ça fonctionne avec les marges à 0.
Merci pour votre aide !

Je reviendrais Smiley cligne