Placement image - texte en alternance

**virvir** · 18/06/2008, 12h22

Bonjour,

Je souhaiterai présenter le corps des page de mon site internet de la façon suivante:

T I
I T
T I
..

les lettres correspondent à
T un texte,
I une image

Les images et les textes sont altérnés sans que les 2 lignes dans le schéma ne se chevauchent.

Je me pose la question si c'est interessant de créer un tableau avec dans chaque cellule soit le texte soit l'image ou s'il etait possible de faire ceci avec les CSS?

En vous remerciant.

**monstor** · 18/06/2008, 12h29

Salut,

Selon moi, la meilleur solution est le tableau. C'est d'ailleurs exactement ce que tu veux, un tableau à 2 colonnes! Après définis 2 styles CSS que tu mettras dans les différentes cases de ton tableau

**virvir** · 18/06/2008, 12h32

Oui merci, c'est ce que je pense aussi. Le problème est que ce n'est pas très flexible si je souhaite changer par la suite...
C'est pour cela que je me pose la question des CSS, mais ce n'est pas très pratique à mettre en place...

**Erwan31** · 18/06/2008, 12h34

Bonjour et bienvenue sur Developpez

Le choix du tableau n'est pas approprié ici, tu dois faire flotter tes image à gauche puis à droite alternativement via la propriété float qui a été initialement prévu à cet effet.

Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css" media="screen">
<!--
.left {float:left; margin-right: 15px}
.right {float:right; margin-left: 15px}
-->
</style>
</head>
 
<body>
<div> 
<p><img src="images/chinatown.png" width="116" height="110" alt="" class="right" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin mollis, pede quis fringilla 
vulputate; purus libero tristique lorem, nec semper tortor velit a quam! Nunc purus risus, 
vestibulum eu, ornare in, imperdiet et, nisi. Morbi lobortis. Phasellus ligula nisi, venenatis eu, 
varius non, semper ut, sem. Fusce eu odio a ipsum accumsan dictum. Nam nunc. Sed imperdiet dapibus ligula. 
Pellentesque fermentum, augue a adipiscing aliquet, velit lacus aliquam justo, sed condimentum tellus quam 
</p>
<p><img src="images/chinatown.png" width="116" height="110" alt="" class="left" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin mollis, pede quis fringilla 
vulputate; purus libero tristique lorem, nec semper tortor velit a quam! Nunc purus risus, 
vestibulum eu, ornare in, imperdiet et, nisi. Morbi lobortis. Phasellus ligula nisi, venenatis eu, 
varius non, semper ut, sem. Fusce eu odio a ipsum accumsan dictum. Nam nunc. Sed imperdiet dapibus ligula. 
Pellentesque fermentum, augue a adipiscing aliquet, velit lacus aliquam justo, sed condimentum tellus quam</p>
</div>

Si l'image n'apporte aucune information ou n'est pas nécessaire à la compréhension du contenu, mette un alt vide alt="".

**virvir** · 18/06/2008, 12h47

Oui c'est aussi ce que je pensais, mais j'ai passablement de mal à faire quelque chose de correct.

Une chose que je n'ai pas dit est que je souhaite mettre une petite légende en dessous des images. Pour cela, j'ai créé un <div> mais ce n'est pas correcte de le mettre dans <p>...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<style type="text/css" media="screen">
<!--
.left {float:left; margin-right: 15px}
.right {float:right; margin-left: 15px}
-->
</style>
</head>
 
<body>
<div> 
 
<p>
<div class="right">
<img ... />
<span class="legend">legend</span>
</div>
text
</p>
<p>
<div class="left">
<img ... />
<span class="legend">legend</span>
</div>
text
</p>
</div>
</div>
</body>

**Erwan31** · 18/06/2008, 13h11

Non en effet les paragraphe ne peuvent contenir que des élément inline.
Donc je pencherais plutôt sur cette structure

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div>
<p class="right">
<img ... />
<span class="legend">legend</span>
</p>
<p>
text
</p>
</div>

Mais seulement si le texte ne descend pas au dessous de l'image.

**virvir** · 18/06/2008, 19h28

Ca marche, merci beaucoup!

Placement image - texte en alternance

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager