Alignements

Bonjour,

Je viens de finir la maquette d'un site (via illustrator) et à peine ai je posé la plume (enfin la souris) que je me demande si cela est réalisable en CSS

http://img529.imageshack.us/img529/9702/insolitepu9.png

Je me demande s'il est possible comme je l'ai dessiné d'obtenir un p aligné sur la photo du bas et l'autre aligné sur la photo du haut (il est possible que cette phrase ne soit pas claire =))

Pour ma part la méthode que j'utilise est de faire 3 divs: un qui contient le premier texte, un second pour le 2eme texte et un troisieme qui s'intercale entre les 2 pour assurer l'espace 'marron clair' entre les 2.

Ca me parait un peu tordu, je me demande s'il n'existe pas des subtilités de syntaxe css qui me permettrait de mettre en forme plus proprement =).

Merci d'avance
Modifié par xis (02 Oct 2007 - 19:18)

Oh...Le beau tableau de présentation typique. Un cas d'école, celui-là (en attendant l'implémentation complète de CSS2, cela va sans dire).
Modifié par Laurent Denis (02 Oct 2007 - 19:37)

Ah... bah flute alors...

xis a écrit :
Ah... bah flute alors...

oui, hein ?

<edit>penser tout de même à ne pas mettre de summary ni autre élément/attribut significatif des tableaux de données dedans...</>

<re-edit>Mais, au cas où, pour dissiper d'éventuels malentendus: c'est très bien, un tableau de présentation, quand c'est la solution la plus robuste. Au contraire. On est justement en train de les réhabiliter. C'est encore parfois un peu dur, mais c'est un cap qu'on devrait avoir définitivement franchi d'ici mars prochain, pour ne (presque) plus en entendre parler après.</>
Modifié par Laurent Denis (02 Oct 2007 - 19:50)

Bien noté.

Bah le flute était plutot motivé par le fait que j'ai pas mal bossé css pour ne pas avoir a faire de site "tableau".

Tu comprendras mon désaroi en découvrant que mes "graphismes" m'imposent d'en faire. D'autant que je ne sais pas, du coup, par quel bout commencer... =)

Quoiqu'il en soit, merci =)

lol

ne sois pas triste: en CSS, cela reposerait sur... des display:table.Amusant, non ?

??
<div fond fausse colonne>
<div layout+overflow>
<image float padding margin >
<p layout+overflow>
</div>

et re et re et re
</div>

pas de display table ou tableau obligatoire , tant que l'on cherche pas a faire de l'alignement verticale entre images et textes.

Structure au choix , on peut partir sur du dl dt dd avec du clear .

:)

Ce que j'aurais fait je pense
3 blocs superposés avec un fond bicolore
celui du milieu vide pour la séparation
les 2 autres avec 1 image en float left et un bloc texte à droite

a écrit :
mes "graphismes" m'imposent d'en faire

Notre culture est née sur des tables de comptes Sumériennes

gcyrillus a écrit :
??
<div fond fausse colonne>
<div layout+overflow>
<image float padding margin >
<p layout+overflow>
</div>

et re et re et re
</div>

pas de display table ou tableau obligatoire , tant que l'on cherche pas a faire de l'alignement verticale entre images et textes.

Structure au choix , on peut partir sur du dl dt dd avec du clear .

:)

J'ai peur de ne pas comprendre... =)

Gaelgerard: idem, qu'entends tu par 3 blocs superposés ? puisqu'apparemment ils sont plutot accolés les uns aux autres

Merci pour les tables sur les comptes sumériens, je discute pas mal avec une experte en histoire de la linguistique ces temps ci, ca va me servir p

Bonsoir,

Au vue de la description exposée plus haut, il semblerait effectivement que l'utilisation d'un tableau soit la moins lourde à gérer :

a écrit :
p aligné sur la photo du bas et l'autre aligné sur la photo du haut

Tu aurais donc un tableau pour la mise en page de ton texte et de tes éléments à l'intérieur d'une mise en page sous toute assez simple à réaliser.

Comme l'a souligné Laurent Denis, l'utilisation d'un tableau de mise en forme n'est absolument pas déconseillé... Dès lors qu'il est employé à bon escient.
Son utilisation est même plus que conseillée dès lors qu'elle évite la surcharge de balises et d'instructions inutiles.

Merci à tous pour vos réponses, je vais tester les différentes pistes proposées. Je reviendrai vous présenter le résultat.

++