28172 sujets

CSS et mise en forme, CSS3

[Résolu]Problème de marge dans le global

Salut,
En ce moment je suis entrain de tenter l'intégration d'un design pour m'entrainer (apprendre) et j'ai un problèmes avec la marge de mon global. Je vous explique :

En faite, si je met un margin : 0; il y a toujours un espace au dessus du header, et le seul moyen et très mal de combler le problème c'est de mettre margin négatif. ça ressent rapidement sur IE7

Voici mon code :

l'Xhtml :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>Mon site.com</title>

	<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
	 <div id="global">
		 <div id="header">
			 
			 <div id="logo">
				 <h1>Mon site.com</h1>
				 <p>Slogan</p>
			 </div>
				 
			 <div id="nav">
				 <h1>Navigation:</h1>
					 
					 <ul>
						 <li class="accueil">01.Accueil</li>
						 <li>02.Folio</li>
						 <li>03.Contact</li>
					 </ul>
					 
			 </div>
				 
		 </div>
			 
			 
		 <div id="content">
			 <div id="news">
				 <h1>Un titre</h1> 
				 <div id="bloc">
					 <p id="date">Le 31.12.09</p>
						 <div id="contenu">
							 <img class="imagenews" src="img/illustration.jpg" alt="illustration"/>
							 <p> 
							 Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo, levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine spiramento ullo ad usque praetorium traxere praefecti.
							 </p>
							 <p> 
							 Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo, levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine spiramento ullo ad usque praetorium traxere praefecti.
							 </p>
						 </div>
					 <div id="finbloc">
						 <p id="commentaires">Aucun commentaire</p>
					 </div>
					 
				 </div>
			 </div>
			 
		 </div>
			 
		 <div id="footer">
	     </div>

	 
	 </div>

</body>
</html>


Le CSS



* {
margin:0;
padding:0;
border: 0; 
}

body{
	font-size: 12px;
	background: url('img/bg.png') repeat-x top #f2f0f1;
	}
	
#global{ 
	width: 1000px;
	margin: -20px auto 0 auto;
}

#header {
	background: url('img/header.png') no-repeat top left; 
	height: 137px; 
	width: 1000px;
	color: #fff
}

#logo {
	background: url('img/logo.png') no-repeat top left; 
	width: 230px;
	height: 95px; 
	margin-left:100px; 
	margin-right:0; 
	margin-top:20px; 
	margin-bottom:0;
}

#logo h1 { 
	font-size: 1.2em; 
	line-height: 55px;
	padding: 5px 0 0 60px;
	color: #2b67b0;
}

#logo p {
	margin: 0 0 0 0;
	padding-left: 70px;
	color: #55769e;
	font-weight: bold;
}

#nav {
	background: url('img/nav_bg.jpg') no-repeat top center; 
	height: 38px; 
	margin-top: 3px;
	margin-left: auto;
	margin-right:auto;
	width: 780px
}

#nav h1 {
	font-size: 0.9em;
	font-weight: normal;
	padding: 0 0 0 110px;
	line-height: 10px;
}

#nav ul {
	color: #fff;
	list-style-type: none;
	padding: 10px 0 0 95px;
	line-height: 10px;
	font-size: 1em; 
}

#nav ul li { 
	display: inline;
	padding: 0 11px 0 0;
}

#nav li.accueil{
	font-size: 1.1em;
	font-weight: bold;
	color: #000;
	padding-right: 15px;
}

#content { 
	background-color: #fff;
	width: 718px;
	margin: 0 auto;
	padding: 20px 30px; 
}

#news {
	padding: 20px 20px;	
	width: 683px;	
}

#news h1 {
	padding-bottom: 20px;
}

#bloc { 
	background: url('img/news_date.jpg') no-repeat top left;
	height: 15px;
}

#date {
	color: blue;
	padding-left: 65px; 
	line-height: 0px;
}

#contenu { 
	margin-top: 5px;
	background: url('img/news_content.jpg') repeat-y top; 
	padding: 0px 10px; 
	width: 663px;
}

#news p { 
	padding-bottom: 10px;
}

#finbloc {
	background: url('img/news_comment.jpg') no-repeat bottom left; 
	height: 11px;
}

#commentaires {
	text-align: right;
	padding-right: 25px;
}

.imagenews {
	height: 52px;
	width: 413px;
	padding: 5px;
	border: 1px solid #b9babb; 
	margin-bottom: 10px;
}


voici un lien vers l'intégration : découpe

Merci d'avance
Modifié par Kadus (28 Jan 2009 - 21:46)
Administrateur
Hello,

As-tu pensé à supprimer le margin-top (par défaut) sur le titre h1 ?

PS : tu n'as pas mis de lien vers la page
Modifié par Raphael (28 Jan 2009 - 19:59)
Salut Raphael,
Non je n'y avais pas pensé ^^; mais j'ai essayé maintenant et ça ne marche toujours pas.
Smiley sweatdrop
Salut,

Surement un problème de fusion des marges, essaye un border 1px sur ton header... (ou padding ou overflow: auto)
Salut,
Oui c'est ça \o/ !!!!

Le padding a réglé le problème, je n'ai eu alors qu'à repositionner les éléments pour que le résultat soit parfait.

Merci Ghost
Sujet clos
Aller à