CLIN

Apprendre le HTML et le CSS position absolute et relative

15/11/2020

C'est article s'adresse principalement aux apprenants passionnés par le développement Web qui venaient de commencer avec le HTML et qui ont déjà l'idée de comment ressemble une page Web du point de vue fonds et du point de vue forme.
Un simple rappel ne fera du mal à personne une page Web est constituée de 3 parties principales
1. L'en-tête
2. Le corps
3. Le pieds
Chacune de ces parties contient des balises de votre choix selon le besoin et selon votre préférence.
Comme je suis très gentil j'ai écrit à la main ici ce bout de code qui respecte la structuration d'une page Web valide

<!DOCTYPE html>
<html>
<head>
<title>EXEMPLE D'UNE PAGE WEB VALIDE</title>
<meta charset="utf-8"> <! --pour ne pas avoir un problème d'accent->
<link rel="stylesheet" type="text/css" href="css/style.css"> <! --le fichier style.css n'existe pas vous devez le créer c le fichier qui doit comporter notre code css-->
</head>
<body>
<! --ici l'en-tête de notre page-->
<div class="header">
<div class="logo"><img src="images/votreImage.jpg"/><! --ici vous devez preciser le nom de votre logo suivi de son extension ici j'ai mis .jpg peut être que chez vous c'est .png sans problème -->
</div>
<div class="navigation">
<ul>
<li><a href="#">ACCUEIL</a></li>
<li><a href="#">À PROPOS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">SERVICES</a></li>
</ul>
</div>
</div>
<div class=contenu>
<! --ici le contenu de votre page c'est le corps de la page-->
</div>
<! --ici le pied de votre page-->
<div class="pied">
<div classe="copy">copyright Votre site Tous droits réservés</div></div>
</body>
</html>

Voilà, là vous avez un exemple d'une page Web valide.
je vous recommande donc de créer un dossier sur votre bureau nommé formation web à l'intérieur créer un autre dossier que vous nommé css et enfin un autre que vous nommé images.
dans le dossier formation web créez en un fichier index.html puis placez vous dans le dossier css et créez en un fichier style.css enfin prenez une image de votre choix et placez la dans le dossier images en suite copier coller le code ci-haut dans le fichier index.html. Vous pouvez utiliser un éditeur de text et un navigateur de votre choix, moi j'utilise au cotidien sublime Text3 comme éditeur et Chrome comme navigateur vous pouvez utilisez notpad++, vscode peu importe le choix est à vous.
Ainsi notre article va porter sur comment positionner les éléments sur un endroit souhaité de sa page web en utilisant la propriété CSS position.
On peut utiliser plusieurs propriétés CSS comme par exemple float,flex ou position.
Nous, ce qui va nous intéresser ici car d'ailleurs le plus utilisé par le développeur web c'est position.
La propriété position. peut prendre deux valeurs , il s'agit de relative ou absolute
1. absolu: lorsque vous mettez un élément html en position absolue c'est la signifie que vous positionnez l'élément par rapport à toute la page et non pas part rapport à l'élément dans le quel il se trouve.
Pour être plus explicite prenons un exemple nous avons créer dans notre page html un élément div qu'on a donné une classe nommée logo on voudrait que c'est élément puisse se placer tous à haut à gauche de notre page.
Vous devez savoir qu'à CSS pour placer les éléments sur sa page on devrait savoir un peu d'anglais. Pardon ne soyez pas effrayé mais juste un petit anglais technique, savoir que signifie haut,bas,gauche et droit je ne crois pas que pour de simple mot comme ça on devrait finir 6mois entrain d'apprendre l'anglais ou être Hillary Clinton pour utiliser de mots aussi simple que ça ; mais je vous le conseil si ça vous va car dans votre aventure de programmeur vous aurez toujours à manipuler l'anglais pour programmer.
Bon, revenons à nos mots tôt ces 4 mots sont inévitable pour positionner vos éléments sur une page Web il s'agit de top,bottom,left et right
Si nous souhaitons placés notre élément div avec comme classe logo à haut à gauche nous écrirons ceci dans notre fichier CSS.
.logo{
position:absolute ;
top:0px ;
right:0px ;
}
.entente{
back-ground:stleelblue ;
width:100%;
height:100px ;
position:absolute ;
top:0px ;
}

Vous devez savoir que par défaut le navigateur laisse une image avec une hauteur trop grande et une largeur aussi gênante ce qui fait que nous allons essayer de réduire la taille de notre image en utilisant le code qui suis
.logo img{
width:60px;
height:40px;
}

vous pouvez enregistrer et vérifier Ce qui se passe si tout vas bien vous verrez que l'image à été placée à haut à gauche de notre page c'est qui est ce que nous voulions.
Vous pouvez faire pareil pour tout élément que vous voulez.
si ça ne marche pas chez vous, vous pouvez vérifier si votre fichier style.css a bien été crée sinon crée le et mettez y le code CSS qui se trouve à haut.
2.position relative: le principe est le même sauf que l'élément se place par rapport à son élément parent.
Nous avec créer notre élément div avec une classe dénommée pied à l'intérieur nous y avons créer une autre div avec une classe dénommée copy nous voudrions que notre copyright puisse se placer dans la même div mais à droite. pour cela nous écrivons le code suivant:
.pied{
back-ground:steelblue ;
width:100%;
height:60px ;
}
.pied .copy{
position:relative ;
right:0px ;
}

En conclusion la position absolute place un élément html par rapport à l'élément global qui est le body est qui représente toute la page entière.
La position relative place un élément html en relatif par rapport à son élément parent c'est à dire l'élément dans le quel il se trouve directement.
Si vous avez aimé c'est article n'oublie pas de laisser un commentaire tout à bas de cette page.
Merci d'avoir lu c'est article !
Article publié par Destiny Kasigwa
un passitionné du Web.


Votre commentaire





Commentaires


Destiny    13/11/2020 à 16:49:41
Oui merci Moïse pour votre appréciation.

Moïse   13/11/2020 à 15:29:55
Article intéressant vraiment, Merci beaucoup pour cette information

Destiny    13/11/2020 à 13:42:27
C'est un article intéressant pour ceux qui souhaitent se lancer dans la programmation Web car cette propriété CSS vous aurez à l'utiliser régulièrement dans votre développement web pour posisitionner vos éléments à des endroits voulus...