19.11.2014 Views

Support de cours - Lita

Support de cours - Lita

Support de cours - Lita

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

<br />

Notes dans la marge<br />

Explications<br />

<br />

Par défaut, un élément positionné <strong>de</strong> façon absolue se trouve à l’emplacement<br />

...<br />

<strong>de</strong> construire facilement <strong>de</strong>s notes dans la marge.<br />

<br />

Lorem ipsum<br />

<br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a lorem eu<br />

...<br />

Fusce non lorem et nibh condimentum suscipit. Curabitur<br />

tempus varius diam quis bibendum. Sed vel eros id odio facilisis<br />

...<br />

<br />

Fusce ac<br />

<br />

Fusce ac sem vitae augue suscipit rhoncus. Curabitur quis velit non diam<br />

...<br />

Quisque porta pretium turpis commodo aliquet. Morbi<br />

...<br />

pharetra ultrices, nibh magna bibendum tortor, id semper dolor nunc at dolor.<br />

<br />

...<br />

<br />

<br />

Les éléments span dont la classe est note représentent nos notes <strong>de</strong> marge. Il faut<br />

donc les faire sortir du flux normal (propriété position), les placer près du bord gauche<br />

(left), puis augmenter la marge gauche (margin-left) du document pour éviter les<br />

chevauchements avec le texte normal :<br />

body {<br />

}<br />

margin-left: 200px;<br />

.note {<br />

position: absolute;<br />

top: auto;<br />

left: 20px;<br />

width: 160px;<br />

text-align: right;<br />

39

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!