Body déplacé à cause d'un margin
Résolu
Meuh68
-
Meuh68 -
Meuh68 -
Bonjour,
Je suis actuellement entrain de créer mon portfolio, mais je rencontre un problème de margin.
Mon code html :
Mon CSS :
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
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
A voir également:
- Body déplacé à cause d'un margin
- Windows 11 déplacer la barre des taches à droite - Guide
- Déplacer une colonne dans un tableau excel - Guide
- Water your body - Télécharger - Santé & Bien-être
- Déplacer onedrive sur un autre disque - Guide
- Nous ne pouvons effectuer cette action car cela impliquerait le déplacement de cellules d'un tableau - Forum Excel
2 réponses
Salut
ce ne serait pas mieux comme ca !
tu remettra en css externe ;-)
a+
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>
a+
Salut
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
a+
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>
a+
