WordPress Francophone

J'ai un affichage conforme à ce que tu souhaites dans Firefox et IE7.

Dans l'article sous-marin, je pense qu'il manque dans ton CSS un { clear:both } sur ta classe .sociable

Ben il manque un clear both dans ta classe .sociable.

Puisque tu n'en as pas, ajoute-là !

clear te permet de marquer la fin d'un élément flottant (pour plus d'info : google est ton ami).

Pourtant, sur ta page de smelly sous-marin, il me semble que le problème est corrigé.

Recharge ta page en vidant le cache.

Si tu considères que les symptômes persistent, essaye de reformuler le problème que tu constates parce que, moi, je l'estime résolu.

Cher Mad2511,

Il est possible que ce soit toi qui aies la solution, néanmoins cela demande quelques éléments :
1/ que tu ne soies pas en mode panique ("arghhh")
2/ que tu prennes le temps de comprendre les réponses qu'on te fait
3/ que tu n'espères pas que tout te tombe « tout cuit » dans la bouche.

Autrement dit, les réponses qu'on te donne ici doivent t'aider
a) non seulement à résoudre ton problème
b) mais aussi à progresser de manière à ce que tu sois, toi-même, capable de résoudre les prochains soucis que tu rencontreras.

Tu dis que le problème persiste sur la page d'accueil, mais tu avais attiré mon attention sur la page sous-marin.
Tu auras noté que ma suggestion a corrigé le problème sur cette page. Elle n'était donc pas inefficace, mais elle n'était pas universelle.

À quoi sert le clear:both sur la classe sociable
Il sert à faire en sorte que la ligne d'éléments de bookmarking social ne se mette pas à la suite de ton article comme s'il était dans le corps de l'article, mais bien à la fin, après l'image flottante.
Le problème se pose parce que l'image flottante est plus HAUTE que le texte (court) de l'article. Comme il reste de la place, le navigateur considère qu'il peut continuer à écrire dans l'espace disponible.

Illustration (XXXX représente la photo)

Le problème, sur ta page d'accueil, c'est que tu n'as pas les éléments de bookmarking social, mais que tu passes directement à tes tags, encapsulés dans <div class="postmeta">

Tu devrais être capable d'en déduire ce que tu dois ajouter dans ta CSS.

Fais des essais ! clear:both un peu

Utilise Firefox avec le plugin Firebug qui te permet de modifier le code HTML et CSS d'une page afin de visualiser en live l'impact de tes modifications, c'est génial (et c'est avec ça que je te réponds).

(Ben oui, ça marche !)

Bon, pour la suite, il faut que tu repères, sur ta page, le premier élément « adressable » qui succède à ton widget « À propos ».
Par « adressable », j'entends : qui dispose d'un nom de classe ou d'un id qui te permette de le « cibler » dans ton CSS.

Pour cela, armé de FF + Firebug,
1/ tu charges la page en question
2/ tu actives Firebug et tu te places en mode "Edit" sur l'HTML (tu verras alors une zone HTML à gauche et CSS à droite)
3/ tu lances dans la zone de recherche de Firebug une recherche sur le texte de ton widget. Ça te permet d'atteindre la zone de code HTML concernée
4/ tu déplies le HTML pour te « repérer » dans ton code et tu recherches ce qui suit ton widget
5/ pour faire des tests, tu peux directement ajouter dans la zone CSS la propriété clear:both à l'élément que tu as sélectionné... et tu peux ainsi voir en live ce que tu devras effectivement modifier dans ton CSS.

Petite précision, même si c'est évident pour moi, je préfère le dire : ce que tu modifies avec Firebug n'est que la copie dans la mémoire de Firefox de ton code HTML/CSS. Une modification CSS via Firebug ne modifie évidemment pas la feuille de style CSS stockée sur ton serveur !

Attention, tu dois agir sur ce qui suit ta photo, et non le container de ta photo. Donc pas sur text-1 mais sur text-2.

C'est sur :
<li class="widget widget_text" id="text-2">
qu'il faut affecter un clear:both; (et ça marche)

Donc, si tu veux agir sur la classe :
.widget { clear:both; } ou bien .widget_text { clear:both; } ou encore .widget.widget_text { clear:both; }

Si tu veux agir sur l'id :
#text-2 {clear:both;}

Je te recommande de travailler au niveau de la classe, parce que ce comportement doit plutôt être généralisé, alors que si tu travailles sur l'ID, ça va re-déconner si tu modifies l'ordre de tes widgets.

C'est où que tu as merdé ?