7/23/2019 Pass ghdgksgkgk qskjdjk qsd

http://slidepdf.com/reader/full/pass-ghdgksgkgk-qskjdjk-qsd 1/6

Aller aux menus

#CSS {débutant;}

• Premiers pas

• CSS3

• Tutoriels

• Livre

• Boite à Outils

Vous êtes ici > CSS Débutant | Premiers pas en CSS | Aligner une image et dutexte

Pour positionner une image à droite ou à gau!e d"un tete, on peut biensûr utiliser une mise en forme par tableau !ais un tableau n"est pas fait,normalement, pour faire de la mise en page

$ l"aide du langage CSS% aligner une image et du tete est tr&s simple

gr'e à la propriété CSS #oat(ui )ait *+otter* les éléments

$ligner une image et du tete à l"aide de la propriété #oat

Sommaire

• A$ertissements préliminaires

• Aligner une image % gauc&e du texte

• Aligner une image % droite du texte

• Complément

,ontionne ave -

•  'ous les na$igateurs grap&i(ues

Propriétés utilisées -

• #oat

• line)&eig&t

$vertissements préliminaires

•  'out élément #ottant doit être déclaré en premier dans le +u, c"est %dire dans la lecture de &aut en bas du code &tml

• *es images déclarées dans le code &tml, (ui n"ont pas donc $ocation % être

des images de fond, doi$ent contenir l"attribut alt Cet attribut est le

7/23/2019 Pass ghdgksgkgk qskjdjk qsd

http://slidepdf.com/reader/full/pass-ghdgksgkgk-qskjdjk-qsd 2/6

texte alternatif (ui doit appara+tre si l"image n"est pas $isualisée l a doncun r-le important pour l"aessibilité, et pas pour le référencement .

o Si l"image est purement décorati$e, le contenu du alt doit être $ide /

o Si l"image est porteuse d"information, le contenu du alt doit êtrepertinent et reprendre cette information

$ligner une image à gau!e du tete

Code !tml

0p class12#otte2>

 0img src12images3ne4png2 alt125ou$eau .2 3>

03p>

0p>

 'outes les nou$eautés, rien (ue des nou$eautés

03p>

6ien sûr, ce code tout seul positionne l"image au dessus du texte, et puis c"esttout!ais en indi(uant un #oat7left dans la classe #otte déclarée dans le paragrap&econtenant l"image, celle)ci $a dégager un espace libre sur sa droite 8puis(u"elle#otte % gauc&e9 o: le texte pourra se placer

.emar(ue 7 si $ous n"a$e; pas de notions sur les classes CSS, mieux $aut lirece tutoriel a$ant de continuer

Code CSS

#otte <

#oat7left/

=

/one de Test

 'outes les nou$eautés, rien (ue des nou$eautés

t l% $ous alle; me dire 7 C"est bien ?oli $otre truc, mais le texte il est tout en &autde l"image, @a ne le fait pas

7/23/2019 Pass ghdgksgkgk qskjdjk qsd

http://slidepdf.com/reader/full/pass-ghdgksgkgk-qskjdjk-qsd 3/6

5an, mais bien sûr Si le texte occupe un espace moins &aut (ue la &auteur del"image 8ici B pixels9 l"alignement peut para+tre mal fait Cela peut se régler dediérentes fa@ons

Si le texte est trs court, on peut appli(uer une &auteur de ligne égale % la

&auteur de l"image, par exemple, % l"aide de line)&eig&t *e texte sera ainsinaturellement aligné au milieu de cette &auteur 8attention, ceci ne sera donc pas$alable si $ous a$e; plusieurs lignes car elles $ont être toutes espacées de la&auteur de ligne déclarée !ais cela ne sera pas forcément nécessaire nonplus9

Code 01!tml

0p class12#otte2>

 0img src12images3ne4png2 alt125ou$eau .2 3>

03p>

0p st2le*line4!eig!t-56p;*>

 'outes les nou$eautés, rien (ue des nou$eautés

03p>

/one de Test

 'outes les nou$eautés, rien (ue des nou$eautés

$ligner une image à droite du tete

Pour aligner son image cette fois % droite, on ne c&ange rien au code &tml C"est ?uste dans la feuille de stEle (u"il faut déclarer un #oat7rig&t % la placedu #oat7left

Code CSS

#otte <

#oat7rig&t/

=

/one de Test

7/23/2019 Pass ghdgksgkgk qskjdjk qsd

http://slidepdf.com/reader/full/pass-ghdgksgkgk-qskjdjk-qsd 4/6

 'outes les nou$eautés, rien (ue des nou$eautés

6ien entendu, si $ous désire; bénéFcier des deux options, il faudra deux noms declasses diérents et appli(uer celle (ui ira bien selon $os désirs

Complément

*e #ottement de l"image persiste tant (ue le texte n"a pas dépassé le &auteur del"image Pour annuler cet eet, il faut indi(uer un clear7bot& au premier élément(ue l"on $eut $oir dépasser ce p&énomne Cet élément passera donc % la ligne,sous l"image, (uel(ue soit la &auteur de celle)ci

 

Gaut

 

Contat 7 pascale at mammouthland.net 

n cas de reproduction 8partielle ou totale9 de cet article, prire de faire un lien$ers la page originale 7&ttp733cssmammout&landnet3positionner)image)#oat)&tml)cssp&p

Premiers pas en CSS

• Principe des CSS

• 6alises G'!* de base

• Heuille de stEle CSS de base

• !ettre en forme un texte

• Iérer les marges en CSS

• Sélecteurs CSS class et id

• !ise en page sans tableau

• 6ordures en CSS

• mage de fond en CSS

• ets rollo$er en CSS

• Aligner image et texte

• Puces en images

7/23/2019 Pass ghdgksgkgk qskjdjk qsd

http://slidepdf.com/reader/full/pass-ghdgksgkgk-qskjdjk-qsd 5/6

• Citations et retraits

CSS3

Tutoriels CSS

Boite à Outils

$rtiles onnees

 7ardinage

• Accueil

• Iénérateur de CSS

• Paris)Jeb

• *iste de discussion

• *iens utiles

• Plan du site

 

Plantation

Aligner une image et du texte dans une page &tml 8img et #oat9

Dernire ma? 7 K)LM)KLNN

O !ammout&land NM)KLNB

Q propos de CSS Débutant

 

Cultivateurs

• Alsacréations

7/23/2019 Pass ghdgksgkgk qskjdjk qsd

http://slidepdf.com/reader/full/pass-ghdgksgkgk-qskjdjk-qsd 6/6

• css R design

• CSS Create

• De$eloppe;com

• TpenJeb

• Pompagenet