[Résolu] Une liste horizontale avec différentes couleurs de fond

Bonjour à vous,

Je trouve Alsacreations très bien et pourtant, je n'ai pas trouvé la réponse à ma question. Ici ou ailleurs d'ailleurs.

Je cherche à mettre des couleurs de background différentes dans une même liste horizontale. Le texte contenu dans ces boites ne contiendra pas de lien.

Dans l'exemple ci-joint, j'aimerais que le fond de la 1ere boite soit vert; Jaune pour la 2eme.

Une solution existe ?


CSS:

	.enligne li {
		display: inline;
  		list-style-type: none;
		padding: 7px 12px 5px 12px;
  		background: #ffecce;
		float: left;
		width: 123px;
		text-align: center; 
}

HTML:

<div class="enligne">
		<ul>
			<li>fond vert</li>
			<li>fond jaune</li>
		</ul>
	</div>

Pour être plus concret, je vous montre un extrait de mon document illustrator (données fictives). Je me pose la question de savoir si des listes horizontales sont la solution pour ce genre de mise en page. Les couleurs différentes que je cherche à obtenir sont pour les deux verts qu'on voit sur l'image.

Est-ce qu'il y a quelque chose de mieux que les listes pour un travail précis ?



Au plaisir d'échanger.

Merci et à bientôt.
Modifié par paricilas1 (10 Nov 2006 - 23:59)

Pour ton exemple, l'utilisation d'un tableau de données semble plus approprié qu'un liste non-ordonné ...
Pour tes coluleurs je pense que tu peux régler ça avec les classe :

.vert {background-color: green}
.jaune {background-color: yellow}

Un tableau de données ? On peut donc utiliser les bonnes vieilles tables HTML sans soucis et sans faire sourciller ??

Je voulais tenter de me répondre... en CSS.
La manière vous paraît correcte ?

.prix {
height: 50px;
width: 300px;
float: left;
}
.bloc1 {
background-color: blue;
height: 25px;
width: 100px;
float: left;
}
.bloc2 {
background-color: green;
height: 25px;
width: 100px;
float: left;
}
.bloc3 {
background-color: red;
height: 100px;
width: 100px;
float: right;
} 

<div class="prix">
<div class="bloc3">bloc droite</div>
<div class="bloc1">bloc1</div>
<div class="bloc2">bloc2</div>
<div class="bloc1">bloc3</div>
<div class="bloc2">bloc4</div>
<div class="bloc1">bloc5</div>
<div class="bloc2">bloc6</div>
<div class="bloc1">bloc7</div>
<div class="bloc2">bloc8</div>

</div>

ça donne ceci (pour la forme, oublions les couleurs)



Modifié par paricilas1 (10 Nov 2006 - 09:36)

Salut,

Visiblement, tu fais la confusion fréquente XHTML=CSS et HTML=tableaux. Je te conseille d'aller faire un peu tour sur la faq (et de suivre les liens qui y sont proposés) pour t'éclaircir les idées.

Imagine le résultat si quelqu'un affiche ta page HTML sans les feuilles de style (par exemple avec un navigateur textuel).

Bonjour Eldebaran,

Ma confusion n'était pas tout à fait là... Mais il y en avait effectivement une et tu m'as aidé à la résoudre.

J'ai retenu: "Le W3C déconseille effectivement l'utilisation de tables pour les mises en pages, mais ne l'interdit pas pour autant."

J'ai fait des sites dans le passé (Je m'y remets), en HTML+CSS(CSS pour les polices et couleurs). Je pensais que de nos jours, il fallait complètement bannir l'utilisation des tableaux.

Voila merci à toi !

paricilas1 a écrit :
Je pensais que de nos jours, il fallait complètement bannir l'utilisation des tableaux.

Houlà non malheureuse !
La balise <table> ne doit surtout pas être bannie. Elle a une fonction qu'elle remplit très bien : structurer des données tabulaires (stats, calendrier, tarification, etc.).

Il est vrai qu'il est recommandé d'éviter tant que possible les tableaux de mise en page pour plusieurs raisons :
1- ils ne sont pas faits pour cela
2- ils allourdissent très souvent le code
3- ils complexifient toujours le code
4- ils peuvent rendre ton document bien moins compréhensible à certains handicaps visuels (notamment les multiples tableaux imbriqués)

Cependant, il ne faut pas être plus royaliste que le roi : il existe encore certains rares cas où les CSS ne sont pas assez bien implémentés (sur IE6 par exemple) et les tableaux deviennent alors la solution la plus évidente à manipuler :
- les alignements verticaux (http://forum.alsacreations.com/faq/#item3)
- les "colonnes" de même hauteur (http://forum.alsacreations.com/faq/#item17)


Dans ton cas précis, il me semble que les données à structurer sont parfaitement tabulaires, avec une abscisse et une ordonnée, donc le choix d'un tableau me semble le plus judicieux.
Modifié par Raphael (10 Nov 2006 - 20:14)

Merci pour ces éclaircissements Raphaël. Malheureuse... Je me demande si mon nick Paricilas (de Par ici la sortie) paraît féminin alors que... Finalement je n'aurais peut-être dû rien dire. Je suis certain qu'on est mieux servi en se faisant passer pour une femme. C'est un autre sujet.

J'ai pratiquement terminé cette colonne en forme et couleurs, html, css.. J'ai fait en 45 min ce que je cherchais à faire autrement depuis 3 jours.

Il ne me restera plus qu'à passer le tout en XSL pour joindre ma feuille XML.

Merci "collègues "de m'avoir enlevé cet épine du pied.

paricilas1 a écrit :
Malheureuse... Je me demande si mon nick Paricilas (de Par ici la sortie) paraît féminin alors que...

Oups, l'explication est encore plus simple : comme un bon vendredi soir, j'ai lu "Patricia1"

a écrit :
Merci "collègues "de m'avoir enlevé cet épine du pied.

Pas de soucis.
Si le sujet te paraît [Résolu], tu sais ce qu'il te reste à faire