Intervertir deux elements dans le flux XHTML

Bonjour

Je souhaiterais savoir s'il est possible d'intervertir deux élément dans le flux XHTML.

J'ai définit une photo ainsi

<div class="photo">
  <span class="deco"/>
  <div class="entete">
    <span class="titre">a la mer</span>
    <span class="date">1er juillet 2006</span>					       
  </div>					
  <img src="photos/1_mini.jpg" alt="photo"/>
  <div class="commentaire">blah blah</div>
</div>

qui a mon sens décrit bien une photo.

Cepandant je souhaiterai créer un css qui présente les photos comme des polaroïds, donc avec le titre et la date en dessous. (tout en conservant le flux actuels qui convient à d'autres styles CSS)

Quelles solutions adopteriez vous?

Merci pour vos suggestions

Salut,

Le sens de lecture en français étant de haut en bas, je pense que ta div.entete devrais être en dessous de ta photo, puis apres tes commentaire.

Comme je le disais précédemment à mon sens l'entete vient avant.
J'ai d'autres css qui présentent d'abords les infos relatives à l'entête, puis la photo et enfin le commentaire.

Je souhaiterai changer le flux de mon XHTML pour ce skin au travers du css et en aucun toucher à mon xhtml.

Merci

Bonjour,

Tu peux te baser sur des décalages hors flux et des marges adéquates pour ajencer plus ou moins bien les choses, un peu dans cet esprit:

[#indigo][i]/* La valeur de top correspond à la hauteur de ton image */[/i][/#]
.entete {position:relative; [#darkred]top:150px;[/#] height:1em}

[#indigo][i]/* On crée les marges autour de l'image pour le repositionnement et le contenu qui suit */[/i][/#]
.photo img {margin:-1.2em 0 1.2em}

edit: bien sûr, c'est dans le cas où toutes tes miniatures ont la même taille...
Modifié par Benjamin D.C. (21 Apr 2007 - 19:36)

Merci

J'ai réussi à obtenir l'effet escompé.
J'ai positioner mon entête en relative en décalant le div vers le bas (top : 200px) et en remontant l'image vers le haut (top : -100px)

Le problème qui se pose maintenant, c'est lorsque j'augmente la taille du texte alors mon entête sort de mon cadre "photo". J'ai donc remplacer les "px" par des "ex" mais l'effet n'est pas le bon.

En effet, lorsque le texte grossi, l'entête descends (normal le "ex" est plus gros) alors que je souhaiterais l'effet inverse : quand le texte grossi, ce denier remonte afin de ne pas sortir du div "photo". Il faut donc que je le situe en relatif avec une unité em par rapport au bottom du div "photo"

Est ce possible?
(je ne sais pas si je me suis exprimé très clairement)

Edit :J'ai essayé le positionnement absolu mais cela place mon élément par rapport à la page et non au bloc parent (photo)
Modifié par mguez (22 Apr 2007 - 14:08)