28173 sujets

CSS et mise en forme, CSS3

Probleme de bloc sur un menu...

bonsoir voilà jai un petit problème sur un code de menu, en fait tout n'est pas de moi, et jai un petit probleme sous ie, qui me met un background sur le bloc de texte, alors que sous firefox pas de probleme...

voici le code html

<div id="gauche">
	<p><strong> Travaux Récents </strong></p>
	  <dl id="menu">

			<ul id="navlist">
				<li id="active"><a href="../../index.php?page=2006" id="current">2006</a></li>
				<li><a href="../../index.php?page=Anti-Stars">Anti-Stars</a></li>
				<li><a href="../../index.php?page=Sportifs">Sportifs</a></li>
				<li><a href="../../index.php?page=Balneaires">Balnéaires</a></li>
			</ul>
		</dl>
	<p><strong> Archives </strong></p>
	  <dl id="menu">
			<ul id="navlist">
				<li id="active"><a href="../../index.php?page=Frères Humains" id="current">Frères Humains</a></li>
				<li><a href="../../index.php?page=Delivrance">Delivrance</a></li>
				<li><a href="../../index.php?page=Cours">Cours</a></li>
				<li><a href="../../index.php?page=Charitables">Charitables</a></li>
				</ul>
	  </dl>
	  <br />
		<dl id="menu">
			<ul id="navlist">
				<li id="active"><a href="../../index.php?page=Biographie" id="current">Biographie</a></li>
				<li><a href="../../index.php?page=Edition">Editions</a></li>
				<li><a href="../../index.php?page=Contact">Contacts</a></li>
				<li><a href="../../index.php?page=Liens">Liens</a></li>
			</ul>
		</dl>

	</div>


et le css...
#menu ul
{
margin: 0 2px;
padding-left: 0;
list-style-type: none;
font-size: 0.75em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:left;}
#menu a
{
display: block;
padding: 3px;
/*width: 70%;*/
background-color: #bbb;
text-align:left;
}
#menu a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#menu a:hover
{
background-color: #999;
color: #000;}

p {margin: 0 0 10px 0;}

ul#navlist
{
margin-left: 10;
text-align:center;
font-size: 0.75em;
white-space: nowrap;
}

#navlist li
{
background-color:#e8e8e8;
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 9px; }

#navlist a:link, #navlist a:visited
{
color: #222;
background-color: #e8e8e8;
text-decoration: none;
}

#navlist a:hover
{
color: #ff0000;
background-color: #fff;
text-decoration: none;
}


je ne trouve pas d'ou ca vient... Smiley rolleyes
Salut.

Ton code html n'est pas valide ... il y a plusieurs fois le même id pour des éléments différents, alors qu'il doit être unique.

Je te conseille de corriger tout ça avant d'aller voir plus loin.
html


<html>
<link rel="stylesheet" media="screen" type="text/css" title="Design"href="cssmenu.css" />
<body>
<div id="gauche">
	<p><strong> Travaux Récents </strong></p>
	  <dl class="menu">

			<ul class="navlist">
				<li class="active"><a href="../../index.php?page=2006" id="current">2006</a></li>
				<li><a href="../../index.php?page=Anti-Stars">Anti-Stars</a></li>
				<li><a href="../../index.php?page=Sportifs">Sportifs</a></li>
				<li><a href="../../index.php?page=Balneaires">Balnéaires</a></li>
			</ul>
		</dl>
	<p><strong> Archives </strong></p>
	  <dl class="menu">
			<ul class="navlist">
				<li class="active"><a href="../../index.php?page=Frères Humains" id="current">Frères Humains</a></li>
				<li><a href="../../index.php?page=Delivrance">Delivrance</a></li>
				<li><a href="../../index.php?page=Cours">Cours</a></li>
				<li><a href="../../index.php?page=Charitables">Charitables</a></li>
				</ul>
	  </dl>
	  <br />
		<dl class="menu">
			<ul class="navlist">
				<li class="active"><a href="../../index.php?page=Biographie" id="current">Biographie</a></li>
				<li><a href="../../index.php?page=Edition">Editions</a></li>
				<li><a href="../../index.php?page=Contact">Contacts</a></li>
				<li><a href="../../index.php?page=Liens">Liens</a></li>
			</ul>
		</dl>

	</div>
	</body>
	</html>


css: 

#gauche {
padding-top:45px;
float:left;
width:135px;
background-color:#e8e8e8;
margin-right:0px;
padding-right:0px;
height:438px;
margin-top:-3px;
}
.menu ul
{
margin: 0 2px;
padding-left: 0;
list-style-type: none;
font-size: 0.75em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:left;}
.menu a
{
display: block;
padding: 3px;
/*width: 70%;*/
background-color: #bbb;
text-align:left;
}
.menu a:link, .navlist a:visited
{
color: #EEE;
text-decoration: none;
}
.menu a:hover
{
background-color: #999;
color: #000;}

p {margin: 0 0 10px 0;}

ul.navlist
{
margin-left: 10;
text-align:center;
font-size: 0.75em;
white-space: nowrap;
}

.navlist li
{
background-color:#e8e8e8;
display: inline;
list-style-type: none;
}

.navlist a { padding: 3px 9px; }

.navlist a:link, #navlist a:visited
{
color: #222;
background-color: #e8e8e8;
text-decoration: none;
}

.navlist a:hover
{
color: #ff0000;
background-color: #fff;
text-decoration: none;
}


ceci dit le probleme de vient pas de l'id... et n'apparait que sous ie...
a écrit :
le probleme de vient pas de l'id... et n'apparait que sous ie...
j'ai pas dis que c'était la cause du problème, mais autant travailler sur des bases propres Smiley cligne

D'ailleurs, c'est pas encore gagné ... pas de doctype, pas de <head>, pas facile de s'y retrouver pour un pauvre navigateur plus tout jeune Smiley murf
Modifié par Sopo (26 Jul 2006 - 15:08)
Sujet clos
Aller à