Créer un en-tête et menu horizontal en HTML/CSS
sylver1994
Messages postés
26
Statut
Membre
-
sylver1994 Messages postés 26 Statut Membre -
sylver1994 Messages postés 26 Statut Membre -
Bonjour,
je suis en école d'ingénieur et je dois concevoir un site internet avec d'autres élèves. Je dois créer cette page : http://hpics.li/710bab4 et j'en suis à ça : http://hpics.li/7a023d6 . Comme vous le constatez, il me manque l'en-tête et le menu horizontal...et c'es là que je pêche. J'ai essayé d'utiliser les balises <header> et </header> dans ma feuille de style CSS, mais ça n'a pas marché (j'ai pourtant réussi à mettre la couleur de fond dedans). J'ai donc deux questions :
- comment coder cet en-tête et le menu horizontal, réutilisés pour plusieurs pages du sites ?
- dois-je les coder dans la feuille CSS ou dans le document HTML ?
Merci d'avance pour vos réponses
je suis en école d'ingénieur et je dois concevoir un site internet avec d'autres élèves. Je dois créer cette page : http://hpics.li/710bab4 et j'en suis à ça : http://hpics.li/7a023d6 . Comme vous le constatez, il me manque l'en-tête et le menu horizontal...et c'es là que je pêche. J'ai essayé d'utiliser les balises <header> et </header> dans ma feuille de style CSS, mais ça n'a pas marché (j'ai pourtant réussi à mettre la couleur de fond dedans). J'ai donc deux questions :
- comment coder cet en-tête et le menu horizontal, réutilisés pour plusieurs pages du sites ?
- dois-je les coder dans la feuille CSS ou dans le document HTML ?
Merci d'avance pour vos réponses
2 réponses
-
'lut,
<header>
est juste une balise sémantique introduite en HTML5, agissant, vu que c'est une balise "block-level", comme un simple<div>
.
C'est une balise HTML, donc a mettre dans le HTML évidemment... Et pour le style, coté CSS, tu ajoutes une règle comme ceci:header { /* Règles ici */ }Constate qu'il n'y a rien devant "header" (pas de # ni .), car on désigne un type de balise, pas un id ou une classe.
Après, tu la stylise pour que ça ressemble... tu mets la couleur de fond à#FFA60F
, la couleur du texte à#FFF
, une bordure basse de 2 pixels couleur#193185
...
Pour ce qui est du menu horizontal, créé un <div> dans le <header>, endisplay:inline-block
, centré (text-align: center
), dans lequel tu mettras d'autres div (en affichageblock
, par défaut) avec le texte... -
Salut gravgun,
j'ai commencé à apprendre la programmation à la rentrée, donc je suis encore novice.
- Il y a une différence entre "header {/*règles ici*/}" et "<header>/*règles ici*/</header>" ? On peut utiliser les 2 méthodes dans le même document ?
- Tu dis que <header> est une balise HTML, elle doit donc être dans le HTML mais qu'il faut ajouter la règle "header {/*règles ici*/} du côté CSS. Je mets ça dans lequel alors ?
J'ai une autre question : j'ai vu qu'il y avait plusieurs "versions" de HTML : le HTML5 et le XHTML. Laquelle est la meilleure à utiliser ?-
On ne peut pas mettre de balises HTML dans le CSS, donc il faut juste mettre
header {/*règles ici*/}. Le CSS se trouve soit dans un fichier à part (en .css) lié a la page via une balise<link rel="stylesheet" href="mon_fichier_css.css">
ou dans le contenu d'une balise<style>
; tous deux étant dans le<head></head>
de ta page. -
-
J'ai l'impression que tu ne saisis pas bien la séparation (et l'intégration) HTML/CSS; HTML sert a faire la structure de la page, ainsi que son contenu, CSS est là pour aider à décorer. Fut un temps CSS n'existait pas et la décoration des pages était faite en HTML, et atroce (on utilisait des tableaux pour centrer/aligner les éléments).
La structure de ton en-tête et menu, c'est a dire les balises, se fait dans le HTML. Les propriétés CSS, pour décorer, se mettent dans une feuille de style CSS.
Pour l'"autre question": aucune des 2 versions n'est meilleure en soit. Ce sont 2 standards qui se respectent; mais j'ai tendance a diriger les gens vers HTML5 car c'est le plus sémantique, le plus simple, et le plus récent. -
-
