Effectuer une mise en page simple texte+image
samedi 26 novembre 2011, 11:42 - howto
Comment effectuer une mise en page simple texte + image avec une image flottante à gauche ou à droite ?
Résultat final
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel eleifend nibh. Donec gravida, arcu ut imperdiet pulvinar, dolor arcu varius erat, in laoreet magna lacus eget tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam eu tortor sit amet nisl posuere euismod at ut massa. Vestibulum sit amet massa vitae nibh rutrum aliquet. Fusce ullamcorper elit facilisis magna tempus nec consequat urna sollicitudin. Quisque ac dolor nisi. Duis et urna erat. Proin eros purus, suscipit quis elementum aliquet, accumsan porttitor lorem. Praesent ut ornare purus. Aenean congue interdum metus.
Loren ipsum dolor
Vous remarquerez que le texte ne veut rien dire... Ce texte bien connu des WebDesigners est un "Loren Ipsum", il est utilisé pour donner un aperçu du rendu d'un site sans avoir le contenu définitif. vous pouvez générer des paragraphes entier de texte sur le site www.lipsum.com
Image
Prenez l'image que vous souhaitez.
Consulter notre billet concernant l'ajout d'image sur votre site
On a tout ? C'est parti !
On va procéder dans l'ordre, mais sachez que vous pouver effectuer ces actions dans un ordre différent en ajoutant quelques manipulations.
1. Ajoutez l'image dans la zone de contenu ( comment ajouter une image )
2. Juste derrière l'image insérez votre texte. Pas d'espace, pas de saut de ligne.
3. Cliquez une fois sur l'image puis sur l'icône "Insert / Edit Image"
Ici, on arrive de nouveau sur la fenêtre vous permettant d'ajouter une image. Vous remarquerez qu'il y a plusieurs onglets.
4. Cliquez sur l'onglet "Appearance"
5. Définir les options suivantes:
- Alignment: left
- Vertical Space: 10
- Horizontal Space: 10
- Border: 0
6. Cliquez sur "Update", c'est terminé.
Vous aurez compris que l'on a modifié les propriétés de l'image en demandant un alignement flotant à gauche (left=gauche, right=droite) puis un espace autour de l'image de 10 pixels horizontalement et verticalement sans bordure.
La bordure peut apparaître si vous rendez l'image cliquable avec un lien hypertexte. Généralement, c'est moche, d'où le border=0.