28173 sujets

CSS et mise en forme, CSS3

Alterner les couleurs d'une liste ordonee <ol> [ resolu ]

salut à tous,

je suis en train de développer
un site qui contient plus de 500 articles, chaque article est constitué d'une liste ordonnée numérotée de type <ol> et chaque liste contient parfois jusqu'à 200 items;


ex :


<ol>
<li>item 1</li>
<li>item2</li>
<li>item3</li>
<li>actera ...</li>
</ol>


maintenant j'aimerai simplement pouvoir alterner la couleur ou la couleur de fond de chaque élément de liste sans avoir a préciser dans le code
<li style"couleur1></li><li style="couleur2"></li> je ne crois pas que ce soit directement possible en css ? peut être en javascript ?

est ce que quelqu'un a une idée

merci d'avance pour vos lumières

cedric.
Modifié par commodo (06 Nov 2007 - 20:00)
Je suis pas au courant d'un technique pour le faire directement en CSS (éventuellement en utilisant les counter ? En encore même pas sûr que ça marche, c'est même peu probable Smiley langue )

Donc je suis aussi preneur si quelqu'un connait une méthode pure CSS.

Par contre comment construis tu ta liste ? Car je ne vois pas ce qui t'empêche d'utiliser une boucle PHP (par exemple !) et alterner les "class=" tout bêtement (c'est ce que je fais pour ma part quand je souhaite faire ce dont tu parles, pour lister des mails, ou des fichiers par exemple).

Voilou, donc en attente d'autres propositions... Smiley smile
Modifié par Lideln (06 Nov 2007 - 17:16)
coucou merci pour ta reponse, pour construire mes liste je le fait directement sous spip (-# item1 -# item2 ...) et spip genere le code html <ol><li></li></ol>

je cherche a resoudre ce pb depuis pres d'une semaine et je suis persuadé que la solution va faire bcp d'heureux !
Hum désolé de mon ignorance mais connais pas spip Smiley langue

T'as pas de moyen de spécifier une classe en fonction de la valeur de ta boucle dans spip ? Tu peux le faire en PHP, Javascript, Smarty... Donc en spip aussi ?

En tous cas c'est la seule méthode que je connais, et encore une fois je suis preneur s'il existe une méthode pure CSS (genre avec les counter, sauf que je crois qu'ils sont utilisés seulement dans :before et :after... et donc absolument pas gérés par IE Smiley lol )
de toute facon spip n'a rien a voir avec le pb il me manque juste le bout de code css ou javascript qui va bien s'il existe. j'ai vu des solutions pour les tables avec firstchild et tout mais je ne sais pas du tout si ca peut marcher avec des listes
Salut,

un petit essai en Javascript :
<!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>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function AlterneColor()
{
	// si les méthodes n'existent pas, on sort...
	if(!document.getElementById || !document.getElementsByTagName)
	{
		return;
	}

	var OL = document.getElementById('liste');
	var LIs = OL.getElementsByTagName("li");
	for (var lien = 0; lien < LIs.length; lien++){
		var oElement = LIs[ lien]; // ne pas mettre d'espace avant lien
		// on change la classe du <li>
		if (lien%2 == 0) { // pair
			oElement.className = 'rouge';
		} else {
			oElement.className = 'bleu';
		}
	}
}

window.onload=AlterneColor;
</script>

<style type="text/css">
.rouge {
	color:red;
}

.bleu {
	color:blue;
}
</style>
</head>
<body>
<ol id="liste">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ol>
</body>
</html>

A+ Smiley smile
Modifié par Heyoan (06 Nov 2007 - 18:54)
hey mais ca a l'air super ça !
heyoan une fois de plus c'est toi qui me sauve la mise !
c'est genial merci

si toutefois quelqu'un a une solution en css je suis toujours preneur
heyoan

Sais tu si il y'a un moyen que ca marche avec <ol class="listes"> plutot que <ol id="listes"> ??

merci
commodo a écrit :

si toutefois quelqu'un a une solution en css je suis toujours preneur

CSS3 prévoit cette fonctionnalité mais elle n'est implémentée à l'heure actuelle que par très peu de navigateurs (Konqueror et Opera pour ne pas les citer).
Le principe:

li:nth-child(odd) {color:red}
commodo a écrit :
Sais tu si il y'a un moyen que ca marche avec <ol class="listes"> plutot que <ol id="listes"> ??

No problemo en utilisant la fonction getElementsByClassName de Julien Smiley cligne :
<!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>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//  http://forum.alsacreations.com/topic-5-3716-2-Fonctions-methodes-class-et-scripts-utiles.html#p184867
 
function getElementsByClassName(className, tagName, root) {
	var els = (root || (root = document)).getElementsByTagName(tagName || (tagName = "*"));
	if (!els.length && root.all && tagName === "*") {
		els = root.all;
	}
	var res = [], re = new RegExp("(^|\\s)" + className + "(\\s|$)");
	for (var i = 0, el; (el = els[ i]); ++i) {
		if (re.test(el.className)) {
			res[res.length] = el;
		}
	}
	return res;
}

function AlterneColor()
{
	// si les méthodes n'existent pas, on sort...
	if(!document.getElementById || !document.getElementsByTagName)
	{
		return;
	}

	var OL = getElementsByClassName("liste", "ol");
	var LIs = OL[0].getElementsByTagName("li");
	for (var lien = 0; lien < LIs.length; lien++){
		var oElement = LIs[ lien]; 
		// on change la classe du <li>
		if (lien%2 == 0) { // pair
			oElement.className = 'rouge';
		} else {
			oElement.className = 'bleu';
		}
	}
}
window.onload=AlterneColor;
</script>
<style type="text/css">
.rouge {
	color:red;
}
.bleu {
	color:blue;
}
</style>
</head>
<body>
<ol class="liste">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ol>
</body>
</html>

Attention car bien sûr getElementsByClassName retourne un tableau donc là j'ai mis OL[0] en supposant que tu n'as qu'une liste par page (sinon il faudrait boucler)...

A+ Smiley smile
Sujet clos
Aller à