Faire un menu horizontale

romain444444 -

Bonjour, je suis débutant dans le domaine, je souhaiterai faire un menu horizontale sur mon site, mais je n'y arrive pas même après plusieurs heure de recherche sur le web et de nombreuse tentative.

Pourriez vous m'aider ?

Voici mon script:

"<!DOCTYPE HTML>

<html lang=fr>
<head>
<meta charset=utf-8/>
<link rel="stylesheet" href="style.css" />
<title>Escalade aventure</title>
<center><img src="https://4.bp.blogspot.com/-1gCZ_dWlZWY/VPxO0w1eygI/AAAAAAAACqE/fYakcxRkf1U/s1250/cooltext115245995745692.jpg" alt="Logo escalade aventure"></center>

</head>

<body>

<nav>
<ul id="Menu_horizontale">
<li><a href=accueil.php>Accueil</a></li>
<li><a href=produit.php>Produit</a></li>
<li><a href=contact.php>Contact</a></li>
</ul>
</nav>

ul#menu_horizontal li {
display : inline;
padding : 0 0.5em;
}
ul#menu_horizontal {
list-style-type : none;
}

<body style="background-color:#32CD32;"></body>"

Afficher la suite

1 réponse

1Seb

Bonjour,

Ça serait plus quelque chose dans ce genre là

HTML :

<!DOCTYPE html>
<html lang=fr>

<head>
<meta charset="utf-8"/>
<title>Escalade aventure</title>
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>

<body>

<div id="logo-header">
  <img src="https://4.bp.blogspot.com/-1gCZ_dWlZWY/VPxO0w1eygI/AAAAAAAACqE/fYakcxRkf1U/s1250/cooltext115245995745692.jpg" alt="Logo escalade aventure"/>
</div>

<ul>
  <li><a href=accueil.php>Accueil</a></li> 
  <li><a href=produit.php>Produit</a></li> 
  <li><a href=contact.php>Contact</a></li>
</ul>

</body>
</html>

CSS :

body {
    background-color : #32CD32;
}
div#logo-header {
    text-align: center;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #111;
}

romain444444 Auteur
Merci pour ta réponse, en copiant/collant, ça ne fonctionne pas, comme si le site ne reconnaissait pas cette écriture, elle s'affiche en texte sur ma page.
0

1Seb

Et ceci ?

<!DOCTYPE html>
<html lang=fr>
<head>
<meta charset="utf-8"/>
<title>Escalade aventure</title> 
<style>

div#logo-header {
    text-align: center;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

body {
    background-color : #32CD32;
}
</style>
</head>
<body>

<div id="logo-header">
  <img src="https://4.bp.blogspot.com/-1gCZ_dWlZWY/VPxO0w1eygI/AAAAAAAACqE/fYakcxRkf1U/s1250/cooltext115245995745692.jpg" alt="Logo escalade aventure"/>
</div>

<ul>
  <li><a href=accueil.php>Accueil</a></li> 
  <li><a href=produit.php>Produit</a></li> 
  <li><a href=contact.php>Contact</a></li>
</ul>

</body>
</html>

romain444444 Auteur
ça marche !! je te remercie !!!

Qu'est ce que tu as changé ?
0
animostab
Bonjour
au lieu d'utiliser la balise <style> dans la page essaie d'apprendre a utiliser le css (le style) dans un fichier externe et de l'importer grace à la balise link dans le head plus d'infos ici sur le css https://www.cssdebutant.com/debuter-en-css-integrer-du-css-page-HTML.html
0

Faire un menu horizontale

1 réponse

Discussions similaires

Newsletters