28220 sujets

CSS et mise en forme, CSS3

[Résolu] Margin-top ne marche pas

Bonjour,

Je suis en train de construire mon site Web en xhtml/css, mais j'ai un problème de margin.
Le margin-top dans l'id global, ne veut pas faire son effet.

Style.css :
/* Mise en page */
body {
padding: 0;
margin: 0;
background: #FFF;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8em;
color: #000;
}

/* Global */
#global {
background: #1d538a;
width: 60%;
margin-top: 20px;
margin: auto;
}
 
/* Header */
#header {
background: #FF0000;
margin: 0;
padding: 0;
}

#header h1 {
font-size: 0.8em;
padding: 0;
margin: 0;
}


Index.html :

<!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=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Mon site Web</title>
</head>
<body>
<div id="global">
<!-- Header -->
<div id="header">
<h1>Mon site Web</h1>
</div>
<!-- Menu -->
<div id="menu">
<ul>
	<li><a href="index.php" title="Accueil">Accueil</a></li>
	<li><a href="index.php" title="Accueil">Accueil</a></li>
	<li><a href="index.php" title="Accueil">Accueil</a></li>
	<li><a href="index.php" title="Accueil">Accueil</a></li>
</ul>
</div>
<!-- Contenu -->
<div id="contenu">
<h1>Bienvenue sur mon site Web</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lacinia ante id odio vehicula facilisis. Etiam eget pede. Morbi sollicitudin sagittis ante. Cras ut est at velit auctor vulputate. Etiam at ligula. Phasellus dui leo, tempor eu, gravida eget, interdum pulvinar, nibh. Aliquam eget nibh. Sed non augue. Maecenas laoreet. Fusce id ante vel lectus hendrerit nonummy. Suspendisse turpis lacus, tincidunt non, fringilla in, adipiscing vitae, arcu. Praesent quis justo at turpis eleifend interdum. Fusce eu nulla. Nunc consectetuer justo ultricies libero. Suspendisse sit amet neque. Aenean vestibulum dui eu enim. Nulla facilisi. Morbi cursus ornare nibh.</p>
<!-- Actualités -->
<h2>Actualités de mon site Web</h2>
<div class="titre_actu">Ouverture de mon site Web<span> - le 22/08/2005 à 15h30</span></div>
<div class="actu">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lacinia ante id odio vehicula facilisis. Etiam eget pede. Morbi sollicitudin sagittis ante. Cras ut est at velit auctor vulputate. Etiam at ligula. Phasellus dui leo, tempor eu, gravida eget, interdum pulvinar, nibh. Aliquam eget nibh. Sed non augue. Maecenas laoreet. Fusce id ante vel lectus hendrerit nonummy. Suspendisse turpis lacus, tincidunt non, fringilla in, adipiscing vitae, arcu. Praesent quis justo at turpis eleifend interdum. Fusce eu nulla. Nunc consectetuer justo ultricies libero. Suspendisse sit amet neque. Aenean vestibulum dui eu enim. Nulla facilisi. Morbi cursus ornare nibh.</p>
</div>
<!-- Footer -->
<div id="footer">
<p>Copyright Gaspar 2005 - <a href="index.php" title="Administration">Administration</a> - <a href="contact.php" title="Nous contacter">Contact</a></p>
</div>
</div>
</div>
</body>
</html>


Pourriez-vous m'aider svp ?

Merci.
Modifié par Arcane (22 Aug 2005 - 18:28)
Salut,

Essai ceci : 
#global {
background: #1d538a;
width: 60%;
margin: 20px auto auto auto;
}


Je garantie rien par contre Smiley smile

A+
Ca marche, merci.

Si tu as le temps, pourrais-tu m'expliquer pourquoi avoir mis ce code :

margin: 20px auto auto auto;
en fait, d'abord tu mettais margin-top à 20px, puis tu le remettais à auto avec la propriété d'en dessous...
Sujet clos
Aller à