CLIN
NOUS CONTACTER




Apprendre le HTML et le CSS Positionnez les Menus sur son site web

14/11/2020

Ceci est le deuxième article sur la série apprendre le HTML et CSS. Vous découvrirez comment positionner les menus de votre site en utilisant la propriété CSS margin, padding et display.
Nous reprenons notre page html de base.

<! 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/votreLogo.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 site web-->
</div>
<!--ici le pied de votre site web-->
<div class="pied">
<div class="copy">
Copyright votre site Web tous droits réservés
</div>
</div>
</body>
</html>

Nous avons déjà positionné l'en-tête de notre site mais si vous avez exécuté le code sur votre navigateur tout en suivant les instructions que je vous avez données à l'article précédent vous devez avoir constaté que les menu ce sont positionnés n'importe comment et on voudrait les placés à un endroit souhaité sur notre page pas de panique.
Maintenant ce que nous allons faire dans c'est article nous ferons de sorte que ces éléments puissent se séparer d'un espace de 5px comme marge extérieur et 5px comme marge intérieur et se positionner de la sorte:
Accueil A propos Service Contact
1.margin ou marge extérieur : le margin permet un espacement d'un élément html part rapport à un autre en d'autre terme le margin évite à l'élément sur le quel il est appliqué de se coller à un autre élément proche plus vous mettez de pixel plus élevé plus l'élément s'éloigne de l'autre. Vous devez ici faire encore usage à ce quatre mots que nous avons essayés d'expliquer à l'article précédent notamment top, bottom, right et left.
2.padding ou marge intérieur: La propriété padding est une propriété raccourcie qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. les boîtes CSS). Elle synthétise padding-top , padding-right , padding-bottom ,padding-left.
En d'autre terme il permet d'augmenter l'épaisseur d'un élément sur le quatre côtés si aucune valeur n'est précisé(top,bottom,left et right).
3. Display: la propriété css display peut être Utilisé de deux façons.
a) display-bloc: c'est la propriété que possède la plus part des éléments html par défaut c'est le cas des éléments comme les
 <div>, h(<h1> jusqu'à <h6>) ,<p>
ect.
cette propriété permet à un élément html de s'aligner en dessous de l'élément qui le précède exemple pour nos li
.Accueil
.À propos
.Services
.Contact

b)display inline : la propriété display-inline permet à un élément html de se placer en ligne par rapport à l'élément qui le précède.
Exemple pour nos li
Accueil A propos Services Contact
C'est la propriété qui va nous intéressée dans c'est article pour pouvoir positionné nos menus convenablement.
Ainsi pour positionner notre élément ul au centre de notre page nous écrirons le code suivant dans notre fichier style.css
.navigation ul{
position relative ;
Margin-left:250px ;
}
.navigation ul li{
list-style-type:none ;
display:inline ;
margin:5px ;
padding:5px ;
}
.navigation ul li a{
text-decoration:none ;
font-size:25px ;
color:#fff ;
}

Après cela exécuter votre code et voilà nos menus sont correctement placés au centre de notre page si c'est pas le cas pour vous, Vous pouvez jouer sur le margin-left soit l'ajouter ou même le diminuer.
Si vous avez aimé c'est article n'oublie pas de laisser un commentaire en bas de cette page.
Publié par Destiny Kasigwa.


Votre commentaire





Commentaires


Jibu buluhu   01/06/2021 à 20:56:15
En tout cas merci beaucoup pour cet article

Destiny   16/11/2020 à 11:09:38
Oui merci moïse. Vous pouvez toujours sugerez l'article que vous souhaiter être le suivant...

Moïse   15/11/2020 à 10:32:57
Voilà l'article que je cherchais, merci beaucoup CLIN

Clark   14/11/2020 à 18:37:47
Article Super intéressant. Merci nous attendons le suivant.