Cours

Accédez à nos cours concernant des domaines et thématiques différentes. Vous pouvez aussi contribuer en rédigeant des articles.

Consulter les cours

Écoles

Parcourez notre annuaire d’écoles, instituts et universités du monde. Si votre école n’est pas listée, vous pouvez l’ajouter très facilement.

Consulter les écoles

Tchat

Accédez à notre messagerie instantanée pour échanger avec d’autres membres inscrits et aussi les invités. Aucune inscription n’est obligatoire.

Accéder au tchat

Dans le présent chapitre notre mission consiste à : faire flotter un élément à gauche ou à droite, puis à faire stopper ce flottant, créer une lettrine, pirater Google et enfin sauver le président de l'Amérique

Votre inventaire : un revolver, des jumelles, un sac à dos, un gilet par bal, un fouet, et en addition prenez avec vous les deux propriétés CSS float et clear, à utiliser en cas d'urgence fatale

La propriété CSS float (flottant)

Cette propriété représente un intérêt très important. Elle permet par exemple de mettre un paragraphe à gauche ou à droite d'un autre élément notamment une image. Faire flotter le menu d'un site à gauche ou à droite. Créer une lettrine etc. La propriété float reconnait trois valeurs :

On a la possibilité d'appliquer la propriété CSS float sur des balises de type bloc ou en-ligne (notamment les éléments en-ligne remplacé et plus spécialement les images). Fini la théorie, passons à la pratique :

Faire flotter une image

Code XHTML/CSS (float)

<div>
<p>
<img src="Tim.jpg" alt="Tim Berners-Lee"
style="float: left; height: 131px; margin-right: 20px;">
</p>
<p>Le W3C est supervisé par Tim Berners-Lee,<br />
le principal créateur du protocole URL, de l'HTTP, et de l'HTML.</p>
<blockquote><p>Le World Wide Web Consortium, abrégé W3C,<br /> 
est un consortium fondé en octobre 1994<br /> 
pour promouvoir la compatibilité des technologies du World Wide Web<br /> 
telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP.<br /> 
Le W3C n'émet pas des normes au sens européen, mais des recommandations à valeur de <br />
standards industriels (wikipedia).</p></blockquote>
</div>

Aperçu (float)

Tim Berners-Lee Le W3C est supervisé par Tim Berners-Lee,
le principal créateur du protocole URL, de l'HTTP, et de l'HTML.

Le World Wide Web Consortium, abrégé W3C,
est un consortium fondé en octobre 1994
pour promouvoir la compatibilité des technologies du World Wide Web
telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP.
Le W3C n'émet pas des normes au sens européen, mais des recommandations à valeur de
standards industriels (wikipedia).

 

Explication (float)

La propriété CSS float doit être affectée à l'élément qu'on entend faire flotter. Dans cet exemple on a fait flotter l'image à gauche puis on a passé un petit paragraphe et une citation. Le navigateur s'est mis à placer tous ces éléments à droite de l'image mais lorsque la hauteur du graphique a été épuisée par les éléments superposés se trouvant à sa droite, le navigateur a repris la restitution des éléments XHTML en-dessous du graphique.

Enfin pensez à appliquez une marge aux éléments qui flottent pour qu'ils ne soient pas collés avec le contenu voisin. Vous pouvez faire flotter un block ou un inline remplacé telle qu'une image, un champ de saisie multilingue, un élément introduit par la balise object (vidéo FLV etc.), mais pour les 'inline' non remplacés (<em>, <strong, <a>), l'usage de la propriété CSS float ne se justifie pas.

Créer une lettrine

Une lettrine est la première lettre d'un paragraphe écrite en une police plus grande, et qui équivaut généralement à trois hauteurs de ligne. Je parie que vous en avez vu pas mal dans les récits. On peut procéder par deux méthodes pour créer une lettrine :

La propriété CSS clear (stopper un flottant)

La propriété CSS clear spécifie si un élément accepte à être adossé contre un flottant ou non. Cette propriété nous permet de faire stopper l'effet de flottement à un certain niveau, et de poursuivre en-dessous de l'élément qui flotte. La propriété CSS clear supporte quatre valeurs :

Pour stopper un flottant on se sert généralement de "both" qui marche à tous les coups.

Exemple (clear)

<div>
<p>
<img src="Tim.jpg" alt="Tim Berners-Lee"
style=" float: left; height: 100px; margin: 10px;">
</p>
<p>
Le W3C est supervisé par Tim Berners-Lee,<br>
le principal créateur du protocole URL, de l'HTTP, et de l'HTML. </p>
<blockquote style="clear: both;">
<p>Le World Wide Web Consortium, abrégé W3C,<br>
est un consortium fondé en octobre 1994<br>
pour promouvoir la compatibilité des technologies du World Wide Web<br>
telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP.<br>
Le W3C n'émet pas des normes au sens européen, mais des recommandations à valeur de<br>
standards industriels (wikipedia). </p>
</blockquote>
</div>

Aperçu (clear)

Tim Berners-Lee


Le W3C est supervisé par Tim Berners-Lee,
le principal créateur du protocole URL, de l'HTTP, et de l'HTML.

Le World Wide Web Consortium, abrégé W3C,
est un consortium fondé en octobre 1994
pour promouvoir la compatibilité des technologies du World Wide Web
telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP.
Le W3C n'émet pas des normes au sens européen, mais des recommandations à valeur de
standards industriels (wikipedia).

 

Remarquez que la citation a été prématurément restituée en-dessous de l'image flottante, même s'il y a encore un espace à combler.

Flux normal et comportement des flottants

Avant de continuer j'aimerais bien vous montrer comment les flottants se comportent. Je vous rappelle que les éléments XHTML sont affichés en suivant par défaut un flux naturel : les éléments XHTML sont affichés selon leur ordre d'apparition dans le code XHTML : les blocs étant empilés l'un au-dessus de l'autre, et les éléments en-ligne se reproduisent côte à côte selon le sens d'écriture (de gauche à droite ou de droite à gauche). Ce flux naturel peut être dénaturé par certaines propriétés CSS comme 'float' (les flottants) et 'position' (positionnement CSS fixé ou absolu).

Elément bloc transformé en un flottant : Je vous ai dit dans les chapitres précédents, que les blocs occupent par défaut toute la largeur du bloc conteneur, et ne se permettent pas à ce qu'un autre bloc soit placé à côté d'eux, en créant un retour à la ligne avant et après. Lorsque vous transformez un bloc en un flottant, il rend publique l'espace se trouvant à ses côtés (et qui auparavant été strictement réservé à lui), aux éléments qui le suivent.

Si un élément XHTML flottant occupe toute la largeur (propriété CSS width avec la valeur 100% ou bien image avec largeur intrinsèque trop importante), la propriété float n'aura aucun effet, car l'effet de flottement suppose un espace minimum, qui va recueillir les éléments suivant l'objet flottant.

Un bloc flottant n'a plus le droit d'étendre ses styles de bordure et d'arrière-plan au-delà de sa zone effective qui est représentée par son contenu. Rappelez-vous qu'un bloc (p, ul, etc.) reproduit les styles de bordure et de fond sur toute la largeur disponible, même si son contenu est trop petit.

Un flottant est un interrupteur transitoire du flux naturel. En fait lorsqu'un élément acquière le statut d'un flottant par la propriété CSS float, le navigateur le repousse le plus possible au bord droit ou gauche de son conteneur. Cela lui permet d'échapper au rendu par défaut, mais Le flux normal se déroule à côté de lui (comme si le flottant n'existe même pas), avec une largeur plus comprimée pour prendre en considération la présence du flottant.

Situation assez particulière : si vous faites flotter deux éléments successifs en deux modes différents, c'est-à-dire faire flotter l'un des deux à gauche et l'autre à droite ou vice-versa. Les deux éléments seront affichés dans les deux bords gauche et droit, et l'élément suivant appartenant au même conteneur, sera affiché dans l'espace vide (s'il y a lieu) qui existe entre les deux flottants. Le navigateur poursuit en-dessous du flottant contre lequel le texte est adossé. Autrement dit, le texte se poursuivra en-dessous du flottant à gauche si le texte s'écrit de gauche à droite (direction: ltr). Si le texte s'écrit de droite à gauche (direction: rtl), il va se poursuivre en-dessous du flottant à droite.
Enfin sachez qu'on peut faire flotter autant d'éléments qu'on veut.

Notez qu'élément en-ligne remplacé acquière le statut d'un bloc lorsqu'il reçoit la propriété CSS float avec une valeur left ou right. Ceci peut être expliqué par le fait que le navigateur lui crée une boîte bloc et se comporte avec lui comme un élément de type bloc flottant.

Les marges, bordures et espacements des flottants sont respectés, néanmoins les marges des flottants ne fusionnent jamais avec celles des éléments adjacents (fusion de marges).

Dom et float

Le mot-clé 'float' a été réservé pour JavaScript, même s'il n'est pas encore affecté. En fait il a été protégé pour répondre aux développements futurs du langage JavaScript. Bref, en raison de cela, vous n'êtes pas autorisé à vous servir du mot-clé 'float' pour accéder à la propriété CSS float via l'interface DOM, sous cette forme :

[window.]document.getElementById("elementID").style.float

Pour éviter des conflits éventuels entre le mot-clé float, réservé par anticipation aux développements futures du langage JavaScript et l'accès à la propriété CSS float via le DOM, le W3C a recommandé la notation : 'cssFloat'.

[window.]document.getElementById("elementID").style.cssFloat

La notation 'cssFloat' n'est pas reconnu par Internet Explorer 6 et 7 Il faut pour cela utiliser la mention choisie unilatéralement par Microsoft à savoir 'styleFloat'.

[window.]document.getElementById("elementID").style.styleFloat

Vous voyez, cette mission n'était qu'un jeu d'enfant, la prochaine mission portera sur les propriété CSS width et height.

Aidez la Communauté des Étudiants !