POSITIONNEMENT EN CSS

Salut, ce cours traite le positionnement des éléments en CSS
Ce cours nécessite des notions en HTML et CSS, si ces deux notions ne vous disent rien, alors je vous conseille de commencer par mon cours sur la création d'un site web avec HTML et CSS,

I. LE POSITIONNEMENT FLOTTANT

Il est possible avec Css de flotter un élément autour du texte (faire un habillage). Voici à quoi ressemble un flottant :

Ici, j’ai flotté l’image autour du texte. La propriété qui nous permet de flotter un élément est float qui peut prendre une des deux valeurs :

left : l'élément flottera à gauche.
right : l'élément flottera à droite.

Il faut commencer par insérer le flottant (l’élément qui va flotter) et le reste de texte doit suivre cet élément dans html. Pour l’exemple précédent :

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation</title>
    </head>
    <body>
        <img class= "image" src="images.png"   alt="oups" />   
        <p>HTML et CSS sont deux « langues » qu'il faut savoir parler pour créer des sites web. C'est le navigateur web qui
        fera la traduction entre ces langages informatiques et ce que vous verrez s'afficher à l'écran. <br/>
        Vous vous demandez sûrement pourquoi il faut connaître deux langages pour créer des sites web ? Je vous réponds sans plus
        tarder ! </p>
        <p>Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le 
        texte qui devra figurer dans le site (comme on le ferait dans un traitement de texte Word, par exemple), il faut aussi 
        indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc.</p>
        
        <h2>Les rôles de HTML et CSS </h2>
        <p>Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend. Et c'est
        là que les choses secorsent, parce qu'il va falloir apprendre deux langages !
        Pourquoi avoir créé deux langages ? Un seul aurait suffi, non ? </p>
                     
   </body>
</html>

J’ai besoin de flotter l’image à gauche, il suffit d’appliquer float : left au sélecteur de l’image dans Css comme ceci :


.image
{
 float: left;
}

Et si on flottait l’image à droite ?

Forme.css


.image
{
 float: right;
}

Si l’on souhaite pour une raison quelconque que le deuxième paragraphe (Pour créer un site web, on doit…) se place totalement en dessous de l’image (le flottant), dans ce cas on doit stopper le flottant.

C’est la propriété clear qui permet de stopper un flottant, elle peut prendre une des valeurs suivantes :

left : le texte se poursuit en-dessous après un float: left;
right : le texte se poursuit en-dessous après un float: right;
both : le texte se poursuit en-dessous, que ce soit après un float: left; ou après un float: right;. C’est la valeur que je vous recommande d’utiliser pour stopper un flottant.

Pour notre exemple, j’attribue un nom particulier au deuxième paragraphe avec l’attribut class :

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation</title>
    </head>
    <body>
        <img class= "image" src="images.png"   alt="oups" />   
        <p>HTML et CSS sont deux « langues » qu'il faut savoir parler pour créer des sites web. C'est le navigateur web qui
        fera la traduction entre ces langages informatiques et ce que vous verrez s'afficher à l'écran. <br/>
        Vous vous demandez sûrement pourquoi il faut connaître deux langages pour créer des sites web ? Je vous réponds sans plus
        tarder ! </p>
        <p class="para">Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le 
        texte qui devra figurer dans le site (comme on le ferait dans un traitement de texte Word, par exemple), il faut aussi 
        indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc.</p>
        
        <h2>Les rôles de HTML et CSS </h2>
        <p>Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend. Et c'est
        là que les choses secorsent, parce qu'il va falloir apprendre deux langages !
        Pourquoi avoir créé deux langages ? Un seul aurait suffi, non ? </p>
                     
   </body>
</html>

Forme.css


.image
{
 float: right;
}
 
.para
{
    clear: both;
}

Le deuxième paragraphe est entièrement en dessous du flottant.

Sachez qu’il est possible de mettre deux flottants, l’un à gauche, l’autre à droite et le texte au milieu comme le montre l’exemple suivant :

Formation.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation</title>
    </head>
    <body>
        <img class= "image" src="images.png"   alt="oups" width="200" />   
        <img class= "image2" src="photoDiumi.jpg"   alt="Désolé" width="200"  />  
        <p>HTML et CSS sont deux « langues » qu'il faut savoir parler pour créer des sites web. C'est le navigateur web qui
        fera la traduction entre ces langages informatiques et ce que vous verrez s'afficher à l'écran. <br/>
        Vous vous demandez sûrement pourquoi il faut connaître deux langages pour créer des sites web ? Je vous réponds sans plus
        tarder ! </p>
        <p>Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le 
        texte qui devra figurer dans le site (comme on le ferait dans un traitement de texte Word, par exemple), il faut aussi 
        indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc.</p>
        
        <h2>Les rôles de HTML et CSS </h2>
        <p>Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend. Et c'est
        là que les choses secorsent, parce qu'il va falloir apprendre deux langages !
        Pourquoi avoir créé deux langages ? Un seul aurait suffi, non ? </p>
                     
   </body>
</html>

Forme.css


.image1
{
    float: left;
}

.image2
{
    float: right;
}

Forme.css


.image1
{
    float: left;
}

.image2
{
    float: left;
}

Il suffit d’ajouter une marge extérieure au bloc contenant le texte pour qu’il ne soit pas collé au deuxième flottant.

Certains développeurs utilisent cette technique pour la mise en page d’un site web. Prenons l’exemple suivant :


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Formation</title>
    </head>
    <body>
       <section class="bloc1">
       <h1> LES BASES DU LANGAGE ET MODE CONSOLE </h1>
       <p>Wikipédia présente Visual basic comme un langage de programmation événementielle de troisième génération ainsi qu’un 
       environnement de développement intégré, créé par Microsoft pour son modèle COM. <br/>Visual basic est directement dérivé du 
       BASIC (acronyme pour Beginner’s All purpose Symbolic Instruction Code ) et permet le développement rapide d’applications, la 
       création d’interfaces utilisateur graphiques, l’accès aux bases de données en utilisant les technologies DAO, 
       ADO et RDO, ainsi que la création de contrôle ou objets Active X. </p>
       
       <p>Pour coder dans un langage de programmation, il faut des outils adaptés : un éditeur de texte, un compilateur ainsi qu’un 
       débogueur.<br/> Il y a des programmes qui combinent les trois outils et ces programmes sont appelés Environnement de 
       développement intégré (EDI) ou IDE en anglais, pour Integrated development Environment. </p>
        </section>

     
       
       <p>Il y a une naissance en toute connaissance, Thucydide a dit : « Avoir des connaissances sans les partager, c’est se 
       mettre au niveau de celui qui n’a pas d’idées ». Wissen Corporation est là pour assurer votre formation, votre encadrement 
       suivant vos désirs. </p>      
       </section>
                
   </body>
</html>

J’aimerai que les deux sections (bloc1 et bloc2) soient côte à côte, il suffit de flotter bloc1 comme ceci :

Forme.css


.bloc1
{
 float: left;
 border: 2px blue solid;
 width: 60%;
}
.bloc2
{
    border: 2px blue solid;
    margin-left:500px;
}

J’ai ajouté des bordures aux deux sections et une marge extérieure à gauche de la deuxième section.