Création d'un Menu Horizontal avec CSS

Réaliser un menu Horizontal réactif
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 3
Revoir le teaser Je m'abonne
3,0
Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
3,0
59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont :
- Apprenez à dupliquer et renommer des fichiers HTML.
- Utilisez la propriété float pour organiser les éléments en ligne.
- Ajustez les propriétés de taille et de padding pour un rendu optimal.

Découvrez comment transformer un menu vertical en menu horizontal en utilisant simplement des propriétés CSS comme float left.

Dans ce tutoriel, nous allons voir comment convertir un menu vertical en un menu horizontal avec quelques ajustements simples en CSS. Vous apprendrez à dupliquer vos éléments existants et à modifier les propriétés spécifiques pour obtenir un alignement horizontal. Les étapes incluent le changement des noms et des propriétés, et l'importation du fichier HTML modifié. Le point clé est l'utilisation de la propriété CSS float avec la valeur left, ce qui permet aux éléments li de s'aligner horizontalement.

Ensuite, nous ajusterons les tailles et le padding pour une mise en forme parfaite en ajustant les valeurs de width et de padding pour atteindre un alignement centré et propre. Ces ajustements garantiront que votre menu soit non seulement fonctionnel mais aussi esthétiquement plaisant.

Voir plus
Questions réponses
Quels sont les changements principaux apportés pour transformer un menu vertical en horizontal?
L'utilisation de la propriété CSS float avec la valeur left est le changement principal, en plus de l'ajustement des tailles et du padding.
Pourquoi est-il nécessaire d'ajuster la taille à 138 pixels?
Il est nécessaire d'ajuster la taille à 138 pixels pour s'assurer que le rendu final du menu est bien aligné et centré de manière appropriée.
Quel est l'impact de l'ajout d'un padding de 1 pixel à gauche sur le <ul>?
L'ajout d'un padding de 1 pixel à gauche permet de combler le déficit et d'aligner parfaitement le menu horizontal par rapport à l'ensemble de la page.

Programme détaillé

1 commentaire
3,0
1 vote
5
4
3
2
1
Cicine
Il y a 1 year
Commentaire
Dans la séquence slide auto, pas d'explication sur le 12% du slider auto; quelle est l'origine de ce chiffre? pas d'explication me bloque. Je suis obligée d'aller voir une autre plateforme qui présente le slide auto.
Dommage.