<li> de couleurs différentes et puces rectangulaires

Salut,

Je mets à jour mon portfolio et me rends compte que j'ai quitté la sphère du développement web trop longtemps

Pour mon nouveau site, je veux un design très simple, mais en lisant quelques tutoriaux je me suis rendu compte que dorénavant quand on voulait un design très simple on n'avait plus du tout besoin d'avoir des images et qu'on pouvait tout créer en css.

Ce que je souhaite, c'est avoir 5 boutons de couleurs différentes



Et que quand ma souris passe dessus, la couleur du bouton change, avec encore une fois une couleur différente par bouton.

J'avais commencé en utilisant des images et des #home:hover, mais j'ai un peu envie d'utiliser l'outil transition de css3 qui ne permet apparemment pas d'utiliser des images ; et je suis à peu près sûr que je peux le recréer en css et que ce sera moins lourd.

Donc pour l'instant, j'ai ça :

#home{
    color:#35dae8;
}
			
#home:hover{
	color:#e88835;
	-webkit-transition:color 0.5s;
	-moz-transition:color 0.5s;
	-o-transition:color 0.5s;
	-ms-transition:color 0.5s;
	transition:color 0.5s;
}

J'ai donc deux questions : j'ai vu sur ce site et d'autres que pour les menus, on utilisait beaucoup les listes, mais je me demande si c'est très recommandé quand on veut une couleur différente par bouton ?

Et je n'ai aucune idée de comment recréer la puce rectangulaire en css, qui elle aussi doit changer de couleur au passage de la souris.

Voilà, si quelqu'un a une idée

Ah, et encore un truc, j'utilise la police Trebuchet MS, et vu son nom je me demande si elle sera lisible sur les macs. Mais j'ai aussi cru comprendre que le problème des polices qui ne sont pas forcément disponibles sur l'ordinateur de l'utilisateur avait plus ou moins été résolu... Il y a quelque chose à faire ou ça devrait fonctionner tout seul ?

Merci !

Salut !
Un border-left de 5px ?

Un border-left fera très bien l'affaire.

Mr. Sandwich a écrit :
j'utilise la police Trebuchet MS, et vu son nom je me demande si elle sera lisible sur les macs.

Celle-ci fait partie des «core fonts» de Microsoft et est assez largement disponible sur Mac et Linux. Donc tu peux l'utiliser sans crainte. Par contre, ça peut être bien de spécifier au moins une police de substitution relativement proche (Arial par exemple, pour rester sur les core fonts). Et surtout, il faut prendre en compte le fait que pour diverses raisons la police effectivement utilisée peut être différente de celle demandée, de même que la taille du texte. Si ton design ou ton intégration part en sucette dans ces cas de figure, c'est que tu as mal fait le boulot.

Mr. Sandwich a écrit :
Mais j'ai aussi cru comprendre que le problème des polices qui ne sont pas forcément disponibles sur l'ordinateur de l'utilisateur avait plus ou moins été résolu... Il y a quelque chose à faire ou ça devrait fonctionner tout seul ?

Pour les fontes pas ou peu disponible par défaut sur les systèmes d'exploitation, et pour peu que tu aies les droits nécessaires (fontes libres ou fontes commerciales avec des licences de type WebFont), tu peux utiliser @font-face en CSS3. C'est un sujet à part entière, et je t'invite à te documenter:
http://www.alsacreations.com/article/lire/631-quelles-polices-pour-un-site-web.html
http://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html

Bonsoir,

Pour la disponibilité de Trebuchet MS, je crois que tu n'as pas de souci à te faire. Selon codestyle.org, elle est disponible sur 99,70% des PC, Windows, Mac et Linux confondus.

Voir, sur codestyle.org :

Combined font survey results

Donc, si tu n'as pas les droits, ce n'est pas vraiment un problème.

Sinon, pour les barres de ta liste, comme les autres : border-left.

Si tu utilise une liste, tu peux supprimer les puces de tes items de liste avec list-style: none (ou list-style-type: none).

Pour adresser des mises en formes particulières à chaque item de liste, utiliser les propriétés first-child, last-child, nth-child.

Voir :

Sélectionner les frères d'un élément en CSS
La propriété CSS :nth-child pour un contrôle absolu de vos listes
Personnaliser ses listes (css inside)
6.6.5 Les pseudo-classes structurelles

Voilà, voilà.
Modifié par thierry (18 Mar 2012 - 23:23)

Merci à tous pour vos réponses et votre réactivité !

Le border marche très bien, pour Trebuchet me voilà rassuré, il me reste donc le problème de la liste où les éléments sont de couleurs différentes. J'ai essayé d'utiliser la propriété nth-child mais je dois mal m'y prendre.

J'ai donc ça :

#menu{
			width: 250px;
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
			list-style: none;
			margin:0;
			padding:0;
			font-size: 2em;
		}	
		
		#menu li a{
			padding-left:15px;
			border-left:5px #35dae8 solid;
			color:#35dae8;
				
			-webkit-transition-property:color, border;
			-webkit-transition-duration:0.5s;
		}

		#menu li a:hover{
			padding-left:15px;
			border-left:5px #e88835 solid;
			color:#e88835; 
				
			-webkit-transition-property:color, border;
			-webkit-transition-duration:0s;
		}
			
		#menu li:nth-child(n+1) {
			border-left:5px #35dae8 solid;
			color:#35dae8;
		}
			
		#menu li:nth-child(n+2) {
				border-left:5px #1cbcff solid;
				color:#1cbcff;
		}
		
		#menu li:nth-child(n+3) {
				border-left:5px #3fffc9 solid;
				color:#3fffc9;
		}
		
		#menu li:nth-child(n+4) {
				border-left:5px #35e892 solid;
				color:#35e892;
		}
		
		#menu li:nth-child(n+5) {
				border-left:5px #3aff68 solid;
				color:#3aff68;
		}

Et le résultat, c'est que mes bords sont doublés : la première rangée a une couleur par bouton mais ne change pas de couleur au survol de la souris et la deuxième est comme le texte : de la même couleur sur chaque bouton mais il change au survol.

Le problème, c'est que je ne sais pas comment mêler nth-child et transition : j'indique une couleur différente dans chaque nth-child, mais ensuite il faut lui dire qu'au hover il change de couleur ; il me faudrait donc une formule du type "#menu li a:nth-child(n+1):hover" si vous voyez ce que je veux dire...

Je me demandais aussi si il y avait moyen de dire que de manière globale, tous les #menu li font une transition de la color et du border au passage de la souris, et de spécifier ensuite les couleurs séparément plutôt que de recopier pour chaque bouton les "-webkit-transition-property:color, border; -webkit-transition-duration:0s;" et autres formules pour chaque navigateur.

Je ne sais pas si je suis très clair, il se fait tard, si jamais mon message est incompréhensible n'hésitez pas à me le faire remarquer

Merci, bonne soirée !

Si tu peux éviter les nth-child et les remplacer par des classes je pense que tu gagneras en rapidité d'affichage, réutilisabilité et interopérabilité.

Ouais c'est ce que je me disais, mais je retombe sur le même problème qui est de créer une classe sur quelque chose qui ressemble à "#menu li a:hover". De base, je penserais à "#menu li.home a:hover", mais je crois pas que ça marche de mêler des id et des class ; y a une syntaxe particulière pour faire ce genre de choses ?

Une petite ambiance de copier-coller et de bases de CSS pas bien comprises ici, si je ne m'abuse.

Kaelig a écrit :
Si tu peux éviter les nth-child et les remplacer par des classes je pense que tu gagneras en rapidité d'affichage, réutilisabilité et interopérabilité.

- Rapidité d'affichage: non.
- Réutilisabilité: a priori non.
- Interopérabilité: oui pour la compatibilité avec IE 7-8. La pseudo-classe :nth-child() est supportée uniquement à partir d'IE9.

Mr. Sandwich a écrit :
je crois pas que ça marche de mêler des id et des class

Si, ça marche. Encore heureux!

Mr. Sandwich a écrit :
il me faudrait donc une formule du type "#menu li a:nth-child(n+1):hover" si vous voyez ce que je veux dire...

Plutôt:

#menu li:nth-child(1) a {
  border-color: ...; color: ...;
}
#menu li:nth-child(1) a:hover, #menu li:nth-child(1) a:focus {
  border-color: ...; color: ...;
}

Mr. Sandwich a écrit :
Je me demandais aussi si il y avait moyen de dire que de manière globale, tous les #menu li font une transition de la color et du border au passage de la souris

Tu peux dire que pour tous tes liens dans ton menu les changements de valeurs se font avec une transition:

#menu a {
  transition: .5s; /* équivalent à `all 0.5s ease 0s` */
}

Ensuite, tu changes tes couleurs au survol (et au focus), pas besoin de redéfinir la transition qui est déjà définie sur l'élément.

a écrit :
Une petite ambiance de copier-coller et de bases de CSS pas bien comprises ici, si je ne m'abuse.

Tu ne t'abuses absolument pas

Non j'ai un peu tout appris sur le tas y a un moment, donc effectivement avec des bases pas forcément bien intégrées, et là les oublis de certains trucs évidents (comme le border-left) s'ajoutent aux nouveautés du css3 que je ne connais pas mais qui est trop cool pour que je m'en passe

Merci pour les réponses, ça marche nickel, et tant pis pour les IE inférieurs à 9 !

Je copie le code pour ceux que ça intéresse :

CSS :

       
                #menu{
			width: 250px;
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
			list-style: none;
			margin:0;
			padding:0;
			font-size: 2em;
		}	
		

		#menu a{
			padding-left:15px;
			border-left:5px solid;
			transition:0.5s;
			-webkit-transition:0.5s;
			-o-transition:0.5s;
			-moz-transition:0.5s;
			-ms-transition:0.5s;
		}	
		
		#menu a:hover{
			transition:0s;
			-webkit-transition:0s;
			-o-transition:0s;
			-moz-transition:0s;
			-ms-transition:0s;
		}

		#menu li:nth-child(1) a {
			border-left-color:#35dae8;
			color:#35dae8;
		}
			
		#menu li:nth-child(1) a:hover {
			border-left-color:#e88835;
			color:#e88835;
		}
			
		#menu li:nth-child(2) a {
				border-left-color:#1cbcff;
				color:#1cbcff;
		}
			
		#menu li:nth-child(2) a:hover {
				border-left-color:#ffb51c;
				color:#ffb51c;
		}

               etc.

HTML :

        <ul id="menu">
		<li><a href="#">HOME</a></li>
		<li><a href="#">VIDEOS</a></li>
		<li><a href="#">3D GALLERY</a></li>
		<li><a href="#">2D GALLERY</a></li>
		<li><a href="#">ABOUT</a></li>
	</ul>

Merci encore !
Modifié par Mr. Sandwich (21 Mar 2012 - 01:38)