28173 sujets

CSS et mise en forme, CSS3

Comment mettre en gras les numéros de <ol> ? [résolu]

Bonjour,
J'ai créé une liste ordonnée, avec pas mal d'éléments. Cette liste est un classement, donc j'ai préféré mettre la balise <ol> que <ul>.

Mais l'inconvénient de <ol> est que la numérotation est de type
1.
2.
3.

tandis que <ul> met des carrés ou des ronds noirs bien visibles.

Ma question est donc de savoir comment mettre dans la feuille de style une ligne afin de générer lesdits numéros en gras, j'ai tenté de le faire avec list-styleweight, mais celà n'est pas reconnu (et encore moins valide) ... existe-t-il une solution, si oui laquelle ?

Merci Smiley smile
Modifié par Gunner4902 (18 Jun 2007 - 09:29)
Salut Smiley cligne ,

Peut-être comme ça :

css
ol.toto {
	font-weight: bold;
}
ol.toto li span{
	font-weight: normal;
}

html
<ol class="toto">
	<li><span>du texte</span></li>
	<li><span>du texte</span></li>
	<li><span>du texte</span></li>
</ol>

A+
Tu peux aussi passer par un counter-increment pour une maîtrise poussée de tes puces numérotées, mais il est très mal supporté à l'heure actuelle, d'autant que :before n'est toujours pas implémenté par Internet Explorer.
Hello,

Avec l'exemple de Heyoan (même code HTML) :
ol.toto {
	font-weight: bold;
	color: red;
	font-style: italic;
	font-size: 2em;
}
ol.toto li span {
	font-weight: normal;
	color: black;
	font-style: normal;
	font-size: .5em;
}

Marche très bien sous Firefox, Opera, Konqueror et IE 6.
Florent V. a écrit :

Marche très bien sous Firefox, Opera, Konqueror et IE 6.

Chez moi ça ne fonctionne pas sous Opera 9 (mon seul navigateur Smiley murf )
Merci en tous cas, si vous avez d'autres méthodes, je suis preneur.
Gunner4902 a écrit :
Chez moi ça ne fonctionne pas sous Opera 9 (mon seul navigateur Smiley murf )

Tu es sûr ? J'ai Opera 9.2 et ça marche parfaitement.

Le code utilisé pour le test :
<!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" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Page de test</title>
	<style type="text/css">
	ol.toto {
		font-weight: bold;
		color: red;
		font-style: italic;
		font-size: 2em;
	}
	ol.toto li span {
		font-weight: normal;
		color: black;
		font-style: normal;
		font-size: .5em;
	}
	</style>
</head>

<body>

<ol class="toto">
	<li><span>du texte</span></li>
	<li><span>du texte</span></li>
	<li><span>du texte</span></li>
</ol>

</body>
</html>


Gunner4902 a écrit :
mon seul navigateur Smiley murf

?
Tu fais ça comment ? Pas évident de trouver un OS avec Opera comme navigateur par défaut...
Florent V. a écrit :
Tu fais ça comment ? Pas évident de trouver un OS avec Opera comme navigateur par défaut...


J'ai windows XP, mais ai désinstallé IE depuis Nlite, et comme sur mon vieil ordinateur Firefox me bloque le CPU au bout d'un moment à cause de ses fuites récurentes de mémoire, j'ai opté pour la rapidité et la légèreté de Opera, sans compter qu'il est le plus "compatible" pour le CSS Smiley cligne


Je viens de refaire le test, avec ton code, ça fonctionne, j'ai du avoir un problème de cache hier.

Merci de votre aide à tous Smiley smile
Gunner4902 a écrit :
J'ai windows XP, mais ai désinstallé IE depuis Nlite

Dire qu'il y en a qui trouvent le moyen de désinstaller Internet Explorer sous Windows, tandis que moi je trouve le moyen de l'installer sous Linux. Smiley biggol
Florent V. a écrit :

Dire qu'il y en a qui trouvent le moyen de désinstaller Internet Explorer sous Windows, tandis que moi je trouve le moyen de l'installer sous Linux. Smiley biggol


<aside>Et moi, je n'ai pas encore trouvé le moyen de faire tourner Safari sous Linux. Smiley biggol </aside>
Sujet clos
Aller à