Empêcher le chevauchement du gravatar et du pseudo des commentaires ?! (Créer un compte)

Bon, je continue de bucher les cours de CSS3 du siteduzero tout en essayant de procéder avec le peu encore trop de connaissances acquises jusqu’à présent.

J’ai pensé pour aller au plus simple utiliser FIREBUG.
Alors, j’ai « inspecté » un avatar et j’ai vu qu’en modifiant la règle suivante ainsi :

.commentlist .avatar {
	position: absolute;
	top: 4px;
	right: 0;
}

Sur mon écran avec FIREBUG, les avatars se placent bien à droite.

Tout content, je place ce code dans le fichier style.css (en local) et là aucun changement !

Je loupe encore quelque chose, décidemment, je suis un gros :boulet:

Je bûche les cours de CSS3 de l’excellent site du zéro pour les :boulet: comme moi, mais je n’ai pas encore trouvé si l’erreur est dans le codage du CSS ou alors si c’est un problème du thème enfant.

Bon, c’est vrai, je n’en suis qu’au chapitre 2 et certainement que la solution est dans le chapitre 4 !

Courage fainéant :fouet:

Ce que je ne comprends pas, c’est qu’avec Firebug j’ai ceci :

style.css:28
.commentlist .avatar {
position: absolute;
top: 4px;
right: 0;
}
/wordpress/index.php/sevrage-additifs/media= »all »    style.css:967
.commentlist .avatar {
[s]position: absolute;[/s]
[s]top: 4px;[/s]
left: 0;
}

les 2 premières propriétés sont rayées (je ne sais pas si on peut rayer dans une balise code sur le forum, d’où peut être les balise qui normalement rayent le texte. Bon, je verrais bien le résultat. 😇

Seules les deux propriétés position et top sont rayées, celle qui indique la position « left » n’est pas rayée d’après Firebug, donc est toujours prise en compte selon le CSS original de Twenty-Ten ! 😉

Bon, en modifiant la position de l’avatar de « absolute » en relative, il reste à gauche (faute de pouvoir le mettre à droite comme dans Daily-Good) mais au moins, il ne chevauche plus le pseudo.

.commentlist .avatar {
	position: relative;
	top: 4px;
	right: 0;
}

Je progresse petit à petit par essais-erreurs :fouet: , faute de comprendre la logique de cette erreur 😗 . J’ai lu presque tout les cours de CSS3 du site du zéro et je ne trouve pas ce qui empêche l’avatar de se placer à droite ! 😳

J’ai amélioré le fichier CSS du thème enfant en supprimant (grâce à Firebug) les propriétés qui étaient répétées à l’identique, donc inutilement. 💡

Le fichier style.css est désormais :

/*
Theme Name: Twenty Ten Daily-Good
Description: Thème enfant inspiré de Daily-Good pour le thème Twenty Ten 
Author:  luciole135
Template: twentyten
*/

@import url(« ../twentyten/style.css »);

a:link {
	color: #CE1031;
}
a:visited {
	color: #F39;
}

/* =Comments
————————————————————– */
.commentlist li.comment {
	border-left: 1px solid #F39;
	border-bottom: 1px solid #e7e7e7;
	margin: 0 0 24px 1px;
	padding: 0 0 0 5px;
}

.commentlist .avatar {
	position: relative;
	right: 0;
}

M’enfin, si quelqu’un a une idée pour mettre l’avatar à droite, je suis toujours prenneur !
😇