28172 sujets

CSS et mise en forme, CSS3

Probleme de font dans un Menu horizontale avec UL LI

Bonjour,

J'ai sur mon site une partie haute (#header), dans laquelle j'ai un menu à onglet (<ul id="onglet"), et une partie basse dans laquelle j'ai un menu (#faqmenu).

les styles sont les même pour tout mes li du menu a onglet, et pourtant j'ai des différences entre la taille des caractères dans chaque onglet (seulement dans IE), et le texte des onglet ne prend pas le bon font (dans IE et Firefox).

Avec les barre d'outils je vois que le CSS appliqué a mes li est celui de #faqmenu, alors que j'ouvre et ferme correctement mes div et ul (si si, j'ai vérifié).

Pour que ce soit plus simple à comprendre, j'ai mis en ligne un exemple : <lien>http://darass.free.fr/test/index.php</lien>

On voit donc que le style appliqué au menu est celui de #faqmenu, alors que dans la code HTML je ne specifie pas de div portant ce nom (pas dans l'exemple du moins).


Voici le contenu du css :


#onglets {position: absolute;border: 0px solid transparent;padding: 0px;font : bold 12px Batang, arial, serif;list-style-type : none;left : 50%;margin-top : 0;width: 600px;}
#onglets li {float : left;height : 21px;background-color: #F4F9FD;margin : 2px 2px 0 2px !important;border : 1px solid #9EA0A1;}
#onglets li.active {border-bottom: 1px solid #fff;background-color: #fff;}
#onglets a {display : block;color : #666;text-decoration : none;padding : 4px;}
#onglets a:hover {background : #fff;}


#faqmenu {display: block;float: left;width: 170px;padding-top: 20px;}
#faqmenu ul{padding-left: 30px;padding-top: 0px;padding-bottom: 5px;list-style-image: url("../image/dossier.png");}
#faqmenu ul li{margin-top: 3px}
#faqmenu ul li, a, a:visited, p {font : 12px verdena, Batang, arial, serif;text-decoration: none;color : #666;}
#faqmenu a:hover {text-decoration: underline;}
#faqmenu p{padding-left: 5px;padding-bottom: 0px;color : #666;font : 11px verdana, Batang, arial, serif;FONT-SIZE: small;font-weight: bold;}



HTML : 


<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<!--Entete du Document-->
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Test</title>
		<link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css" />
		<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" /><![endif]-->
		<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" /><![endif]-->
		<!--[if IE 8.000]><link rel="stylesheet" type="text/css" href="css/ie8.css" /><![endif]-->
</head>
<body onload="setHover()">
	<div id="header">
		<div id="menu">  
			<ul id="onglets">  
				<li><a href="index.php">Page 1</a></li>  
				<li class="index.php"><a href="faq.php">Page 2</a></li>  
				<li><a href="index.php">Page 3</a></li>  
				<li><a href="index.php">Page 4</a></li>  
				<li><a href="index.php">Page 5</a></li>  
				<li><a href="index.php">Page 6</a></li>  
				<li><a href="index.php">Page 7</a></li>  
			</ul>  
		</div> 
	</div>
</body>
</html>
Salut,
rouliendelavegas a écrit :
j'ai des différences entre la taille des caractères dans chaque onglet
Ton doctype est commenté, commence déjà par régler ça Smiley smile .

rouliendelavegas a écrit :
le texte des onglet ne prend pas le bon font
Défini la police sur les liens, pas sur la ul.

rouliendelavegas a écrit :
le CSS appliqué a mes li est celui de #faqmenu
Tu confonds :
#faqmenu ul li,
a,
a:visited,
p {
    ...
}
avec 
#faqmenu ul li,
#faqmenu ul li a,
#faqmenu ul li a:visited,
#faqmenu ul lip {
    ...
}
Merci pour cette reponse, le probleme est resolus. Et d'autre aussi par la meme.

Tu vas peut etre m'aider sur un autre souci, toujour pour le meme menu, l'affichage sous IE8 n'est pas le meme que sous les autre navigateurs, tu saurais comment je fais pour inclure une euille de style exclusivement pour IE8 ?

Merci
a écrit :
comment je fais pour inclure une euille de style exclusivement pour IE8 ?
Eh bien avec des commentaires conditionnels, comme tu l'as déjà fait dans ton code. Attention toutefois au mode dans lequel tourne IE8 car en mode de compatibilité, il s'identifie en tant qu'IE7...
Sujet clos
Aller à