Body déplacé à cause d'un margin
Résolu/Fermé
A voir également:
- Body déplacé à cause d'un margin
- Téléchargez le fichier et modifiez-le avec le logiciel de montage vidéo de votre choix. supprimez les 3 moments avec le papillon : votre vidéo est donc fractionnée en 4 morceaux. dupliquez le premier morceau et placez la copie à la fin de la vidéo. déplacez le deuxième morceau à la fin de vidéo. recollez tous les morceaux pour ne pas laisser de blanc. à quelle seconde peut-on voir la bouteille encore entière ? - Forum Bureautique
- Lettre demande de déplacement d'un poteau électrique gratuit - Forum Vos droits sur internet
- Dans le gestionnaire de fichiers ci-dessous : dans le dossier musiques, créez un dossier playlist. cherchez les musiques hip-hop et country. déplacez-les dans le dossier playlist que vous avez créé. ✓ - Forum YouTube
- Déplacer une colonne dans un tableau excel - Guide
- Affichez l'ensemble des diapositives à l'écran avec 5 diapositives par ligne. repérez le groupe de 3 diapositives avec une fleur identique alignées verticalement, supprimez la première d'entre elles. un nouveau groupe de 3 diapositives avec une fleur identique alignées verticalement apparaît, supprimez encore la première d'entre elles. déplacez les 3 premières diapositives de la 4e ligne au début de la présentation. quel mot est formé par les lettres de la première colonne ? - Forum Powerpoint
2 réponses
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
1 nov. 2012 à 20:20
1 nov. 2012 à 20:20
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+
J'ai pas tout compris au margin avec du négatif, mais ça marche ! Merci beaucoup !
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
Modifié par RAD ZONE le 4/11/2012 à 21:18
Modifié par RAD ZONE le 4/11/2012 à 21:18
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+