28173 sujets

CSS et mise en forme, CSS3

[resolu]Probleme marge du haut

Bonjour a tous,

Tous dabord je voulais dire un grand merci pour se site et se forum qui aide ennormement pour debuter dans le css.
Je previens donc que je suis debutant en css Smiley smile

Voila mon probleme,
Je viens de commencer un site avec un fichier css externe au page web.
Voici le fichier.css


body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 10;
padding: 0;
background-color: #000000;
}
#header {
height: 120px;
background-color: #75064a;
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
border-style:solid; 
border-width:3px; 
border-color:#de068d;
margin-left: -375px;
background-color:#75064a;
}
#centre {
background-color:#75064a;
margin-left: 150px;
height: 420px;
width: 600px;
overflow: auto;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 0px;
}
.menugauche a {
margin: 0 0px;
color: #ffffff;
text-decoration: none;
}
.menugauche a:hover {
text-decoration: none;

}
p {margin: 0 0 10px 0;}


Et voici une des pages ou mon css doit agir



<!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>
<title>Contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="fichier.css">

</head>

<body>

<div id="conteneur">

	  <div id="header"><img src="images/banniere.jpg">

</div>

	  <div id="gauche">
	  	
		<ul class="menugauche">
		<li><a href="1.htm" alt="1">1</a></li>
		<li><a href="2.htm" alt="2">2</a></li>
		<li><a href="3.htm" alt="3">3</a></li>
		<li><a href="4.htm" alt="4">4</a></li>
		<li><a href="5.htm" alt="5">5</a></li>
		<li><a href="6.htm" alt="6">6</a></li>
		<li><a href="7.htm" alt="7">7</a></li>
		</ul>
		
	  </div>
	  
	  <div id="centre">
		<center>
			<br><br>
			CONTACT
		</center>
  	</div>

	  

</body>
</html>


Voila je n'arrive pas a faire une marge en haut du "conteneur general" en fait tous reste coller en haut.
J'ai essayé de mettre un margin: 10 dans le body du css et un margin-top mais cela ne bouge pas.

Un autre petit prob est le background-color: #000000; dans body, n'est pas pris en charge par ie, est ce normal? faut il mettre un bon vieux body bgcolor dans le html?

Pourriez vous m'aider svp?

D'avance un grand merci a tous.
Modifié par cybercodes (15 Mar 2006 - 04:52)
Bonjour,

Alors, à vue de nez, comme cela, je ne sais pas pourquoi ton conteneur est en position absolue, mais :





#conteneur {

position: absolute;

width: 750px;

left: 50%;

[b]top : 10px;[/b]

border-style:solid; 

border-width:3px; 

border-color:#de068d;

margin-left: -375px;

background-color:#75064a;

}


devrait te le placer "absolumment" à 10px du haut.

Sinon (en cas de positonnement dans le flux), il faudrait jouer sur le padding du body et non sur les marges (puisque ton conteneur est à l'intérieur du body ...
Smiley cligne )

Un peu de lecture :

Comprendre le positionnement

Modèle de boite (marge, bordure, padding, taille ... et différence de comportement selon le navigateur)
Bonjour et bienvenue,

Il faut donner une unité comme px (pixel) aux valeurs différentes de 0.
margin: 10px;

au lieu de:
margin: 10;

pour ton #conteneur.

Sinon même remarque que Véro, quelques informations supplémentaires sur le positionnement avec css: http://del.icio.us/Igor/cssp (particulièrement les liens d'Openweb).
Vero a écrit :
Bonjour,

Alors, à vue de nez, comme cela, je ne sais pas pourquoi ton conteneur est en position absolue, mais :



Et bien je me suis baser sur la source de l'exemple venant d'alsacreations
http://css.alsacreations.com/modeles/modele3.htm[/url]

Sinon je rajout de px a resolu le probleme et j'ai utiliser le top dans conteneur, mais je vais lire les liens que vous m'avez fournis.


Encore un ennnormme merci a vous pour avoir pris la peine de me lire et de m'aider Smiley biggrin
Modifié par cybercodes (15 Mar 2006 - 05:02)
Sujet clos
Aller à