A voir également:
- Centrage ie8
- Telecharger ie8 - Télécharger - Navigateurs
- Cercles concentriques, centrage et épaisseur... - Forum Illustrator
- Problème de pages blanches sur IE8 - Forum Logiciels
- Installer ie8 sous windows CE 6.0 ✓ - Forum Microsoft Edge / Internet Explorer
3 réponses
kiyomasa
Messages postés
312
Date d'inscription
mercredi 23 septembre 2009
Statut
Membre
Dernière intervention
12 mai 2016
5
9 juin 2010 à 13:13
9 juin 2010 à 13:13
je n'ai pas IE8, je ne teste pas mes sites dessus, je me suis plus centré sur IE7
voilà ce que j'utilise :
tu fais une div qui englobe tout dans le HTML :
<body>
<div>
ton site
</div>
</body>
Cette div tu lui applique une class :
.centrage {
width: largeur de ton site px;
margin-right: auto;
margin-left: auto;
position: relative;
}
je ne sais pas si c'est très clean, mais en tout cas, pour moi ça marche à tout les coups ;)
voilà ce que j'utilise :
tu fais une div qui englobe tout dans le HTML :
<body>
<div>
ton site
</div>
</body>
Cette div tu lui applique une class :
.centrage {
width: largeur de ton site px;
margin-right: auto;
margin-left: auto;
position: relative;
}
je ne sais pas si c'est très clean, mais en tout cas, pour moi ça marche à tout les coups ;)
LelLex
Messages postés
1628
Date d'inscription
mercredi 18 février 2009
Statut
Membre
Dernière intervention
5 septembre 2012
112
9 juin 2010 à 14:10
9 juin 2010 à 14:10
Si tu veux le centrer au milieu, tu appliques à ton body{margin:auto;} ; tout simplement, et ça marche pour tous les navigateurs. !
Non le probléme est que mon body n'est pas composé que de ca.
regarde le code d'une page tu comprendra mieux
<?php include('connect.php'); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Lapalisse, pays de lapalisse, chateau de lapalisse, LAPALISSE, communauté de commune de lapalisse, de chabanne, château de lapalisse, médiathéque de lapalisse, mediatheque">
<?php include("meta.php");?>
<link rel="stylesheet" type="text/css" href="guart.css" title="Design">
<link type="text/css" href="fg.menu.css" media="screen" rel="stylesheet">
<link type="text/css" href="theme/ui.all.css" media="screen" rel="stylesheet">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style2.css">
<!--[if IE 6]>
<style type="text/css">
.fg-menu-ipod .fg-menu li { width: 95%; }
.fg-menu-ipod .ui-widget-content { border:0; }
</style>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="guartIe.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="guartIe7.css">
<![endif]-->
<!--[if !IE]> <-->
<style type="text/css">
.centre
{
float : left;
margin-left : 17px;
}
#footer
{
clear : both;
}
</style>
<!--> <![endif]-->
<script type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="js/initTinyMCE.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/fg.menu.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
<script type="text/javascript" src="js/configMenu.js"></script>
<script type="text/javascript" src="js/jquery.scrollable-1.0.2.js"></script>
<script type="text/javascript" src="http://static.flowplayer.org/js/jquery.mousewheel.js"></script>
<script type="text/javascript">
// execute your scripts when DOM is ready. this is a good habit
$(function() {
// initialize scrollable
$("div.scrollable").scrollable({// items are auto-scrolled in 2 second interval
interval: 4000,
// make animation a little slower than the default
speed: 600,
loop : true,
vertical : true,
size : 5
});
});
</script>
</head>
<body><div>
<div id="ban">
<a href="./admin/" target="_blank"><img src="rien.gif" height="110" width="100" align="left" alt="admin"></a>
<div id="recherche">
<?php include('barre_recherche.php'); ?>
</div>
</div>
<div id="conteneur"><br>
<?php include('fil.php'); ?>
<div class='gauche'>
<div id="menuBg">
<?php include('menu_dynamique.php'); ?>
<?php include('defil2.php');?>
</div>
<div style='margin-top:0px ;margin-left:-6px; clear:both;'>
<img src='./footer_menu.gif' title="footer_menu" alt="footer">
</div>
<div style="background-color : rgb(212, 205, 212);
-moz-border-radius : 1em 0px;
padding : 13px;
background-repeat: no-repeat;
background-position: 0px 0px;padding-left: 47px;
background-image: url('photos/ideeInfo.png'); ">
<a href="Boite_a_idees.html" style="color : black; text-decoration : none; font-size : 17px;">
Boite à idées
</a>
</div>
<br>
<!-- Image pour les démarches en ligne. -->
<div style="text-align : center;">
<a href="http://cc-pays-de-lapalisse.demarchesenligne.fr/droits-et-demarches"><img alt="Vos démarches en ligne" src="demarche.png"></a>
</div>
</div>
<!-- Fin -->
<div class=".centre">
<?php include('centre.php'); ?>
</div>
<div id='footer'>
<?php include('footer.php'); ?>
</div>
</div></div>
</body>
</html>
regarde le code d'une page tu comprendra mieux
<?php include('connect.php'); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Lapalisse, pays de lapalisse, chateau de lapalisse, LAPALISSE, communauté de commune de lapalisse, de chabanne, château de lapalisse, médiathéque de lapalisse, mediatheque">
<?php include("meta.php");?>
<link rel="stylesheet" type="text/css" href="guart.css" title="Design">
<link type="text/css" href="fg.menu.css" media="screen" rel="stylesheet">
<link type="text/css" href="theme/ui.all.css" media="screen" rel="stylesheet">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style2.css">
<!--[if IE 6]>
<style type="text/css">
.fg-menu-ipod .fg-menu li { width: 95%; }
.fg-menu-ipod .ui-widget-content { border:0; }
</style>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="guartIe.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="guartIe7.css">
<![endif]-->
<!--[if !IE]> <-->
<style type="text/css">
.centre
{
float : left;
margin-left : 17px;
}
#footer
{
clear : both;
}
</style>
<!--> <![endif]-->
<script type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="js/initTinyMCE.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/fg.menu.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
<script type="text/javascript" src="js/configMenu.js"></script>
<script type="text/javascript" src="js/jquery.scrollable-1.0.2.js"></script>
<script type="text/javascript" src="http://static.flowplayer.org/js/jquery.mousewheel.js"></script>
<script type="text/javascript">
// execute your scripts when DOM is ready. this is a good habit
$(function() {
// initialize scrollable
$("div.scrollable").scrollable({// items are auto-scrolled in 2 second interval
interval: 4000,
// make animation a little slower than the default
speed: 600,
loop : true,
vertical : true,
size : 5
});
});
</script>
</head>
<body><div>
<div id="ban">
<a href="./admin/" target="_blank"><img src="rien.gif" height="110" width="100" align="left" alt="admin"></a>
<div id="recherche">
<?php include('barre_recherche.php'); ?>
</div>
</div>
<div id="conteneur"><br>
<?php include('fil.php'); ?>
<div class='gauche'>
<div id="menuBg">
<?php include('menu_dynamique.php'); ?>
<?php include('defil2.php');?>
</div>
<div style='margin-top:0px ;margin-left:-6px; clear:both;'>
<img src='./footer_menu.gif' title="footer_menu" alt="footer">
</div>
<div style="background-color : rgb(212, 205, 212);
-moz-border-radius : 1em 0px;
padding : 13px;
background-repeat: no-repeat;
background-position: 0px 0px;padding-left: 47px;
background-image: url('photos/ideeInfo.png'); ">
<a href="Boite_a_idees.html" style="color : black; text-decoration : none; font-size : 17px;">
Boite à idées
</a>
</div>
<br>
<!-- Image pour les démarches en ligne. -->
<div style="text-align : center;">
<a href="http://cc-pays-de-lapalisse.demarchesenligne.fr/droits-et-demarches"><img alt="Vos démarches en ligne" src="demarche.png"></a>
</div>
</div>
<!-- Fin -->
<div class=".centre">
<?php include('centre.php'); ?>
</div>
<div id='footer'>
<?php include('footer.php'); ?>
</div>
</div></div>
</body>
</html>
Modifié par kevin le 9/06/2010 à 13:53
9 juin 2010 à 14:02
ben la div qui porte la classe "centrage" sera centré dans la page. Et comme tout est dans la div et ben tout sera centré.
C'est pas ça que tu veux faire ?
Modifié par kevin le 9/06/2010 à 14:07
C'est a cause de mon css.