Faire un menu horizontale

Fermé

Html
Css

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:

Menu html horizontal
Menu déroulant excel - Guide
Editeur html - Télécharger - HTML
Windows 11 menu démarrer classique - Guide
Canon quick menu - Télécharger - Utilitaires
Br html ✓ - Forum Webmastering

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 37
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;
}

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.

1Seb Messages postés 166 Date d'inscription dimanche 27 mars 2016 Statut Membre Dernière intervention 30 octobre 2021 37
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>

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é ?

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
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

Discussions similaires

Comment centrer un menu d'un site html ?

Menu CSS Vertical deroulant au clic

[CSS] menu déroulant vertical

Menu actif en CSS

Cliquer sur un bouton pour faire apparaitre un paragraphe/image

Faire sauter 2 lignes avec br (CSS)