Faire un menu horizontale

Html
Css

romain444444 Messages postés 11 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention - 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>"

Afficher la suite

A voir également:

Menu horizontal en css
Menu déroulant excel - Guide
Menu caché tv continental edison ✓ - Forum Téléviseurs
Canon quick menu - Télécharger - Utilitaires
Excel menu déroulant en cascade - Guide
Windows 11 menu contextuel classique - Guide

1 réponse

Réponse 1 / 1

1Seb Messages postés 166 Date d'inscription Statut Membre Dernière intervention 38

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 38

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 Statut Membre Dernière intervention

ça marche !! je te remercie !!!

Qu'est ce que tu as changé ?

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

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

Cliquer sur un bouton pour faire apparaitre un paragraphe/image

Faire sauter 2 lignes avec br (CSS)

Séparer les codes CSS, HTML et JS qui se trouvent dans un fichier .html

Aligner trois images horizontalement

Faire passer du texte SOUS une image HTML / CSS

Ecrire du texte à coté de l 'image

Votre réponse

Discussions similaires