28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je me présente rapidement puisque je postais déjà ici il y a quelques années (sous pseudo Makushimu je pense) puis j'ai lâché un peu le webdesign... mais je reviens aujourd'hui après avoir revu un peu tous les tutoriaux css/xhtml d'Alsacréations pour m'attaquer à mon tumblr !

Donc le thème est presque fini (http://macsym.tumblr.com) il est relativement homogène entre les navigateurs (quelques problèmes d'em persistent pour la taille de certains éléments mais rien de choquant) ce qui me dérange c'est qu'après avoir essayé de nombreuses combinaisons pour enlever la bordure jaune pointillée (présente sous mes liens en hover) persiste sous les images (qui sont elles-même des liens) de manière très disparate selon les navigateurs.

Sur Safari par exemple elle disparaît bien, mais elle demeure sous Firefox et Camino, sous Opera c'est selon certains essais que j'ai pu faire. Bref je pensais pouvoir régler le problème seul mais apparement non donc je me permets ce petit topic. Je pense avoir respecté les règles du forum en vérifiant qu'il n'avait pas de sujet similaire (ou j'ai mal cherché). Je suppose que je dois vous copier-coller une partie du code, le problème étant qu'apparemment c'est un élément plus fort qui agit sur le style donc je ne sais trop qu'elle partie vous copier-coller ici.

Merci d'avance.
Modifié par Macsym (02 Sep 2009 - 16:59)
Salut,

en même temps ça ne fait que suivre ta déclaration css :

.content a:hover {
	border-bottom-style: dotted;
	padding-bottom: 0.2em;
	border-bottom-width: 0.08em;
}
Tu pourrais par exemple affecter une class particulière aux liens qui contiennent des images et rajouter :

.content a.particuliere:hover {
	border: none;
	padding-bottom: 0;
}
Accessoirement ce serait une bonne idée de valider ton code. Smiley cligne
Modifié par Heyoan (02 Sep 2009 - 14:32)
Merci Heyoan !

C'était un peu compliqué car en fait tumblr utilise son propre langage à balise et je n'avais pas la possibilité de mettre une classe pour le lien, mais j'ai fini par trouver des balises encore plus précises me permettant de n'utiliser que l'url (et donc de ne remplir que le href="" avec la balise du langage tumblr).
Ce qui donne quelque chose comme ça maintenant :
a écrit :
<a href="{LinkURL}" class="pictures" target="_blank"><img src="{PhotoURL-500}" alt="{PhotoAlt}" title="{PhotoAlt}"></a>


Je m'occupe maintenant de valider le code.

Encore merci !
Yeap j'étais en train de le faire mais je tenais à vérifier sur tous mes navigateurs. C'est chose faite !