28173 sujets

CSS et mise en forme, CSS3

Font-weight:bold; marche pas dans un bloc type ul li ???

Bonjour,


/* Fonts */
#nested #first_level a.LinkIn { 
	font-weight:bold ;  /* <--- Marche pas sauf sur Safari/Mac ??? */
	font-variant:small-caps;
	font-size: 1.3em;
	color: #FFF;
}
#nested #second_level a.LinkIn { 
	font-weight:bold ;
	font-variant:normal;
	font-size: 1em;
	color: #FFF;
}
#nested #third_level a.LinkIn { 
	font-variant:normal;
	font-size: 0.9em;
	color: #FFF;
}


Ma question va peut être vous paraitre bête mais pourquoi n'y a t'il que Safari sous Mac qui veuille bien m'afficher les dits-textes en gras ?

Pour situer, #nested est une div contenant un menu sous forme d'arborescence en listes à puces.

#first, #second et #third_level sont les id associés aux éléments (ul li) des listes en fonction de leurs niveaux dans l'arbo.

C'est à n'y rien comprendre, ca fait le deuxième modèle que je réalise qui me pose porblème à ce niveau là.

Ya une ruse de sioux à côté de laquelle je serais passé sans savoir ?

(le pire c'est que je suis sûr que c'est un truc bête comme choux Smiley lol )
Modifié par Zzz. (04 Sep 2007 - 16:51)
Modérateur
Bonjour Zzz.,

Pourrais-tu, s'il te plait, éditer le titre de ton sujet afin de le rendre plus explicite ? Celà facilitera les recherches d'autres membres ayant le même problème que toi... entre autres.

Merci d'avance. Smiley smile
Vraiment personne n'a une petite idée ?


(pourtant 2 fois j'ai ré-édité le titre pour qu'il soit compréhensible Smiley cligne )
Administrateur
Bonjour,

un exemple en ligne nous aiderait grandement Smiley cligne
C'est quelque chose comme ça? (j'ai simplifié des choses redondantes mais ça fonctionne pareil avec tes 3 règles)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>tricolore</title>
    <style type="text/css" media="screen" id="test">
	    /* Fonts */
#nested #first_level a.LinkIn { 
	font-weight:bold ;
	font-variant:small-caps;
	font-size: 1.3em;
	color: red;
}

#nested #second_level a.LinkIn { 
	font-variant:normal;
	font-size: 1em;
	color: #CCC;
}

#nested #third_level a.LinkIn { 
	font-size: 0.9em;
	color: blue;
}
	</style>
</head>
<body>
<div id="nested">
    <ul id="first_level">
	    <li><a href="#" class="LinkIn">niveau un</a></li>
		<ul id="second_level">
		    <li><a href="#" class="LinkIn">niveau deux</a></li>
			<ul id="third_level">
			    <li><a href="#" class="LinkIn">niveau trois</a></li>
			</ul>
		</ul>
	</ul>
</div>
</body>
</html>

Je ne vois pas où est le souci, c'est bien en gras avec Fx 2.0 sous WinXP Smiley cligne

Est-ce que tu as regardé avec Firebug en "Inspect"ant les liens de classe LinkIn quelles règles s'appliquaient et dans quel ordre avec quelles propriétés s'annulant l'une l'autre? Les 3 règles que tu as donné s'appliquent toutes les trois à un lien dans un <li> de niveau 3, en vertu de: Cascade CSS et priorité des sélecteurs (Openweb, Laurent Denis) mais comme on a pas de page en ligne ... (je l'ai déjà dit? Smiley rolleyes )
Modifié par Felipe (04 Sep 2007 - 21:41)
Bon... alors j'ai regardé avec FireBug, le soucis c'est que je ne maitrise pas encore très trsè bien cette petite bête là.

Je soupsonne un bloc de code de me mettre la pagaille lorsqu'il je cite "reset certains styles par défaut".


* {/*reset d'un certain nombre de styles css par defaut*/
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}


D'ailleurs, des blocs qui commencent par "*" perso j'avais encore jamais vu.

Enfin bref... normalement en déclarant les chemins des conteneurs comme je l'ai fait, j'aurais du passer par dessus cette règle là non ?



Pour l'exemple en ligne, je suis navré mais je n'ai pas le droit. C'est un projet sur lequel je travaille à mon boulot (stage), et si je file un quelconque accès à la page, ma boîte va me tomber dessus. J'immagine bien que ça ne vous aide pas beaucoup à m'aider, ça me fait un peu ch... aussi d'ailleurs, mais je n'ai pas le choix. Smiley ohwell

Cependant Felipe, ton exemple reproduit parfaitement mon cas de figure. Smiley cligne

Bonne journée à tous et merci encore à ceux qui pourront me donner une idée, même vague, de ce que pourrait-être le soucis.
Up !

Bon alors visiblement, le soucis se pose toujours et sur 3 sites différents ce coup-ci utilisant le même CMS. Dès que je fais un menu dans cette configuration (même nom de Div, mêmes id, mêmes classes) le texte en gras n'apparait pas, que je l'applique au contenu de la div, du ul li, du ul tout court, du li tout court ou des liens a.

L'inspect du DOM n'a rien donné de concluant (du moins à mon niveau) et ce qui m'étonne c'est que toutes les autres instructions CSS passent sans problème.

Je comprends toujours pas et au vue des réponses visiblement je ne suis pas le seul donc je continue ma chasse au bug et si je trouve je ré-up Smiley cligne

Bonne soirée.
Sujet clos
Aller à