18041 sujets

Questions générales et questions de débutants

Afficher texte sous photo mais à l'inverse dans le code

Bonjour,

Désolé pour ce titre, je ne savais pas comment le formuler.

Je vous explique mon problème, sur mon blog http://blog.planete-nextgen.com/ je voudrais effectuer une modification sur les pages catégories.

Actuellement j'ai une image et en dessous le titre de l'article. Visuellement ça me convient mais j'aimerai savoir s'il est possible dans le code d'afficher en premier le titre de l'article puis l'image (mais tout en gardant pour l'internaute image puis titre article) ?

Comment faire svp ?
Bonjour,

La seule façon a laquelle je pense c'est de créer une div pour ton titre et une div pour ton image et donc de gérer tes positions dans le css..
Hello,

Tu peux utiliser un modèle de tableaux CSS et ensuite tricher avec display:table-caption puis caption-side (top, bottom, etc.) pour déplacer ton image (compatible IE8). Sinon Y a order en flexbox (compatible IE10).
Du coup tu mets l'ordre que tu veux dans le HTML, et le change en CSS Smiley smile
Merci à vous deux pour vos réponses.

Stéphanie, est-ce que tu aurais un exemple stp afin que ça soit plus clair dans ma petite tête ^^ ?
Bonjour,

tu peut aussi jouer avec les caractéristiques des éléments flottant dans le flux avec clear et un pseudo-element.

L'idée est d’insérer via :before un élément flottant sans largeur et d'une hauteur définie, puis de forcer l'image à flotter et passer dessous avec un clear.

Les éléments adjacent et suivant sans contexte de formatage vont remplir tout l'espace et passé sous les flottants (caractéristique qui interloque le débutant).
Si il y a suffisamment d'espace libre au dessus de l'image, le texte va remonter pour s'y afficher.

CSS a tester :
.td_mod_wrap a:before {/* l’élément pousseur */
content:'';
float:left;
height:6em;/* ~2 lignes - 9em =~3 lignes */
}
.td_mod_wrap  .entry-thumb {
float:left;/* sortie du flux naturel*/
}
.td_mod_wrap  .entry-thumb,
.td_mod_wrap  .meta-info {
clear:left;/* je degage sous le flottant */
}


En gros c'est une astuce qui peut ressembler à order dans le modèle de display flex.

Si tu modifie ton html, la hauteur du flottant et l’élément a flotter en clear changent pour une méthode identique.
Modifié par gc-nomade (04 Feb 2015 - 16:05)
Sujet clos
Aller à