Inserer un menu dans le header
Résolu
Helenedu39
Messages postés
123
Statut
Membre
-
Helenedu39 Messages postés 123 Statut Membre -
Helenedu39 Messages postés 123 Statut Membre -
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
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
-
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-
-
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 -
-
-
