Centrage ie8
kevin
-
kevin -
kevin -
Bonjour, J'ai un probléme de centrage pour ie8 alors que mozilla ne le fais pas expliquez moi si vous pouvez merci je vous en serais trés reconnaissant :
voici le css que j'utilise
#recherche
{
margin-right : 45px;
margin-top : -7px;
padding-top : 43px;
}
.centre{
margin-left: 210px;
width:693px;
min-height:800px;
z-index:1;
padding:10px;
background-color:white;
}
.gauche{
float:left;
width: 173px;
margin-left:11px;
margin-top : 1px;
padding-bottom:0px;
}
le site ayant le bug est :
http://www.cc-paysdelapalisse.fr/
Comparez avec mozilla vous verrez les décalages c'est monstrueux.
Merci d'avance.
voici le css que j'utilise
#recherche
{
margin-right : 45px;
margin-top : -7px;
padding-top : 43px;
}
.centre{
margin-left: 210px;
width:693px;
min-height:800px;
z-index:1;
padding:10px;
background-color:white;
}
.gauche{
float:left;
width: 173px;
margin-left:11px;
margin-top : 1px;
padding-bottom:0px;
}
le site ayant le bug est :
http://www.cc-paysdelapalisse.fr/
Comparez avec mozilla vous verrez les décalages c'est monstrueux.
Merci d'avance.
3 réponses
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 ;)
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>
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 ?
C'est a cause de mon css.