Inserer un menu dans le header

Résolu/Fermé
Signaler
Messages postés
121
Date d'inscription
dimanche 21 octobre 2012
Statut
Membre
Dernière intervention
1 juillet 2014
-
Messages postés
121
Date d'inscription
dimanche 21 octobre 2012
Statut
Membre
Dernière intervention
1 juillet 2014
-
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>
<!-- En-Tête de la page -->
<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

1 réponse

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
706
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
Messages postés
121
Date d'inscription
dimanche 21 octobre 2012
Statut
Membre
Dernière intervention
1 juillet 2014
112
bonjour,

ça marche pas :'(

helenedu39
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
706
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
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
706
tu peux mettre en résolu si c'est bon
Messages postés
121
Date d'inscription
dimanche 21 octobre 2012
Statut
Membre
Dernière intervention
1 juillet 2014
112
ok merci c niquel