28172 sujets

CSS et mise en forme, CSS3

Pb marge non souhaitée en haut [Résolu]

Bonjour,

J'ai un pb sur mon css.
Je souhaite que mon body soit centré horizontalement (ca ca marche) mais à 0 au top (la ca marche pas.)
Je vous laisse mon code css et html, par avance merci pour votre aide : 


@charset "utf-8";
/* CSS Document */


body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background:#ffffff;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color:#ffffff;
	height:100%;
}
#container { 
	position: relative; 
	width: 999px;  
	background: #FFFFFF;
	margin-top:0px;
	margin: 0 auto; 
	text-align: left; 
} 

#sidebar1 {
	margin-top:0
	position: absolute;
	top: 0;
	left: 0;
	width: 120px; 
             text-align:right;
	background: #000000;
	
	 
}

#hleft {
             padding-top:8px;
	margin-top:0;
}

#sidebar2 {

	position: absolute;
	top: 0;
	right: 0px;
	width: 200px;
	background: #000000;
}

#hright {
    padding-bottom:10px;

} 

#mainContent { 
	margin: 200px 120px; 
	padding-left:11px;
	padding-right:12px;
	padding-top:0px;
	width:656px;
}

#containersite { 
	position: relative; 
	width: 656px;  
	height:105px;
	background: #FFFFFF;
	margin: 0 ; 
	text-align: left; 
} 
 p{ 
   margin: 0.4em 0; 
}
 


#sidebar1site {
	position: absolute;
	top: 0px;
	left:0px;
	width: 131px;
	
}


#mainContentsite { 
	margin: 0px 131px; 
	padding-left:11px;
	padding-right:12px;
	padding-top:0px;
	width:512px;
	text-align:justify;
}

a {
	color: #ff007e;
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	color: #cb2fff;
}

a.bl {color:black;font-size:8pt;text-decoration:none;font-weight:200;font-family:arial;}
a.bl:visited {color:black;font-size:8pt;text-decoration:none;font-weight:200;font-family:arial;}
a.bl:hover {color:black;font-size:8pt;text-decoration:underline;font-weight:200;font-family:arial;}

a.titre_sites { 

font-family: verdana; 
font-size: 16px; 
font-weight: bold; 
color: #ff007e; 
text-decoration: underline}

table {
	border-collapse: collapse;
	font-family: verdana;
	font-size: 12px;
	color: #cb2fff;

}
form {
	margin: 0px;
}
a.menu {
	color: #cb2fff;
	text-decoration: none;
	font-size: 13px;

}
a.menu:hover {
	color: #ff007e;
	text-decoration: underline;
	font-size: 13px;
}

.img {border:1px solid brown; display:-moz-inline-box; display:inline-block;}
.img img {margin:2px; border:none; display:block}
.img span {background:green; color:white; display:block; font-size:10px; font-family:verdana, arial}


.test { 
BORDER-RIGHT: #ff007e 1px solid; 
BORDER-TOP: #ff007e 1px solid; 
BORDER-LEFT: #ff007e 1px solid;
BORDER-BOTTOM: #ff007e 1px solid; }




<html>
<head>
<title>sexeporno</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css"  href="style.css" />
</head>
<body>
<div id="container">
  <div id="mainContent">CONTENU
	</div>
	<div id="sidebar1">
    	<div id="hleft"><?php include('left.html');?></div>
  	</div>
  	<div id="sidebar2">
    	<div id="hleft"><?php include('right.html');?></div>
    </div>
</div>
</body>

</html>

Modifié par oriane84 (20 Dec 2009 - 01:51)
Salut,

en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.



Pour ce qui est de ta question : du code css sans le code html correspondant ça n'est pas pour nous simplifier la tâche. A tout hasard je suppose qu'il s'agit d'un problème de fusion des marges.
Eh bien merci pour la mise en forme et pour le code html... par contre ça ne nous aide toujours pas le php (même si le warning permet d'avoir un peu de contenu) ! Smiley langue

Comme je ne vois pas bien le rendu attendu voici juste quelques pistes :
* quand tu parles de "centrer le body" tu parles en fait de #container non ?
* il manque un point-virgule après margin-top:0 dans la déclaration de #sidebar1.
* tu as un margin-top: 200px dans la déclaration de #mainContent.
Si ca peut aider quelqu'un, voici la modification que j ai faite pour que

#container soit à 0 au top :

1 - j ai ajouté un overflow à #container


#container { 
	overflow: hidden;
	position:relative;
	width: 999px;  
	margin: 0 auto; 
	background: #red;
	text-align: center; 

}


2- J'ai supprimé le margin-top:0 dans la declaration #sidebar1

3- j'ai mis un height à #mainContent

#mainContent { 
	margin: 200px 120px; 
	padding-left:11px;
	padding-right:12px;
	margin-top:0px;
	width:656px;
	height:1500px;
}


Et voila ca marche!!
Sujet clos
Aller à