Bonjour à tous,
Premier message sur ce forum pour vous faire part d'un problème que je n'arrive pas à résoudre (bien que je l'aie identifié).
Sur cette page:
http://www.minos-lesite.fr/index.php
J'ai un décalage au niveau de ma barre de menus sous IE (décalage que j'ai sous FF et opera mais qui se manifeste d'une autre manière, http://minos-lesite.fr/index.php?link=galerie&nom=figurines en décalant les images de la galerie à l'extrémité du menu alors qu'elles sont dans un autre bloc) que je n'arrive pas à résoudre.
Le problème vient probablement du padding du bloc <ul>, puisque si je le désactive (display), le décalage disparait.
J'ai bien tenté la mise à 0 du padding via le sélecteur universel, ça fonctionne globalement, mais ce n'est pas une solution qui me convient.
Voici le morceau de code correspondant au bloc incriminé:
et pour le css associé:
Merci de votre aide,
amicalement
Modifié par Satanas147 (29 Nov 2006 - 18:29)
Premier message sur ce forum pour vous faire part d'un problème que je n'arrive pas à résoudre (bien que je l'aie identifié).
Sur cette page:
http://www.minos-lesite.fr/index.php
J'ai un décalage au niveau de ma barre de menus sous IE (décalage que j'ai sous FF et opera mais qui se manifeste d'une autre manière, http://minos-lesite.fr/index.php?link=galerie&nom=figurines en décalant les images de la galerie à l'extrémité du menu alors qu'elles sont dans un autre bloc) que je n'arrive pas à résoudre.
Le problème vient probablement du padding du bloc <ul>, puisque si je le désactive (display), le décalage disparait.
J'ai bien tenté la mise à 0 du padding via le sélecteur universel, ça fonctionne globalement, mais ce n'est pas une solution qui me convient.
Voici le morceau de code correspondant au bloc incriminé:
<body>
<div id="conteneur">
<div id="header"><h1><a href="index.php" title="Minos - Le site"><span>Minos - Le site</span></a></h1>
<ul id="menu">
<li><a id="menu1" href="index.php?link=bio">Qui suis-je?</a></li>
<li><a id="menu2" href="index.php?link=galerie&nom=figurines">Ma galerie</a></li>
<li><a id="menu3" href="index.php?link=potes&nom=potes">Mes potes</a></li>
<li><a id="menu4" href="index.php?link=none">Articles</a></li>
<li><a id="menu5" href="index.php?link=liens">Liens</a></li>
<li><a id="menu6" href="index.php?link=none">Mon univers</a></li>
</ul>
</div>
<div id="contenu">
<? if(isset($_GET['link'])) { $page = $_GET['link'];}
else $page = "home";
include "$page.php.htm"; ?>
</div>
</div>
</body>et pour le css associé:
body { margin: 10px 0 ;padding: 0 ; text-align: center ;background: #000000;}
#conteneur { position: relative;
margin-left: auto; margin-right: auto;
width: 1024px ; height: 768px;
display: block;
text-align: left ;}
/* ---------->>> HEADER <<<-----------*/
#header {height: 148px ; padding: 0px; margin: 0px;
background: url('../images/statique/interface/bandeau.jpg') no-repeat top ; }
#header h1 a { padding: 0px; margin-left: 50px; height: 100px ; width: 223px ; display: block ;
text-indent: -5000px ; text-decoration: none;
background: url('../images/statique/interface/minos-le-site.gif') no-repeat top; }
#header h1 a:hover
{ background-position: bottom; }
/* ---------->>> MENU <<<-----------*/
#menu { text-indent: -5000px ; }
ul#menu { padding: 0px ; margin: 0px ; list-style-type: none ; }
ul#menu li, ul#menu a
{ text-align: center ;
float: left ;
height: 30px ;
padding: 0px ; margin: 0px ;
display: block;
color: #000 ;
text-indent: -5000px ;text-decoration: none ;}
ul#menu a#menu1
{ width: 142px ;
background: url('../images/statique/interface/qui-suis-je.gif') no-repeat top;}
ul#menu a#menu2
{width: 139px ;
background: url('../images/statique/interface/galerie.gif') no-repeat top;
}
ul#menu a#menu3
{ width: 142px ;
background: url('../images/statique/interface/potes.gif') no-repeat top;
}
ul#menu a#menu4
{width: 127px ;
background: url('../images/statique/interface/articles.gif') no-repeat top;
}
ul#menu a#menu5
{width: 85px ;
background: url('../images/statique/interface/liens.gif') no-repeat top;
}
ul#menu a#menu6
{width: 196px ;
background: url('../images/statique/interface/univers.gif') no-repeat top ;
}
ul#menu a:hover#menu1,ul#menu a:hover#menu2,ul#menu a:hover#menu3,ul#menu a:hover#menu4,ul#menu a:hover#menu5,ul#menu a:hover#menu6
{ background-position: 0 -45px;
text-decoration: none;
}
/* ---------->>> CONTENU <<<-----------*/
#contenu { height: 100%; display: block; }Merci de votre aide,
amicalement
Modifié par Satanas147 (29 Nov 2006 - 18:29)
