CSS mise en page

[arno.]

Bonjour,
avec des CSS, j'aimerais bien avoir :
* du texte
* deux colonnes avec dans chacune d'elles, une image centrée et un texte également centré en dessous
* encore du texte

Et bon .... j'y arrive pas

Déjà, pour centrer mes images, je crée un div autour avec :

Code : Tout sélectionner

<div style="margin-right:auto;margin-left:auto;width:256px">

(si la largeur de l'image est de 256). et je mets mon image dans ce div. Je sais pas si y'a mieux, mais bon, ça marche.
Ensuite, pour faire les colonnes, je mets ce div dans un autre div avec :

Code : Tout sélectionner

<div style="position:absolute; left:0; width:50%;" >

(et récioproquement pour la colonne de droite.

Le problème c'est que si je veux écrire du texte après, ça le met derrière les images et c'est pas très pratique

voila le code total :

Code : Tout sélectionner

      <p>Un paragraphe dans lequel je raconte ma petite vie, je parle de la météo, ce genre de trucs.</p>

      <div style="position:absolute; left:0; width:50%;" >
         <div style="margin-right:auto;margin-left:auto;width:256px">
            <img src="image_gauche.png"/>
         </div>
         <p style="text-align:center">Légende centrée de l'image de gauche</p>
      </div>

      <div style="position:absolute;right:0;width:50%">
         <div style="margin-right:auto;margin-left:auto;width:322px">
            <img src="image_droite.png"/>
         </div>
         <p style="text-align:center">Légende centrée de l'image de droite</p>
      </div>

      <p>Et ici, un autre paragraphe afin de procéder à une étude comparative des oeuvres.</p>

et voila ce que ça donne en vrai :
http://ffsearchplugins.free.fr/divers/colonnes.html

alors si quelqu'un a une piste, ce serait sympa. Merci beaucoup.

[calimo]

Si j'ai bien compris tu voudrais que ton texte s'écoule de part et d'autre de l'image, un peu du genre un float:left-right ? Je ne crois pas que ce soit possible de faire ça

[arno.]

merci pour ta réponse
non, je veux pas que mon texte s'écoule, je veux exactement comme c'est là, les images centrées dans les colonnes avec les légendes en-dessous, sauf que la suite du texte devrait aller en dessous et continuer.

aller s'écrire en dessous de tout ça, pas derrière.
C'est pas possible avec des CSS, faut faire des tableaux ??

[arno.]

Bon finalement, je n'y suis pas arrivé et j'ai décidé de mettre les deux images l'une en dessous de l'autre, et c'est bien comme ça. Si quelqu'un sait comment faire, je suis toujours intéressé pour une prochaine fois, mais ça ne me servira pas dans l'immédiat.

[calimo]

Ah je comprend.
Du moment que tu sort ton <div><img /> du flux, (tu l'as mis en position absolue) ça complique les choses. En effet, ça ne fait plus partie du flux, donc ça ne compte plus comme quelque chose d'existant et ça ne décale donc pas la suite.

Solutions :

1. Ne pas mettre en absolue et laisser l'image dans le flux (relative ou static) (tu peux mettre tes 2 images dans un bloc non positionné aux dimensions fixées au moins pour la hauteur, et positionner tes images à l'intérieur de ce bloc)
2. Ou alors mettre une marge sur le paragraphe suivant

Mais si tu sors les blocs du flux eh ben... ils sont sortis du flux quoi