Body déplacé à cause d'un margin

Résolu

Meuh68 -
Meuh68 - 5 nov. 2012 à 21:38

Bonjour,

Je suis actuellement entrain de créer mon portfolio, mais je rencontre un problème de margin.

Mon code 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">

<head>
	<title>Présentation</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="../styles/style_pages.css">
</head>

<body>
	<a href="../index.html"><img id="lunettesimg" src="../images/lunettes.png"></img></a>
	<div id="menu">
		<a href="presentation.html" class="presentation">Présentation</a> | 
		<a href="../pages/audiovisuel.html">AUDIOVISUEL</a> | 
		<a href="../pages/graphisme.html">GRAPHISME</a> | 
		<a href="../pages/photographie.html">PHOTOGRAPHIE</a>
	</div>

	<div id="conteneur">
	</div>

</body>
</html>

Mon CSS :

body {
	margin				:0px;
	padding				:0px;
	width				:100%;
	height				:100%;
}

html {
	margin				:0px;
	padding				:0px;
	width				:100%;
	height				:100%;
}

@font-face{
    font-family : frutiger;
    src : url('../fonts/frutiger.ttf');
}

@font-face{
    font-family : frutigergras;
    src : url('../fonts/pacifico.ttf');
}

#lunettesimg {
	float			:left;
	width		:100px;
	height		:38px;
	margin-top	:5px;
	margin-left	:8px;
}

#menu {
	position		:relative;
	margin-top	:7px;
	float			:left;
	width		:700px;
	height		:38px;
	font-family	:frutiger;
	font-size		:11pt;
}

#menu>a {
	color				:black;
	text-decoration	:none;
	margin-left		:20px;
	margin-right		:20px;
}

#menu>a:hover {
	opacity : 0.5;
    -moz-opacity : 0.5;
    -ms-filter: "alpha(opacity=50)"; /* IE 8 */
    filter : alpha(opacity=50); /* IE < 8 */
}

.presentation {
	font-family		:pacifico;
	font-size			:15pt;
}

.audiovisuel {
	font-family			:pacifico;
	font-size			:15pt;
}

.graphisme {
	font-family		:pacifico;
	font-size			:15pt;
}

.photographie {
	font-family		:pacifico;
	font-size			:15pt;
}






/* CONTENU */

#conteneur {
	position			:relative;
	background			:black;
	margin-top			:100px;
	width				:700px;
	height				:500px;
	margin-left			:auto;
	margin-right		:auto;
	z-index				:0;
}

Le problème est que tout mon body se déplace de 100px en haut, comme s'il avait un margin de 100px, alors que le margin-top : 100px; est celui de la div "conteneur"... j'ai beau chercher, je ne comprends pas !

Merci d'avance

Afficher la suite

2 réponses

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

Salut

ce ne serait pas mieux comme ca !

tu remettra en css externe ;-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Présentation
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    /*<![CDATA[*/
   html ,body {
      margin: 0;/* pour éviter les marges */
      text-align: center;/* pour corriger le bug de centrage IE */
      padding: 0px;
      background-color: #CCCC00;
    }


    @font-face{
    font-family : frutiger;
    src : url('../fonts/frutiger.ttf');
    }

    @font-face{
    font-family : frutigergras;
    src : url('../fonts/pacifico.ttf');
    }

    #lunettesimg {
      float: left;
      width: 100px;
      height: 38px;
      margin-top: 5px;
      margin-left: 8px;
    }

    #menu {
      position: relative;
      margin-top: 7px;
      float: left;
      width: 700px;
      height: 38px;
      font-family: frutiger;
      font-size: 11pt;
    }

    #menu > a {
      color: #000000;
      text-decoration: none;
      margin-left: 20px;
      margin-right: 20px;
    }

    #menu > a:hover {
      opacity: 0.5;
      -moz-opacity: 0.5;
      -ms-filter: "alpha(opacity=50)";/* IE 8 */
      filter: alpha(opacity=50);/* IE < 8 */
    }

    .presentation {
      font-family: pacifico;
      font-size: 15pt;
    }

    .audiovisuel {
      font-family: pacifico;
      font-size: 15pt;
    }

    .graphisme {
      font-family: pacifico;
      font-size: 15pt;
    }

    .photographie {
      font-family: pacifico;
      font-size: 15pt;
    }
    /* CONTENU */

    #conteneur {
      background: #000000;
      margin-top: 100px;
      width: 700px;
      height: 500px;
      left: 50%;
      margin-left: -350px;/* moitié de la largeur */
      z-index: 0;
      position: absolute;
    }
    /*]]>*/
    </style>
  </head>
  <body>
    <div>
      <a href="../index.html"><img id="lunettesimg" src="../images/lunettes.png" alt="img" name="lunettesimg" /></a>
    </div>
    <div id="menu">
      <a href="presentation.html" class="presentation">Présentation</a> | <a href=
      "../pages/audiovisuel.html">AUDIOVISUEL</a> | <a href="../pages/graphisme.html">GRAPHISME</a> | <a href=
      "../pages/photographie.html">PHOTOGRAPHIE</a>
    </div>
    <div id="conteneur"></div>
  </body>
</html>

Meuh68

J'ai pas tout compris au margin avec du négatif, mais ça marche ! Merci beaucoup !

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

Salut

J'ai pas tout compris au margin avec du négatif

c est tres simple :-)

comme on deplace la div de 50% vers la droite avec le "left:50%"

donc pour la recentrer il faut soustraire la moitie de la largeur totale de cette div ( 700px divise par 2 =350px ) margin-left: -350px; ce qui revient a la decaler de 350px vers la gauche avec la valeur negative et donc de recentrer cette div !

cette methode peut s appliquer pour centrer totalement une div dans la page

exemple

<!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="en" lang="en">  
  <head>  
    <title>  
      RAD ZONE Webcreation  
    </title>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    <style type="text/css">  
/*<![CDATA[*/  
     body {  
     margin: 0; /* pour éviter les marges */  
     text-align: center; /* pour corriger le bug de centrage IE */  
     }  

     #centre {  
     position:absolute;  
     left: 50%;  
     top: 50%;  
     width: 700px;  
     height: 400px;  
     margin-top: -200px; /* moitié de la hauteur */  
     margin-left: -350px; /* moitié de la largeur */  
     border: 1px solid #000;  
     background-color: #585858;  
     }  

    /*]]>*/  
    </style>  
  </head>  
  <body>  
    <div id="centre">  
    </div>  
  </body>  
</html>

Meuh68

Je comprends mieux ! merci beaucoup ! Voilà qui va régler pas mal de problèmes sur mes pages ^^
0

Body déplacé à cause d'un margin

2 réponses

Discussions similaires

Newsletters