28220 sujets

CSS et mise en forme, CSS3

Voila en fait je suis débutant en CSS, mais j'ai tout de même commencé à comprendre qques trucs et à me débrouiller. Mais la j'aimerai faire quelque chose un peu plus compliqué. J'ai un blog dotclear, avec le plugin Gallery.

Dans la partie "thumbnails" j'ai fais en sorte que lorsqu'on passe la souris sur une image, le fond devienne rouge, et la bordure rouge plus foncé. Jusque la tout va bien. Lorsqu'un passe la souris juste en dessous de chaque image (dans la partie "x commentaires"), celle-ci se colore en vert.

Ce que j'aimerai bien faire c'est que lorsque l'on passe la souris sur l'image, que ce :hover entraine automatiquement le :hover de la partie juste en dessous.

Pour mieux comprendre je vous invite à aller y faire un tour : http://thewablog.free.fr/index.php?gallery/divers/choc#gallery

Voila la partie importante :

.gallery-thumbnail:hover {
	background : #ea5a00; 
	border:1px solid #d02100;
}

.gallery-thumbnail-desc:hover {
	background : #c9d300; 
	border-top: 1px solid #d02100;
}



J'espère que c'est possible à faire ce serait super ! Smiley lol

Edit : Ah et aussi, lorsque je valide ma feuille de style, il me dit qu'elle est valide, mais me donne toute une série d'avertissements. Comment je peux les corriger ? Si je rajoute a chaque fois une couleur de fond par exemple, ca alourdirait énormément non?
Modifié par wab (01 Oct 2005 - 23:10)
Bonjour,

Quelques raisons de ne pas faire ce genre de choses et de ne pas multiplier les effets inutiles au survol : http://www.temesis.com/dotclear/index.php/2005/05/25/124-hoverdose-de-survols

Mais si tu y tiens :
.gallery-thumbnail:hover .gallery-thumbnail-desc {
background : #c9d300; 
border-top: 1px solid #d02100;
} 


Une remarque : virer l'avertissement en commentaires conditionnels adressé aux utilisateurs d'IE. Outre qu'il est très mal stylé qu'il ridiculise le designer, il est à la fois inutile, contre-productif et agaçant pour les utilisateurs de ce navigateur. Il rappelle en outre furieusement l'époque du "Optimized for..." qui est justement à l'opposé de la démarche standard.

Faire de même avec le "trop cool pour IE", qui est presque pire dans la catégorie "sectaire". Respecter les utilisateurs.
Modifié par Laurent Denis (02 Oct 2005 - 04:27)
Je te remercie pour l'aide, ça marche maintenant Smiley smile

Ensuite j'ai bien appliqué les conseils que tu m'a donné. J'ai enlevé le "Trop Cool Pour IE" qui de toute façon s'affichait mal sur IE..., + le message pour les utilisateurs d'IE que je vais changer en un petit lien discret en haut a droite pointant vers la rubrique "A propos" de mon blog (et cela uniquement sur la page d'accueil). Il en resulte maintenant une page beaucoup plus légère (que ce soit au niveau du CSS ou du template.php), et voila...

En revanche pour le lien sur les "effets inutiles au survol", j'ai fais un petit tour de mon blog et j'ai essayé de ne pas trop en mettre je pense que ca ira. De toute facon dans les galeries de Dotclear, il y a déjà un effet de survol, j'ai juste voulu le rendre un peu plus coloré Smiley smile

Voila merci pour l'aide ah et si vous avez une solution pour la feuille de style peut être, pour éviter d'avoir tous ces avertissements... sinon si c'est pas grave bah tant pis.