28172 sujets

CSS et mise en forme, CSS3

[RESOLU] <Div> Normal sur Chrome mais centrer sous IE/Firefox

Voilà, à fin de pouvoir vraiment commencer mon nouveau site, j'ai besoin de finaliser mon menu.
Mais voilà, sur Chrome, mon menu apparaît comme je le souhaite, mais sur IE et Firefox il est centrer. Je ne comprends pas pourquoi, mon problème doit être banale mais impossible de trouver la solution.

http://imp3rium.free.fr/test/

Voici tous les codes :

HTML :
<title>Imp3RiuM &#9650; Benjamin Lacaille - Website &amp;#9650; SINCE MCMLXXXIX.</title>

<style type="text/css">
<!--


body{
	background-image: url(img/border/background.png);
	background-position:center;
	background-repeat:repeat-y;
	margin:0;
	}
	
	-->
</style>

<link href="css/style.css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mainmenuslide.js"></script>
<script type="text/javascript">
        $(function() {
            $("ul").mainmenuslide({
                fx: "backout",
                speed: 800,
                click: function(event, menuItem) {
                    return true;
                }
            });
        });
</script>
</head>

<body>

<div id="header">
	<div class="header">
    <div class="header_navigation">
    	<ul class="mainmenuslide">
        	<li><a href="#" alt"">HOME</a></li>
            <li><a href="http://imp3rium.tumblr.com/" target="_blank"><img src="img/tumblr.png" width="77" height="18" border="0"/></a></li>
            <li><a href="http://imp3rium.free.fr/cult.html">CULT</a></li>
            <li><a href="mailto:x._imp3rium_.x@hotmail.fr">CONTACT</a></li>
        </ul>
    </div>
    </div><!-- end header_navigation-->
</div><!-- end header -->
<p align="center">dvvfgvfvfv</p>

</body>
</html>


CSS :
style.css
/**** Links ***/
a:active, a:visited, a:link { color:#FFF; text-decoration:none; } 
a:hover { color:#FF0066; }
/**** Header ***/
#header{
	width:1000px;
	height:108px;
	margin:auto;
	}
.header{
	background: url(../img/border/background_header.png) no-repeat;
	margin:auto;
	height:200px;
	position:fixed;
	width:1000px;
	}
.header_navigation{
	float:right;
	width:550px;
	height:24px;
	margin:16px 0px 0px 240px;
	position:fixed;
	}
/**** content ***/
#content{
	width:940px;
	margin:auto;
	border-left:1px solid gray; border-bottom:1px solid gray ; border-right:1px solid gray ;		
	padding: 30px;
	min-height:500px;
	}
/**** Footer ***/
#footer{
	width:1000px;
	margin:auto;
	}


main.css
.mainmenuslide {
	height: 29px; width:550px;
    background: url("../img/border/background_main.png") no-repeat top; position: relative;
    padding: 15px 0 15px 0; margin: 0 -10px 0;
    }
.mainmenuslide li {
	padding: 16px 0 11px 25px; margin: -18px 0 0 9px;
	float: left; list-style: none;
	}
.mainmenuslide li.back {
	background: url("../img/border/hover_main.png") no-repeat right -52px;
	width: 9px; height: 30px; padding: 0px 0 22px 0;
    z-index: 1;	margin: -12px 0 0 8px; position: absolute;
	}
.mainmenuslide li.back .left {
	background: url("../img/border/hover_main.png") no-repeat top left ;
	padding: 0px 0 22px 0; height: 30px; margin-right: 24px; 
	}
.mainmenuslide li a {
	font: bold 14px arial;
    top: 7px; z-index: 2; float: left;
    height: 30px; position: relative;
    margin: auto 10px; outline: none;    
    }


Voilà, merci d'avance si vous trouvez solution à mon problème ! Smiley cligne
Modifié par Imp3RiuM (10 Oct 2010 - 09:44)
Hello,

Ben ce doit très certainement être dû à tes marges externes automatiques qui, lorsqu'elles sont utilisées pour les marges externes gauche et droite, permettent de centrer un conteneur.

Au passage, tes imbrications multiples de divisions sont absolument inutiles et alourdissent grandement ton code et sa compréhension. Exemple, l'élément <ul> utilisé pour ton menu étant de type bloc, tu peux le positionner directement sans avoir besoin de recourir à une division qui l'englobe.
Modifié par audrasjb (09 Oct 2010 - 15:48)
Que dois-je faire alors ? Je débute je ne comprends pas ce que tu veux que je face, si tu as le temps, pourrais-tu me donner les codes s'il te plait ? Merci
Re,

Désolé, pas de code tout cuit, que des explications Smiley smile

Tu utilise dans ta feuille de styles css la déclaration suivante :
margin : auto ;


Cela équivaut à dire : les marges externes (réviser le modèle de boîte au besoin) de mon élément sont automatiques. Quand on spécifie des marges automatiques à un élément, celui-ci se centre (horizontalement) de façon automatique par rapport à l'élément parent. Dans ton cas la division de classe header (.header en CSS) est centrée au sein de la division portant l'identifiant header (#header en CSS), elle même centrée au sein de ta page (c'est à dire de l'élément <body>). Il faudrait donc commencer par éviter de centrer .header au sein de #header en enlevant ces marges automatiques.

Plus d'infos sur le centrage avec les marges automatiques .
Bonnes lectures Smiley smile
Modifié par audrasjb (09 Oct 2010 - 17:06)
Comment veut-tu centrer sans les marges ? Je sais que tu veux que j'apprenne de moi même mais tu m'es d'aucune aide. Et mon problème reste le même !

Je perds un temps fou à chercher pour rien ...
Modifié par Imp3RiuM (09 Oct 2010 - 17:56)
SVP Aidez moi, je ne veux pas avançer dans mon site si je ne trouve pas la solution à mon problème Smiley decu
Salut

En jetant un coup d'œil rapide, il me semble que le problème peut venir de tes position:fixed;
En principe position:fixed fonction avec left,right,top,bottom.

D'ailleurs je suis pas sur que tu en ais vraiment besoin pour ton .header_navigation.

Essaye en l'enlevant, ton div .header_navigation devrait se retrouver à droite. Joues ensuite avec le margin-right pour le placer.
davidito a écrit :
Salut
En jetant un coup d'œil rapide, il me semble que le problème peut venir de tes position:fixed;


Bonjour , tout a fait d'accord .

Tu declare ton div.header en position:fixed; . il n'est pas nécessaire de déclarer a nouveau un enfant en position:fixed; , il y a une incohérence que chaque navigateur va tenter de corriger comme il peut .

Ce positionnement prend en référence la fenêtre du navigateur quelque soit sa position dans le flux du document . Une fois suffit sur le parent d'un groupe d'élément .

Laisse donc .header_navigation dans le flux naturel de .header, qui lui, est déjà scotché dans ta fenêtre Smiley smile .

++
Sa roule les gars ! En effet, il m'a fallu supprimer: 
.header_navigation
Puis de modifier les marges de .mainmenuslide dans la feuille main.css.
Génial ! Merci encore !
Modifié par Imp3RiuM (10 Oct 2010 - 09:44)
Sujet clos
Aller à