Inserer un menu dans le header

Résolu/Fermé

Helenedu39 Messages postés 121 Date d'inscription dimanche 21 octobre 2012 Statut Membre Dernière intervention 1 juillet 2014 - 28 nov. 2013 à 11:01
Helenedu39 Messages postés 121 Date d'inscription dimanche 21 octobre 2012 Statut Membre Dernière intervention 1 juillet 2014 - 2 déc. 2013 à 08:54

Bonjour,

et oui c'est encore moi,

voila cette foi ma question est simple je voudrai mettre un menu <nav> sur l'image de mon header mais es ce possible??

voila mes code html:
<!DOCTYPE html>
<html lang = "fr">
<head>

<meta charset = "utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Accueil</title>
</head>
<body>
<header>
<img src="" alt="mon logo">

<ul id="nav"><li><a href="Index.html">Accueil</a></li><li><a href="#">Compétences</a></li><li><a href="#">Téléchargement</a></li><li><a href="Contact.html">Me Contacter</a></li>
</ul>
</header>

et mes code CSS:
header
{

/*background-image: url("");
background-repeat: no repeat;
background-size: cover;
background-attachment:fixed;
position:absolute;*/
}
#nav
{
padding: 0; margin: 0;
text-align: center; /* centrer le texte */
}
#nav li {
display: inline;
list-style: none;
}
#nav a {
display:inline-block;
margin: -99px 30px;
}

body
{
background-color:black;
}
article
{
color: white;
border-radius: 10px 10px 10px 10px;
background-color: "rgba(0, 0, 0, 0.0)";
text-align: justify;
font-size: 16px;
font-family: Rockwell;
position: absolute;
left: 200px;
top: 200px;
width: 900px;
}

jespere que vous pourrez me guider
d'avance merci ,
Hélènedu39

A voir également:

Header menu
Menu déroulant excel - Guide
Windows 11 menu démarrer classique - Guide
Canon quick menu - Télécharger - Utilitaires
Réinitialiser menu démarrer windows 10 - Guide
Activer bluetooth tv samsung menu caché ✓ - Forum TV & Vidéo

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 28/11/2013 à 13:18

Bonjour c'est très simple

dans le html tu retire

<img src="" alt="mon logo">

dans le css

header {

background-image: url("chemin/image.jpg");
background-repeat: no repeat;
background-size: cover; /*optionnel*/
}

chemin/image.jpg le chemin vers l'image que tu utilisera dans ton header, tu peux y ajouter un height (de la hauteur de ton image) et un width

voila

Un petit merci vaut mieux qu'une grande ignorance

Helenedu39 Messages postés 121 Date d'inscription dimanche 21 octobre 2012 Statut Membre Dernière intervention 1 juillet 2014 111
28 nov. 2013 à 13:47

bonjour,

ça marche pas :'(

helenedu39

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 28/11/2013 à 16:26

Ca devrait marcher

a mince j'ai mis des doubles quote dans background-image: url("chemin/image.jpg");

bon crée une image de 50px X 900px

tu la nomme logoheader.jpg et tu la mets dans un dossier nommé images

le html

<header>

<nav>
<ul><li><a href="Index.html">Accueil</a></li><li><a href="#">Compétences</a></li><li><a href="#">Téléchargement</a></li><li><a href="Contact.html">Me Contacter</a></li>
</ul>
</nav>
</header>

le css

header {
width:900px;
height:50px;
background-image: url(images/logoheader.jpg);
background-repeat: no repeat;
border-radius: 10px;
}
nav
{
text-align: center; /* centrer le texte */
}
nav ul {
padding-top:15px;
}
nav li {
display: inline;
list-style: none;
}
nav a {
margin:0 30px;
padding:0;
}

si ton image est plus haute le height de header tu mets meme hauteur que l'image
et le padding-top de nav ul plus grand

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
29 nov. 2013 à 13:21

tu peux mettre en résolu si c'est bon

Helenedu39 Messages postés 121 Date d'inscription dimanche 21 octobre 2012 Statut Membre Dernière intervention 1 juillet 2014 111
2 déc. 2013 à 08:54

ok merci c niquel

Discussions similaires

debloquer le code 400 bad request qui s'affiche à google

Comment retrouver le bouton menu de Tv Tcl

les entrées et les sortées

menu caché

Déblocage du mode hôtel Philips 20HF5234/10