Apprendre la programmation HTML et CSS #8 Mise en page (1/2)

Bienvenue dans cette 8e partie de la série sur apprendra la programmation HTML et CSS.  Aujourd’hui, nous allons voir comment faire la mise en page de notre CSS et HTML. Au programme, nous allons voir le fonctionnement des span et des div qui nous servent à structurer nos pages.

 Par la suite, nous allons voir comment modifier la hauteur et la largeur de chaque élément qui se trouvent dans notre page. Et avec ceci, nous serons capables aussi d’ajouter des marges pour ajouter de l’espacement à notre contenu.

 Et nous finirons par quelques éléments complémentaires comme les dépassements de textes et le positionnement du contenu en CSS comme pour faire des en-têtes fixe.

Noter par contre que ces techniques sont des anciennes techniques, il y a désormais la technique flexbox qui permet une meilleure gestion de notre mise en page CSS, mais vous devez savoir ces techniques, car ils peuvent vous être utiles à tout moment.

Version vidéo

Tu préfères la version vidéo? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.

Découvrez les balises SPAN et DIV

Aujourd’hui je vais vous présenter de nouvelles balises. La balise SPAN et DIV. Chacune d’entre elles, on une utilité très différente. Pourtant, dans leur ensemble, ils sont pareils. C’est-à-dire qui ne servent à rien!

 En fait, les deux servent à structurer. Le div lui va permettre de structurer la page dans son ensemble avec des blocs.

 Tant qu’au span, lui va permettre de structurer les éléments qui sont à d’autres éléments.

 Pour vous mettre plus en concret, je veux vous montrer ce qu’à quoi ressemble un DIV.

Comme nous pouvons le voir ce sont des boîtes. Nous pouvons les mettre un dans l’autre, nous pouvons modifier la grandeur et la grosseur. Aussi, nous pouvons lui ajouter du contenu à l’intérieur et c’est ce qui va nous permettre de structurer notre page. De base, nous ne le verront pas apparaître, car de base, il n’a pas de grandeur et de largeur prédéfini et il est invisible.

Tandis que pour le span, lui il va servir à l’intérieur du contenu. Voici un exemple de span.

Voici comment écrire les deux balises :

<span class=”souligner”> 200$, $300 a day in consistent income </span>

<div class=”page”>
</div>

Définissez des hauteurs et largeurs

Comme je l’ai dit plus haut, de base le div n’a pas de largeur et de hauteur, il faudra lui en donner une. La technique que je vais vous donner, tu vas autant pouvoir vous en servir pour modifier la hauteur et la largeur de tous les éléments comme les images.

 Cela va se faire avec notre code CSS. 

.page { /* La classe page fait référence au DIV class=”page” */
Width: 769px; /* Définit une largeur de 769 pixels, nous pouvons utiliser tous les unités de mesure */
Height: 1000px; /* Définit une hauteur de 1000px, nous pouvous utiliser tous les unités de mesure */
}

Nous pouvons ajouter aussi une hauteur minimum et maximum pour qu’elle puisse s’adapter:

Min-width: <!-- Hauteur minimal -->
Max-width: <!-- Hauteur Maximal -->

Min-height: <!-- Hauteur minimal -->
Max-height: <!-- Hauteur maximal -->

Mettre des marges

Prenons un exemple. Par exemple, vous avez un div qui est dans un autre div pour faire une mise en page d’un article qui serait dans une page. Vous trouvez que votre article est trop près du rebord de la page. Alors, nous y ajouterons des marges

Les marges sont gérées par le CSS. Il existe deux types de marge:

Les marges intérieures et les marges extérieur.

Comme dans notre exemple de tout à l’heure avec les div, Voici la différence du marché intérieur et du marché extérieur.

Nous pouvons aussi ajouter des marges spécifiques à un côté. Nous pouvons ajouter des marges intérieures droite, gauche, haut, bas, même chose pour les marges extérieurs.

Voici le code pour les marges. 

Margin: 10px; /* Marge extérieur de 10px partout autour */
Margin-left: 10px; /* Marge extérieur gauche de 10px */
Margin-right: 10px; /*Marge extérieur droite de 10px */
Margin-bottom: 10px; /* Marge extérieur bas de 10px */
Margin-top: 10px; /* Marge extérieur haut de 10px */

Padding: 5px; /* Marge intérieur de 5px */
Padding-left: 5px; /* Marge extérieur gauche de 5px */
Padding-right: 5px; /*Marge extérieur droite de 5px */
Padding-bottom: 5px; /* Marge extérieur bas de 5px */
Padding-top: 5px; /* Marge extérieur haut de 5px */

Le texte et son dépassement

Bon, en plus de tout cela, nous avons parlé d’un petit élément supplémentaire qui pourrait vous être utile. Le dépassement du texte. Il se peut que votre texte dépasse de votre div. Que faire lorsque cela arrive ?

En fait, il existe deux propriétés qui vont nous être utiles. 

Premièrement, si vous voulez ajouter des barres de défilement lorsque cela dépasse pour que le DIV reste la même taille, mais qu’il y a une barre de défilement, nous allons ajouter la propriété overflow.

Voici comment faire:

.mondiv{ /* Div avec la classe mondiv */
Overflow: hidden; /* Supprime le texte qui dépasse */
Overflow: scroll; /* Ajoute une barre de défilement */
Overflow: auto; /* Laisse le navigateur décider, souvent barre défilement */
}

Et par la suite, nous avons the word-wrap. Celui-ci, permet de faire un retour à la ligne lors du dépassement. 

Div {
word-wrap: break-word;
}

Le positionnement du contenu CSS

Et finalement, nous avons la positionnement de notre contenu CSS. Le positionnement de notre contenu CSS va se faire grâce à des types de position. Les types de position permettent entre autres de mettre une en-tête fixe qui se fixe en haut, définir une barre de retour vers le haut en bas à droite qui reste visible tout au long de notre page ou même de définir une position qui va être prédéfini dans notre page. Exemple au centre de la page peu importe la hauteur.

Tout à l’heure vous vous rappeliez que je vous ai parlé des div et des span? Justement, c’est 2 balises ont un type de propriété différent. Mais nous pouvons changer tous les deux leur type.

Alors je vais vous présenter la propriété display. Celle-ci, nous permet entre autres de définir l’affichage d’un élément. 

Display: inline; /*Pour le transformer en élément intérieur comme un SPAN */
Display: block; /*Pour transformer en bloc de structure comme un DIV */
Display: inline-block; /*Pour transformer en un inline qui agit comme un block */
Display: none; /*Cacher l’élément, utile pour des sites responsive qui cachent certaines parties au mobiles */

Et par la suite, nous avons les positions. Les positions permettent de définir la position d’un élément dans une page. 

Position: fixed; /* Permet de donner une position à un élément qui va rester dans la page même si nous descendons ou montons.
Position: absolute /* Même chose que le fixed, il reste a un endroit définit dans la page, mais lui ne bougera pas de son endroit */

Alors avec ceci nous devons ajouter des propriétés à notre CSS avec les positions. Nous devons ajouter l’emplacement de chacun.

Nous pouvons le faire avec:

Top: 10px; /* Décallement de 10px du haut de page*/
Bottom: 10px; /* Décallement de 10 px du bas de page */
Left: 10px; /* Décallement de 10 px du gauche de la page */
Right: 10px; /* Décallement de 10px de la droite de la page */

Donc si vous voulez exemple faire quelque chose accroche au haut de la page vous avez simplement qu’à faire:

Top: 0;

Ou si vous désirez qu’il s’accroche en bas à droite de la page vous pouvez faire:

Bottom: 0;

Right: 0;

FAQ

Comment enlever marge css ?

Il se peut que vous avez déjà des marges, par exemple si vous utilisez WordPress. La meilleure façon de que vous pour vous de découvrir d’où provient la marche, elle fait dodo sur la marge que vous souhaitez enlever avec Google Chrome et de faire inspecter. Lorsque vous serez dans la section éléments mode développeur, sur la droite, vous allez voir les styles. Aller tout en bas des styles et vous allez voir l’élément, les marges qui lui sont attribuées comme dans l’image qui suit.

Ce tutoriel se trouve dans la catégorie: Programmation