Alignement de textes tout autour d'une image principale

Bonjour,

J'ai un petit problème de mise en page (comme tout le monde ici ). Voilà: le designer intransigeant qui a fait le design VEUT ça:

http://test.jmgonet.com/layout.gif

Ça fait deux jours que je trimme, et je n'ai aucune idée de comment y arriver:

http://test.jmgonet.com/homeCSS2_TRIS.htm
(La css est ici).

- J'ai fait un div (Jaune) pour l'entête. Même qu'elle n'est pas parfaite, pour le moment ce n'est pas le problème.
- J'ai fait un div (bleu) pour le contenu principal. Dans celui-ci j'ai placé l'image (mis un bord roge pour la rendre visible), et les trois textes.
- J'ai fait un div (rose) pour le navigateur. Lui non plus, il n'est pas fini, mais il est placé grosso-modo où je veux.

Ce que je n'arrive pas à faire, c'est de placer les 3 textes à droite de l'image.

En tagnassant, j'ai crié victoire hier soir, mais ce matin j'ai vu que ça ne marche que sur IE. De toutes façons je pense que cette solution a trop de hacks dans les positionnements.

Bon, si quelqu'un veut bien m'aider, ce sera un gros bisou sur la bouche!
Modifié par jmgonet (20 Apr 2005 - 14:03)

Bon, je n'y tiens plus, je vais faire avec des tableaux. C'est si simple! Et ça marche avec tous les browseurs!

http://test.jmgonet.com/home_classic.htm

C'est dommage. Je trouve que de conserver une structure sémantique dans le document HTML, et de placer la présentation dans un fichier séparé, est un très joli concept.

Mais, dans mon cas, il me semble irréalisable.

En plus de ça, mes pages sont générées par des scripts PHP qui, eux, vont chercher les textes qui se trouvent en XML, puis produisent le code HTML.

Donc j'ai quand-même une séparation corrècte entre contenu et présentation. C'est juste que la sauce est liée par les scripts PHP, et pas par le browseur avec l'aide de la CSS.

PS: J'ai quand-même gardé le menu en CSS.

Bonjour,

Libre à toi de retourner aux tableaux, mais à ta place, j'essayerais d'être un peu plus patient. En ce moment, je n'ai pas le temps de t'aider, mais je vais voir ce que je peux faire ce soir. J'ai regardé rapidement ce que tu veux faire, et il me semble que c'est réalisable en CSS avec l'image en float left, et un div avec un margin-left contenant ton texte. Sinon, il reste toujours le positionnement en absolu, mais c'est une solution de dernier recours.

Donc, un peu de patience, je vais voir ce que je peux faire ce soir et d'ici là, peut-être que d'autres membres tenteront de t'aider.

Ne te décourage pas aussi vite, ce n'est pas le premier obstacle que tu va rencontrer dans ton cheminement webesque.

Merci. Ne perds pas ton someil, quand-même! Faut pô stresser.

J'ai essayé de suivre les conseils que tu m'as donné. J'ai sortit l'image du diviseur principal, et j'ai quelque chose comme:

   <img alt="Saturn" class="mainimage" src="saturn.jpg"/>
   <div class="maincontent">
       <h3>Un texte...</h3>
       <h2>Un autre texte...</h2>
       <h4>Encore un texte...</h4>
   </div>

Pour l'image, je l'ai fait flotter à gauche. Mais pour ce qui est du margin-left, je suis obligé de le mettre sur la photo (comme la photo est en float, elle sort du flux de positionnement, et le margin-left du div "maincontent" se perd derrière). Donc j'ai fait ça:

.maincontent {
 background-color: #aaffff;
 border:thin solid blue ;
}
img.mainimage {
 margin-left:85px;
 margin-right:65px;
 border:thick solid red ;
 float:left;
}
h2 {
 width:200px;
 color:#000000;
}
h3 {
 width:200px;
}
h4 {
 width:200px;
}

Le résultat est encourageant.

Mais, comme maintenant la photo est en float, le div "maincontent" a une taille qui ne dépend plus que du texte qu'il contient. Je n'arrive pas à imaginer comment aligner le h2 avec le bas de l'image.

J'ai vu un autre problème encore: sur FF, dés qu'on spécifie une largeur avec width (comme j'ai fait pour h2, h3, h4), il ne tient plus compte du float!

Ce que je proposais, c'était de mettre l'image en float left, et ton div maincontent avec un margin-left d'au moins la largeur de ton image. De cette façon, même si l'image est sortie du flux du document, ton div ne va pas derrière. Il se place à droite de l'image. Commence par ca, fais en sorte que ca fonctionne, et ensuite, on verra pour rétablir le flux en dessous de l'image afin que ton conteneur tienne compte de la hauteur de ton image. C'est réalisable, je t'assure.

J'aimerais prendre le temps de te donner un exemple concret, mais je suis au boulot, je réponds très vite.

C'est pourquoi ce soir je risque d'être plus disponible pour t'aider.

J'ai pris deux minutes pour pondre rapidement un petit bout de code. C'est qu'un exemple, j'ai pas pris la peine de tester partout et de mettre le code CSS dans une feuille de style. C'est pour te donner une piste de solution.

<div id="cadre_principal" style="background-color:#FFFF00;width:100%">
	<img src="saturn.jpg" alt="Saturn" width="290" height="500" class="mainimage" style="float:left" />
	<div class="maincontent" style="margin-left:300px;">
		<h2>Un autre texte...</h2>
                <h3>Un texte...</h3>
		<h4>Encore un texte...</h4>
	</div>
	<hr style="clear:both;" />
</div>

Attention, lorsque tu utilise des éléments flottants, assures-toi de toujours donner une largeur au conteneur qui contient l'élément flottant, sinon ca bug dans IE. C'est pourquoi j'ai donné 100%. Fais aussi attention à l'ordre des balises h1,h2,h3. Il faut que ca parte de 1, ensuite 2, ensuite 3 etc.. Il faut aussi les utiliser comme titres, et non pas comme paragraphes. Tu le sais probablement déjà, mais je précise, au cas où.
Modifié par Merkel (20 Apr 2005 - 17:07)

J'ai écrit tout ce qui suit rien que pour démontrer que les CSS ne valent pas un clou! Alors j'ai voulu trouver des arguments de choc pour argumenter mon point de vue qui, je le devinais, allait être impopulaire ici. Chemin faisant, je me suis laissé convaicre que peut-être (mais seulement peut-être), les CSS ont encore une chance ici en cette vallée de larmes.

Peut-être que ce sera utile pour d'autres aussi ignares que moi:

1. Si un container père en positionnement absolu contient des éléments fils en positionnement absolu, les coordonnées des fils sont par rapport à celles du père (exemple 1):

<p>1</p><p>1</p><p>1</p><p>1</p>
<div class="pere" style="position:absolute; top:100px; left:100px; background-color:#ffffaa;">
Je suis le pere
<p class="fils" style="position:absolute; top:50px; left:50px; background-color:#aaffff;">Tel pere, tel fils</p>
</div>

2. Si le père est en positionnement relatif, les coordonnées absolues des fils sont toujours par rapport à celles du père (exemple 2):

<p>1</p><p>1</p><p>1</p><p>1</p>
<div class="pere" style="position:absolute; top:100px; left:100px; background-color:#ffffaa;">
Je suis le pere
<p class="fils" style="position:absolute; top:50px; left:50px; background-color:#aaffff;">Tel pere, tel fils</p>
</div>

3. Par contre, si le père est en positionnement statique, les coordonnées absolues des fils sont par rapport à l'origine du document. Ou bien, j'imagine, par rapport au coordonnées du grand-père, arripère-grand-père, ... le plus proche ancetre qui se trouve en positionnement relatif ou absolu (exemple 3):

<p>1</p><p>1</p><p>1</p><p>1</p>
<div class="pere" style="background-color:#ffffaa;">
Je suis le pere
<p class="fils" style="position:absolute; top:50px; left:50px; background-color:#aaffff;">Tel pere, tel fils</p>
</div>

4. On peut spécifier un positionnement absolu ou relatif, tout en gardant la position "statique". Pour cela il suffit de ne pas indiquer "top", "left", "bottom" ou "right" (exemple 4):

<p>1</p><p>1</p><p>1</p><p>1</p>
<div class="pere" style="position:relative;background-color:#ffffaa;">
Je suis le père
<p class="fils" style="position:absolute; top:50px; left:50px; background-color:#aaffff;">Tel père, tel fils</p>
</div>

Pour moi, jusqu'ici j'arrive a y voir de la logique. Le positionnement absolu se fait par rapport à l'ancêtre le plus proche qui est positionné, en sachant que le document est toujours positionné à 0,0.

Mais où je trouve que ça cloche, c'est quand on utilise les coordonnées en %. Dans les suivants exemples j'ai agrandi la taille du père (par le simple moyen d'y ajouter du texte).

5. Pour commencer, un exemple facile. C'est à peine une modification de l'exemple 1. C'est sans surprises, le fils se trouve exactement à l'origine du père:

<p>1</p><p>2</p><p>3</p>
<div class="pere" style="position:relative; background-color:#ffffaa;">
<p>Je suis le pere</p><p>Je suis le pere</p><p>Je suis le pere</p>
<p class="fils" style="position:absolute; top:0%;background-color:#aaffff;">Tel père, tel fils</p>
</div>

6. Ici je spécifie la hauteur du fils à 50% de celle du père. Mais le résultat me surprend: Moi je me serais attendu à voir le fils sur "je suis le père 2". Par contre il est là en bas. Pourquoi? Ce n'est pas tout à fait la même chose sur IE que sur FF. Mais dans les deux cas ça me paraît trop bas.

<p>1</p><p>2</p><p>3</p>
<div class="pere" style="position:relative; background-color:#ffffaa;">
<p>Je suis le pere 1</p><p>Je suis le pere 2</p><p>Je suis le pere 3</p>
<p class="fils" style="position:absolute; top:50%;background-color:#aaffff;">Tel père, tel fils</p>
</div>

7. Mais, avec une petite modification de l'exemple précédant, on arrive, seulement pour FF, au résultat au quel je m'attendais. Il suffit d'annuler les marges que la balise "p" comporte, pour voir clairement que "tel père tel fils" se trouve bien au milieux du père:

<p>1</p><p>2</p><p>3</p>
<div class="pere" style="position:relative; background-color:#ffffaa;">
<p>Je suis le pere 1</p><p>Je suis le pere 2</p><p>Je suis le pere 3</p>
<p class="fils" style="margin: 0; padding: 0;position:absolute; top:50%;background-color:#aaffff;">Tel père, tel fils</p>
</div>

8. Par contre, je ne comprends pas où IE va chercher le 50%. C'est le 50% de quoi, au juste?. Pour rigoler, voici ce qui se passe si on spécifie 100%. Sur FF il met le fils juste là où je m'y attendais. Par contre IE est un peu bas. Même en visant mal, il me semble que c'est de l'abus:

<p>1</p><p>2</p><p>3</p>
<div class="pere" style="position:relative; background-color:#ffffaa;">
<p>Je suis le pere 1</p><p>Je suis le pere 2</p><p>Je suis le pere 3</p>
<p class="fils" style="margin: 0; padding: 0;position:absolute; top:100%;background-color:#aaffff;">Tel père, tel fils</p>
</div>

9. Mais voici, si on spécifie que le père est en positionnement absolu, alors tout rentre dans l'ordre!:

<p>1</p><p>2</p><p>3</p>
<div class="pere" style="position:absolute; background-color:#ffffaa;">
<p>Je suis le pere 1</p><p>Je suis le pere 2</p><p>Je suis le pere 3</p>
<p class="fils" style="margin: 0; padding: 0;position:absolute; top:50%;background-color:#aaffff;">Tel père, tel fils</p>
</div>

10. Saisi d'une illumination subite, j'ai cru voir une solution à mon problème (qui est de placer des textes autour d'une image): Je place mes textes avec left:100% (ce qui est à droite de l'image, quelle que soit la taille de l'image), puis après je joue avec top et bottom, comme ceci:

<p>1</p><p>2</p><p>3</p>
<div class="pere" style="position:absolute; background-color:#ffffaa;">
<p>Je suis le pere 1</p><p>Je suis le pere 2</p><p>Je suis le pere 3</p>
<p class="fils" style="margin:0; padding:0; position:absolute; bottom:0%; left:100%; background-color:#aaffff;">Tel père, tel fils 1</p>
<p class="fils" style="margin:0; padding:0; position:absolute; top:0%; left:100%; background-color:#aaffff;">Tel père, tel fils 2</p>
<p class="fils" style="margin:0; padding:0; position:absolute; margin-top:65px; top:100%; left:100%; background-color:#aaffff;">Tel père, tel fils3</p>
</div>

11. Ouais, ça donne quelque chose... Mais j'ai encore des doutes: Sur FF, quelqu'un sait pourquoi la couleur de fond (qui devrait être bleue) a disparu? Et sur IE, pourquoi la largeur des blocs bleus est si étroite? Bon, on m'a déjà dit que sur IE il faut toujours spécifier la largeur d'un bloc. À priori il me semble que ça peut poser problème suivant les cas, mais dans le mien je sais que la largeur c'est 200px (c'est le design qui le dit), donc:

<p>1</p><p>2</p><p>3</p>
<div class="pere" style="position:absolute; background-color:#ffffaa;">
<p>Je suis le pere 1</p><p>Je suis le pere 2</p><p>Je suis le pere 3</p>
<p class="fils" style="margin:0; padding:0; position:absolute; width:200px; bottom:0%; left:100%; background-color:#aaffff;">Tel père, tel fils1</p>
<p class="fils" style="margin:0; padding:0; position:absolute; width:200px; top:0%; left:100%; background-color:#aaffff;">Tel père, tel fils 2</p>
<p class="fils" style="margin:0; padding:0; position:absolute; width:200px; margin-top:65px; top:100%; left:100%; background-color:#aaffff;">Tel père, tel fils 3</p>
</div>

12. Ouais, ouais, ouais. On s'approche. Je ne vais pas crier victoire encore. J'ai la marge à gauche et à droite de la photo, à respecter. Mais il me semble qu'en utilisant un peu de margin ça devrait aller:

<p>1</p><p>2</p><p>3</p>
<div class="pere" style="margin-left:85px; margin-right:65px; position:absolute; background-color:#ffffaa;">
<p>Je suis le pere 1</p><p>Je suis le pere 2</p><p>Je suis le pere 3</p>
<p class="fils" style="margin:0; padding:0; position:absolute; width:200px; bottom:0%; left:100%; background-color:#aaffff;">Tel père, tel fils1</p>
<p class="fils" style="margin:0; padding:0; position:absolute; width:200px; top:0%; left:100%; background-color:#aaffff;">Tel père, tel fils 2</p>
<p class="fils" style="margin:0; padding:0; position:absolute; width:200px; margin-top:65px; top:100%; left:100%; background-color:#aaffff;">Tel père, tel fils 3</p>
</div>

13. Presque! Je brule! Je me demande pourquoi la marge de gauche est respectée, par contre celle de droite est complètement ignorée (sur les deux browsers c'est la même chose, donc il doit y avoir une raison). À tout hasard, je remplace le margin par le padding. Dans ma tête c'est presque la même chose, sauf que le padding se trouve à l'intérieur du bord, et le margin à l'extérieur. Cependant le résultat es visiblement différent:

<p>1</p><p>2</p><p>3</p>
<div class="pere" style="padding-left:85px; padding-right:65px; position:absolute; background-color:#ffffaa;">
<p>Je suis le pere 1</p><p>Je suis le pere 2</p><p>Je suis le pere 3</p>
<p class="fils" style="margin:0; padding:0; position:absolute; width:200px; bottom:0%; left:100%; background-color:#aaffff;">Tel père, tel fils1</p>
<p class="fils" style="margin:0; padding:0; position:absolute; width:200px; top:0%; left:100%; background-color:#aaffff;">Tel père, tel fils 2</p>
<p class="fils" style="margin:0; padding:0; position:absolute; width:200px; margin-top:65px; top:100%; left:100%; background-color:#aaffff;">Tel père, tel fils 3</p>
</div>

[EDIT]En y reflechissant, c'est logique: La "surface" d'un container arrive jusqu'au bord. Le margin est à l'extérieur du bord, et ne fait pas partie de la "surface" du container, tandis que le padding est à l'intérieur du bord.[EDIT]

14. Bon, là je suis presque content. Je remplace encore les textes pas beaux par une vraie image:

<p>1</p><p>2</p><p>3</p>
<div class="pere" style="padding-left:85px; padding-right:65px; position:absolute; background-color:#ffffaa;">
<img src="saturn.jpg"/>
<p class="fils" style="margin:0; padding:0; position:absolute; width:200px; bottom:0%; left:100%; background-color:#aaffff;">Tel père, tel fils1</p>
<p class="fils" style="margin:0; padding:0; position:absolute; width:200px; top:0%; left:100%; background-color:#aaffff;">Tel père, tel fils 2</p>
<p class="fils" style="margin:0; padding:0; position:absolute; width:200px; margin-top:65px; top:100%; left:100%; background-color:#aaffff;">Tel père, tel fils 3</p>
</div>

Ça continue de marcher! J'y crois pas! Bon, là je suis sur la bonne route. Je vais maintenant transformer tout cela en quelque chose de plus décent, avec une feuille de styles séparée et tout:

http://test.jmgonet.com/homeCSS2_CINQ.htm
http://test.jmgonet.com/css2_cinq.css

Il me reste encore à placer les différents éléments ensemble (l'entête, le navigateur, etc...) J'ai déjà mal à la tête rien que de penser ce que ça va être de mettre ensemble plusieurs divs avec des positionnements absolus.
Modifié par jmgonet (22 Apr 2005 - 09:02)

Mais dis-moi, pourquoi veux-tu utiliser le positionnement en absolu ? Mon exemple ne convenait pas ?

Salut jmgonet et bienvenue ici

La plupart de tes questions (notamment les premières) montrent d'évidentes lacunes au niveau du positionnement en CSS.
Les tests que tu fais montrent que tu n'as pas acquis les bases nécessaires et que tu mélanges pas mal de choses.
Si tu poursuis tes expériences sans connaitre les bases minimales, tu risques de t'embrouiller et - surtout - de te faire une fausse idée des CSS.

J'espère ne pas te fâcher en t'annonçant que tu cumules beaucoup de "maladies des débutants en CSS".

Tiens-nous au courant de ton apprentissage, on est là pour s'entraider
Modifié par Raphael (21 Apr 2005 - 18:02)

a écrit :
J'espère ne pas te fâcher en t'annonçant que tu cumules beaucoup de "maladies des débutants en CSS".

Nan, je nie tout en bloc!
Je n'ai aucune maladie!



Bon, mais pour de vrai, j'ai lu l'article sur les maladies (je l'ai lu en début de semaine, pour être exact). Je veux bien être un ignorant, mais ces maladies... je crois que j'ai fait attention:
- DIVite: dans mes exemples il n'y a qu'un seul div. Je ne peux pas tellement en mettre moins. Ou alors je n'ai rien compris?
- CLASSite: Dans mes derniers exemples j'ai une classe pour le div, et une pour chaque paragraphe. Mais je pense que ça se justifie parce que chaque paragraphe est un élément différent, et doit avoir un alignement différent. Peut-être aurais-je dû utiliser des ID à la place?
- CELLullite: Euh... non. Le designer, eventuellement, mais là je n'y peux rien.
- NEGativite: Peut-être, après tout.

Merci. Je vous tiendrais au courant.
Modifié par jmgonet (22 Apr 2005 - 08:10)

a écrit :
Mais dis-moi, pourquoi veux-tu utiliser le positionnement en absolu ?

Je n'ai aucune préférence pour le positionnement absolu. En réalité il m'embête. Parce qu'une fois qu'un objet est en positionnement absolu, il sort du flux. Alors je vais avoir un mal d'enfer à placer mon entête et mon pied de page (surtout mon pied de page).

Mais je ne vois pas comment faire autrement:

- Si je ne spécifie pas "position:absolute" pour "maincontent", il va prendre toute la largeur de l'écran. Alors mes "left:100%" pour les paragraphes vont les envoyer hors de l'écran.

- Je pourrais utiliser un "width" pour éviter le problème. Mais je ne connais pas la taille de l'image, ni en % ni en absolu, ni en em.

- Alternativement, je pourrais opter pour faire un "float:left" dans l'image, et économiser comme-ça les "left:100%" des paragraphes. Mais alors la hauteur de "maincontent" ne tiendrait plus en compte la taille de l'image. Et donc les "bottom:0%" et "top:100%" ne marcheront plus.

a écrit :
Mon exemple ne convenait pas ?

Ben en fait pas tellement. Pour deux raisons (probablement fausses, mais je les dis quand-même):

- La première c'est que je ne connais pas la taille de l'image. Alors je ne peut pas mettre de width ni de height dans le tag de l'image (ni ailleurs).

- La deuxième est que, des trois textes que j'ai à positionner, deux se trouvent alignés avec le bas de l'image. Dans ton exemple le div maincontent est séparé de l'image. Donc maincontent n'aura pas la même taille que l'image (ou alors comment on fait?). Et, du coup, je ne vois pas comment aligner des textes avec le bas de l'image.

Je vais continuer à faire des expériences (même si elles révèlent mes maladies )
Modifié par jmgonet (22 Apr 2005 - 08:23)

Bonjour,

Je n'avais pas non plus remarqué trop de maladies de ton dernier exemple. Je te félicite pour ta démarche qui nous montrait les efforts que tu faisais pour parvenir à tes fins. Mais comme tu le dis, la positionnement absolu complique les choses.

Je vais essayer quelque chose ce midi, c'est donc dans 3 heures. Je vais essayer de reproduire ce que tu veux faire, sans positionnement absolu, ou du moins, en utilisant le moins possible.

À plus tard !
Modifié par Merkel (22 Apr 2005 - 15:08)

Rebonjour,

J'ai essayé, encore et encore, en passant par du float avec clear:both et compagnie, et c'est toujours sans succès. Je ne suis pas non plus maître du positionnement, et je n'ai jamais réalisé ce style de visuel. J'ai beau essayer, je n'y arrive pas non plus. Évidemment, j'ai été capable de le réaliser en définissant une largeur à l'image. Tu es certain que tu ne veux pas définir la largeur de l'image ? Si tu ne connais pas la largeur de l'image, c'est qu'elle provient d'une base de données et que tu génère son code dynamiquement ? Dans un tel cas, ne serait-il pas judicieux de définir dynamiquement les valeurs css requises pour positionner les éléments dans la page en allant chercher les dimensions de l'image via PHP, ASP ou Coldfusion ?

Si tu me dis que c'est possible dans ta situation de définir une largeur précise à l'image, je vais te montrer le code que j'ai utilisé pour y arriver.
Modifié par Merkel (22 Apr 2005 - 19:40)

J'ai aussi passé le weekend à me creuser le crâne. En tous cas je te remercie de ton effort, c'est vraiment sympa.

Non, malheureusement je ne peux pas connaître la taille de l'image. Je t'explique: il s'agit d'un moteur php qui crée toute une arborescence et des documents à partir d'un dossier. Ce dossier contient, pêle-mêle, des fichiers xml et des sous dossiers. Chaque fichier xml contient la description d'un objet en verre, avec le nom de la photo, et trois textes.

En fait oui, ce serait possible de connaître la taille de l'image:

1. Depuis le PHP je peux, avant de construire la page, charger l'image en mémoire, regarder sa taille, puis produire le code xHtml en conséquence. Mais la surcharge sur le serveur serait trop importante.

2. Je pourrais aussi mettre sur pied un robot qui va explorer toutes les images puis stocker leur taille quelque part. Mais le site est hebergé sur un serveur mutualisé. Je n'ai pas le droit de lancer des applications.

3. Ou bien je pourrais demander à l'utilisateur d'écrire la taille dans le fichier xml. Mais je me méfie. Il n'est pas assez leste. Déjà je pense qu'écrire les fichiers Xml c'est limite pour lui.

4. Ou bien encore, quand, depuis le PHP, je charge le fichier Xml, je pourrais regarder si la taille de l'image est spécifiée et, le cas échéant, charger l'image pour consulter ses dimensions et écrire l'info dans le fichier Xml. Comme ça je devrais charger qu'une seule fois chaque image. Mais le problème viendrait si l'utilisateur change une image sans toucher le texte.

5. Enfin, une derniere solution, si il s'embrouille trop avec les fichiers xml, je vais lui écrire une petite application Java qui s'occupera de valider les textes Xml et de les uploader (avec les images correspondantes) vers le serveur d'hebergement. Et là ce serait une très bonne occasion de mesurer l'image.

En fait toutes ces solutions me paraissent beaucoup plus compliquées que celle qui consiste à utiliser un bête et herétique tableau ( ). Je crois que, à un moment donné, il faut aussi savoir rester raisonable.

Dans le futur je vais probablement choisir la solution 5. Mais seulement pour contrôler si l'image est verticale ou horizontale. Depuis le CSS je donnerais les dimensions de la photo en em. Ceci me permetrait de rendre le design beaucoup plus flexible et adaptable. Mais c'est de la musique d'avenir. Pour le moment l'utilisateur veut avoir un site prêt pour le vernissage de son exposition.

Ma suggestion serait de créer un script PHP qui irait consulter toutes les images de ton dossier et utiliserait un composant PHP pour lire la taille de l'image. C'est probablement déjà intégré sur ton serveur. Je suis un codeur Coldfusion, et non PHP, mais je sais qu'il existe un truc en PHP. C'est la librairie GD ou quelque chose comme ca. Donc, grâce à cette librairie, tu va pouvoir récupérer la taille de chaque image de ton dossier et mettre à jour le fichier xml contenant les informations de chaque image. Ca ne surchargerait aucunement ton application parce que de toutes façons, tu stock déjà des informations dans un fichier xml et tu va les récupérer à l'affichage. Il ne s'agirait que de mettre à jour le fichier xml, soi d'un seul coup, ou une image à la fois lors de l'upload via ton formulaire. Ca me semble raisonnable et parfaitement utile. Stocker la taille des images dans ton fichier xml me semble une bonne idée, et pas seulement pour positionner les éléments sur le web. Ca peut servir pour faire des recherches, comme pour sortir la liste des images plus grandes que 1024x768, des trucs comme ca.

Ceci dit, si c'est une question de temps, tu peux toujours utiliser un tableau pour le moment, et ensuite, tu pourrais améliorer.
Modifié par Merkel (25 Apr 2005 - 14:58)

Y'a une chose que je voulais ajouter aussi. Pourquoi ne pas essayer une autre façon de présenter les données ? Ton image, et le texte en dessous ? Ou la description toujours en haut à gauche de l'image ? Des fois, c'est mieux que se casser la tête pour rien ou faire du code au bacon. J'me sentais inspirer pour une nouvelle expression.

Bonjour,

Hum pour m'amuser un peu j'ai essayé de te faire une CSS diponible ici
Elle marche aprfaitement sauf qu'elle ne respecte pas la marge de 65 du mileu. En fait pour qu'elle le fasse, il faut qu'au moment de la generation de ta page par ton script php tu calcule la largeur du div "content", ainsi en définissant sa propriété width tu n'auras plus le problème. (Je pense que php te permet de recuperer la largeur d'une image . Net le peu en tout cas ) Toutefois il pourrait etre interressant pour toi de rajouter dans tres donnees xml la largeur de l'image...

Si quelqu'un à une idée pour modifier efficacement mon CSS pour qu'il réponde directement à la demande de Merkel sans la moindre ligne de code PHP ou ASP.Net ou autre je suis preneur...

En esperant avoir été utile,
Cordialement,
Cyprien.

Edit - Desolé j'avais pas lu les derniers posts ... ce que j'ai fait est inutile et mon post redondant... OUI je sais c'est MAL
Modifié par ilsandor (26 Apr 2005 - 05:06)

Petite précision ilsandor, ce n'est pas ma demande, mais bien celle de jmgonet. J'avais aussi mentionné qu'on pouvait récupérer la largeur de l'image avec PHP, et la stocker dans le fichier xml. C'est la solution qui me semble la moins hasardeuse.