[Best practice] Mise en forme d'un article div/table

**nuke_y** · 20/11/2007, 11h30

Bonjour.

J'écris des articles sur un CMS (Joomla, mais ça n'a aucun rapport) et j'aimerais pouvoir mettre en forme mes articles en leur rajoutant des images ou de petites zones d'explications liées à l'article (comme on peut en voir dans certains journaux). Evidemment ce genre de mise en page n'est pas évidente en HTML, les journaux utilisants des logiciels spécialisés.

J'arrive à un résultat correct avec des tables imbriquées mais je sais que c'est déconseillé, alors j'essaye avec des DIV mais j'ai du mal avec le concept. En effet, ce que j'aimerai c'est pouvoir définir une zone avec style (via une feuille de style, là l'exemple c'est pour tester) pour mon article (en gris dans l'exemple ci-dessous) et ensuite pouvoir coller ma zone n'importe où : à gauche, à droite, en haut, une à droite et une à gauche, etc. Pour ça je me disais que je pouvais définir un certain nombre de classes CSS (div.encart_gauche, div.encart_droite, etc.) différentes et donner telle ou telle classe pour le texte de l'encart. L'encart serait alors placé correctement et le texte de l'article s'organiserait automatiquement.

J'aimerais savoir si vous pensez si c'est possible et si vous aviez des pistes. Ci dessous un code qui montre ce que je voudrais faire, mais je n'arrive pas à placer le rectangle marron dans le rectangle gris, en haut à droite.

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
<html>
<body>
<div style ="width:400px;height:500px;margin-left:50px;margin-top:50px;background-color:GRAY;">
Ce siècle avait deux ans ! Rome remplaçait Sparte,<br/>
Déjà Napoléon perçait sous Bonaparte,<br/>
Et du premier consul, déjà, par maint endroit,<br/>
Le front de l'empereur brisait le masque étroit.<br/>
Alors dans Besançon, vieille ville espagnole,<br/>
Jeté comme la graine au gré de l'air qui vole,<br/>
Naquit d'un sang breton et lorrain à la fois<br/>
Un enfant sans couleur, sans regard et sans voix ;<br/>
Si débile qu'il fut, ainsi qu'une chimère,<br/>
Abandonné de tous, excepté de sa mère,<br/>
Et que son cou ployé comme un frêle roseau<br/>
Fit faire en même temps sa bière et son berceau.<br/>
Cet enfant que la vie effaçait de son livre,<br/>
Et qui n'avait pas même un lendemain à vivre,<br/>
C'est moi. -<br/>
(Extrait de LES FEUILLES D'AUTONNE Par Victor Hugo)<br/>
	<div style ="width:150px;height:100px;border:1px solid;background-color:BROWN;align:right;">
	Victor-Marie Hugo, né le 26 février 1802 à Besançon et mort le 22 mai 1885 à Paris.
	(Wikipédia)
	</div>
</div>
</body>
</html>

**Bisûnûrs** · 20/11/2007, 11h32

Peut-être dans les cours CSS :

http://pbnaigeon.developpez.com/tuto...-page-CSS/#LIV

**nuke_y** · 20/11/2007, 14h30

Effectivement, ce cours de CSS simple et rapide m'aurait été bien utile au début. Je vais le lire pour m'assurer d'avoir bien tout compris. Merci.

Maintenant, sur le principe, est-ce que cette méthode de construction des encarts avec des styles CSS et application de ces styles aux différents paragraphes de l'article est la méthode que vous me conseillez pour réaliser ce dont j'ai besoin ou est-ce qu'il existe une autre méthode (avec ses avantages et ses inconvénients) ?

Merci

**Bisûnûrs** · 20/11/2007, 15h41

Rajouter un float:right sur ton bloc news reste la meilleure méthode.

[Best practice] Mise en forme d'un article div/table

CSS

Discussions similaires

Partager

Partager