28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Question peut-être toute bête, mais je galère pour faire un pauvre truc en CSS.

J'ai un contenu du type :


<div class="postWrapper">
    <div class="postTitle">
      <h2>Mon super titre</h2>
      <span class="date">15/03/2010</span>
    </div>
    <div class="postContent">
      <img src="monImage.jpg" alt="mon image" />
      <p>Lorem ipsum...</p>
      <p>Lorem ipsum...</p>
</div>


Mon but est d'aligner l'image à gauche, mais de ne pas avoir le titre au dessus. Le titre doit être à droite de l'image comme pour les paragraphes.

Je préfère éviter de toucher au XHTML. Je ne veux pas ajouter de classes en plus à l'image car je ne veux pas forcer mon client à le faire. De plus j'aimerais éviter de placer l'image avant le texte (tout étant saisi dans un meme textarea, cela me poussera à faire du simplehtmldom pour extraire l'image. De plus, je ne trouve pas cela logique de placer l'image avant le titre).

L'image est à largeur et hauteur variable, donc les positionnements à coups de marges en pixel ne fonctionneront pas.

Voilà, si quelqu'un à un trick magique pour faire cela... J'avoue que j'aimerais bien le connaitre.

Merci
Modifié par zmove (15 Mar 2010 - 11:35)
Salut,

Il n'est pas utile d'ajouter une classe sur l'image, il suffit tout simplement de l'appeler par un élément parent :
.postContent img {...}

Il ne te suffira qu'à spécifier les styles voulus à ton image.

Précisément dans ton cas je ne suis pas sur de comprendre ce que tu cherche à faire, peut être qu'une page en ligne et/ou un schéma permettrai(en)t de pouvoir t'aider. Smiley cligne
Bonjour,

Pour placer l'image à gauche, il faut la faire flotter, pour la faire flotter il faut que dans le code HTML elle soit placée avant les éléments qui doivent apparaitre à sa droite.
D'accord merci.

Cela me chagrine un peu de devoir adapter le contenu à la mise en page. Ce n'est pas vraiment accessible tout ça ! Smiley sweatdrop

Enfin tant pis, ce n'est pas une grosse histoire, mais je placerai mon image avant mon contenu. Merci pour vos réponses.

Je met donc "Résolu" entre guillemets Smiley lol
Modifié par zmove (15 Mar 2010 - 11:35)
zmove a écrit :
Cela me chagrine un peu de devoir adapter le contenu à la mise en page. Ce n'est pas vraiment accessible tout ça ! Smiley sweatdrop
L'accessibilité n'est pas en cause ici, il serait plus question d'un problème de flexibilité.