Sujet Précédent Sujet Suivant

Faire un menu horizontale

Fermé
romain444444
Messages postés
11
Date d'inscription
mercredi 11 avril 2018
Statut
Membre
Dernière intervention
15 avril 2018
 - Modifié le 11 avril 2018 à 04:42
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
 - 12 avril 2018 à 22:00
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>"
A voir également:

1 réponse

Réponse 1 / 1
1Seb
Messages postés
166
Date d'inscription
dimanche 27 mars 2016
Statut
Membre
Dernière intervention
30 octobre 2021
 36
Modifié le 11 avril 2018 à 08:35
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;
}
0
romain444444
Messages postés
11
Date d'inscription
mercredi 11 avril 2018
Statut
Membre
Dernière intervention
15 avril 2018
11 avril 2018 à 15:07
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
Messages postés
166
Date d'inscription
dimanche 27 mars 2016
Statut
Membre
Dernière intervention
30 octobre 2021
 36
Modifié le 11 avril 2018 à 17:33
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>
0
romain444444
Messages postés
11
Date d'inscription
mercredi 11 avril 2018
Statut
Membre
Dernière intervention
15 avril 2018
11 avril 2018 à 23:43
ça marche !! je te remercie !!!

Qu'est ce que tu as changé ?
0
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
 714
12 avril 2018 à 22:00
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