Faire un menu horizontale

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   -
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>"

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;
}
0
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.
0
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>
0
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é ?
0
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
0

Discussions similaires

Cliquer sur un bouton pour faire apparaitre un paragraphe/image
Utilisateur anonyme -
nass6906 -

16 réponses
Faire sauter 2 lignes avec br (CSS)
Utilisateur anonyme -
banjopo -

1 réponse
Séparer les codes CSS, HTML et JS qui se trouvent dans un fichier .html
Rafael126 -
Carou -

7 réponses
Aligner trois images horizontalement
khiz20 -
jordane45 -

1 réponse
Faire passer du texte SOUS une image HTML / CSS
Mihai -
animostab -

2 réponses
Ecrire du texte à coté de l 'image
sabineh1 -
sabineh1 -

17 réponses