La propriété float.
Je remercie et conseil pour plus de détail le site fr.openclassrooms.com sur laquelle je me suis appuyé pour apprendre le positionnement et non le tâtonnement comme je le faisais auparavant.
Je me suis permis de reprendre en partie les éléments de ce site pour pouvoir les consulter hors ligne sur mon serveur local.
Passons maintenant aux choses sérieuses.
- Exemple de départ -
Nous prenons comme exemples deux DIV, une verte avec du texte et à l'intérieure une jaune avec une liste.
text_1
text_2
text_3
text_4
text_5
Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.
Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.
- float:left; ou "right" -
La propriété "float" fait flotter la div autour du texte, cette propriété est aujourd'hui utilisée par la majorité des sites web pour faire la mise en page.
Si on veut placer son menu à gauche et le contenu de sa page à droite, ou vice versa, c'est un bon moyen.
Mais pas forcément la meilleur, comme nous le verrons plus loin.
Voici le code HTML:
<div class="verte">
<div class="jaune">
text_1
à
text_5
</div>
faux texte Lorem Ipsum
</div>
Voici le code CSS:
.verte { width: 900px; padding: 1%; background-color: #00ff00; }
.jaune { width: 120px; padding: 1%; background-color: #ffff00; }
text_1
text_2
text_3
text_4
text_5
Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.
Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.
On observe que le faux texte Lorem Ipsum touche la div du menu pour cela j'ajoute une marge extérieure au menu ( margin-right: 2%; ) pour que le texte se décale vers la droite tout en continuant à entourer le menu.
.verte { width: 900px; padding: 1%; background-color: #00ff00; }
.jaune { width: 120px; margin-right: 2%; padding: 1%; background-color: #ffff00; }
text_1
text_2
text_3
text_4
text_5
Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.
Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.