Forum-webmaster 
Technique - programmation => HTML / CSS / XHTML => Message commencé par: bidouille7 le le 11-10-2012 a 09:58:46
Titre: Menu horizontal
Posté par: bidouille7 le le 11-10-2012 a 09:58:46
Bonjour. Je suis en train d'apprendre le html et css, et je voudrais savoir comment mettre un menu pour qu'il soit horizontal? je mets le code html et css ci dessous:

code html;
<div class"menu_horizontal"
<ul>
<li><a href="accueil.php"> Accueil</a></li>
    <li><a href="aide.php"> Aide</a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href="contact.php"> Contact</a></li>
</ul>
</div>

Code css;
#menu_horizontal {
display:block;
position:absolute;
background-color:#CCFFCC;
color:#000000;
width:0 auto;
height:50px;
padding:10px;
margin:10px;
list-style-type:none;
text-align:center;
border:solid;
/*pour avoir un effet "outset" avec IE :*/
border-color:#DCDCDC #696969 #696969 #DCDCDC;
}

Merci pour votre aide et à plus.
Titre: Re:Menu horizontal
Posté par: KB le le 11-10-2012 a 14:10:34
hello,
ca devrait t'aider: http://www.siteduzero.com/tutoriel-3-37440-un-menu-horizontal.html
Titre: Re:Menu horizontal
Posté par: bidouille7 le le 11-10-2012 a 14:25:50
re.Merci KB, j'avais déjà vu cela. J'ai réessayé et le résultat est nul car j'ai toujours le menu en vertical. Je pense qu'il manque quelque chose et je ne sais pas quoi, peut-être "display:inline;" regardes le code css:
ul#menu_horizontal {
width : 600px;
height : 30px;
margin : 2em 0 0 0;
padding : 0;
background-color : #f4f9fd;
border : 1px dashed black;
list-style-type : none;
}

ul#menu_horizontal li {
padding : 0 0.5em;
line-height : 30px;
}

ul#menu_horizontal li.bouton_gauche {
float : left;
border-right : 1px dashed black;
}

ul#menu_horizontal li.bouton_droite {
float : right;
border-left : 1px dashed black;
}

ul#menu_horizontal a {
color : black;
text-decoration : none;
padding : 0 0.5em;
font : 0.8em "Trebuchet MS";
}

ul#menu_horizontal a:hover { text-decoration : underline; }

ul#menu_horizontal a img {
border : none;
padding : 0 0.3em;
}

le code html:
<link rel="stylesheet" media="screen" type="text/css" title="index" href="stylecss.css" />

<ul id="menu_horizontal">
<li class="bouton_gauche"><a href="#"><img src="accueil.png" alt="accueil" />Accueil</a></li>
<li class="bouton_gauche"><a href="#"><img src="news.png" alt="news" />News</a></li>
<li class="bouton_gauche"><a href="#"><img src="livredor.png" alt="livre d'or" />Livre d'or</a></li>
<li class="bouton_droite"><a href="#"><img src="team.png" alt="admin" />Admin</a></li>
<li class="bouton_droite"><a href="#"><img src="mp.png" alt="contact"/>Contact</a></li>
</ul>

Merci pour ton aide et à plus.
Titre: Re:Menu horizontal
Posté par: KB le le 11-10-2012 a 14:33:02
J'ai copié collé ton code et jai juste rajouté <style></style> au début et a la fin de ton CSS.
Chez moi (et sous FF), ton menu est bien horizontal.
Titre: Re:Menu horizontal
Posté par: bidouille7 le le 11-10-2012 a 15:11:35
Merci ,et ou as-tu mis <style></style>?
Titre: Re:Menu horizontal
Posté par: KB le le 11-10-2012 a 15:21:03
<style> avant ton css et </style> après ton css

le code que tu m'as donné n'est pas le code complet de ta page j'espere?
Titre: Re:Menu horizontal
Posté par: bidouille7 le le 11-10-2012 a 15:32:43
non ,c'est juste le code pour le menu. Mais le <style> t </style> tu le mets dans le code css ou dans le code html? Excuses moi mais je débute, alors je cherche en même temps à comprendre. Merci.
Titre: Re:Menu horizontal
Posté par: KB le le 11-10-2012 a 15:43:49
aaaa ok ! ;D on ne s'etait pas compis.

Si le CSS est dans ton fichier <link rel="stylesheet" media="screen" type="text/css" title="index" href="stylecss.css" />, tu peux oublier ce que j'ai dit ! ca devrait marcher car ton code semble correct.

Si le css que tu as posté est dans ton html, tu dois mettre les balises <style>.
Titre: Re:Menu horizontal
Posté par: bidouille7 le le 11-10-2012 a 16:04:41
j'ai bien un fichier style css séparé du fichier php. Mais le menu est toujours vertical quoique je fasse.Cela me gêne car je veux mettre un autre menu vertical à gauche de la page index.
En plus lorsque je place le code pour la connexion celui-ci est vertical et je voudrais le mettre horizontal au bout du menu horizontal ou au dessus de l'image d'en-tête. Comment faire?
Au dessous de l'image d'entête je voudrais placer mon code de traduction du site.
Merci.
Titre: Re:Menu horizontal
Posté par: KB le le 11-10-2012 a 16:45:06
t'as pas une url de test ou ton code complet?
Titre: Re:Menu horizontal
Posté par: bidouille7 le le 11-10-2012 a 17:31:47
J'ai pas d'url de teste car je fais en local avec easyphp., mais je peux t'envoyer les pages de code en MP si tu veux, car je voudrais pas les mettre ici.j'espère que tu comprends pour la confidentialité. Merci.
Titre: Re:Menu horizontal
Posté par: WebVitrine le le 11-10-2012 a 18:08:01
Rolalala, les mecs... vraiment...

li {display: block; float: left;}

ou

li {display: inline;}

Pour l'utilisation, il y a un exemple concret d'un menu ici :
http://www.alsacreations.com/article/lire/1209-display-inline-block.html
voir le paragraphe : Une navigation horizontale (éléments de liste)
Titre: Re:Menu horizontal
Posté par: bidouille7 le le 11-10-2012 a 18:12:39
9a fonctionne pas webvitrine. Merci.
Titre: Re:Menu horizontal
Posté par: deadmix le le 12-10-2012 a 00:23:38
tien, pour pas trop te prendre la tete :

http://www.w3schools.com/css/tryit.asp?filename=trycss_float5

c'est un exemple pure et simple et c'est a toi d'ajouter et jouer avec les couleurs..etc

Bonne chance
Titre: Re:Menu horizontal
Posté par: WebVitrine le le 12-10-2012 a 00:27:13
Soit tu es sur ton cache navigateur.
Soit ton fichier css n'est pas relié à ta page.
ou soit tu as une propriété qui pose problème.

display : block avec un alignement float : left positionne tes "li" sous forme de bloc flottant à la suite des un des autres.

display : inline affiche tes li en ligne.

C'est du basic en CSS.

Copie colle l'intégralité de ta page et de ton fichier css
Titre: Re:Menu horizontal
Posté par: bidouille7 le le 12-10-2012 a 10:33:25
Bonjour. les essais infructueux, soit c'est à droite,soit à gauche pour le menu vertical et le bloc "connexion". Je mets les codes html et css.

le html=
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>index</title>
<link rel="stylesheet" media="screen" type="text/css" title="index" href="style.css" />
</head>

<body>
<div classe"entete"

<img src="ban.gif" width="100%" height="100" />
</div>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Aide</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contactez-nous</a></li>
</ul>

<div id="connexion"
<form name="form1" method="post" action="pdf_connexion2.php">
<p><label>Pseudo: <input type="text" name="pseudo"></label></p>
<p><label>Mot de Passe: <input type="password" name="password"></label></p>
<p><input type="submit" name="Submit" value="Connexion"></p>
</form>
<p><a href="pdf_recuppass.php">Identifiant perdu?</a> <a href="pdf_inscription.php" title="Inscription">S'inscrire</a></p>

<ul id="menu_vertical">
<li><a href="autosmotosbateaux.php">Autos-Motos-Bâteaux</a></li>
<li><a href="bicolage.php">Bricolage</a></li>
<li><a href="jardinage.php">Jardinage</a></li>
<li><a href="outillage">Outillage</a></li>
<li><a href="#"></a></li>
<li><a href="partenaires.php">Partenaires</a></li>
</ul>
</body>
</html>

Le css=
#entête, #menu_horizontal, #connexion, #menu_vertical, #contenu, #pied_de_page,
padding:5px 0; /* Pour la fusion de toutes les pages*/

#entete {
width:100%;
height:150px;
background-image:url(images/ban.gif);
}
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}

#connexion {
display:inline;
float:right;
height:20px
text-align:center;
}
#menu_vertical
ul
{
float:left;
width:100px;
height:auto;
background-color#EDF7F2:;
text-align:left;
}
a:hover {background-color:#75C37D;}
li {display:block;
#contenu {
display:table-cell;
width:800px;
height:auto;
background-color:#FFFFCC;
text-align:left;
}
#pied_de_page {
width:auto;
height:auto;
text-align:left;
}

</tyle>

Voilà vous avez tout. Merci pour votre aide et à plus.
Titre: Re:Menu horizontal
Posté par: WebVitrine le le 12-10-2012 a 10:52:20
Pas surprenant que ça n'fonctionne pas...

Relis ton code html et corrige les fautes car c'est très mal écrit. Revois tes bases html.

Je vois des balises ouvertes et non fermés.
Des balises qui ne veulent rien dire pour un navigateur...
classe"entete" au lieu de class="entete"
Une balise s'écrit comme ça : <balise> données </balise> et non comme ça : <div données </div>

Ton code css... Tu l'as relu ?

background-image:url(images/ban.gif); il manque les ' ' autour de l'url...
background-color#EDF7F2:; le : est mal placé.

li {display:block;
#contenu {
Tu ouvres les propriétés et tu oublis de les fermer avec }

Fait un tour sur le site du zero et réapprend les bases.
Titre: Re:Menu horizontal
Posté par: bidouille7 le le 12-10-2012 a 11:10:52
re. Je me mets seulement maintenant au html et css, donc faut être un peu indulgent. Je ne demande pas mieux que l'on me guide et que l'on me signale mes fautes. C'est comme cela qu'on progresse. Je remets le code corrigé et si il y a encore des erreurs je les corrigerai. Néanmoins malgré cela ça ne fonctionne toujours pas comme je voudrais.

Le html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>index</title>
<link rel="stylesheet" media="screen" type="text/css" title="index" href="style.css" />
</head>

<body>
<div classe="entete"
<img src="ban.gif" width="100%" height="150" />
</div>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Aide</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contactez-nous</a></li>
</ul>

<div id="connexion"
<form name="form1" method="post" action="pdf_connexion2.php">
<p><label>Pseudo: <input type="text" name="pseudo"></label></p>
<p><label>Mot de Passe: <input type="password" name="password"></label></p>
<p><input type="submit" name="Submit" value="Connexion"></p>
</form>
<p><a href="pdf_recuppass.php">Identifiant perdu?</a> <a href="pdf_inscription.php" title="Inscription">S'inscrire</a></p>
</div>
<div id="menu_vertical"
<ul>
<li><a href="autosmotosbateaux.php">Autos-Motos-Bâteaux</a></li>
<li><a href="bicolage.php">Bricolage</a></li>
<li><a href="jardinage.php">Jardinage</a></li>
<li><a href="outillage">Outillage</a></li>
<li><a href="#"></a></li>
<li><a href="partenaires.php">Partenaires</a></li>
</ul>
</div>
</body>
</html>

Le css:
#entête, #menu_horizontal, #connexion, #menu_vertical, #contenu, #pied_de_page,
padding:5px 0; /* Pour la fusion de toutes les pages*/

#entete {
width:100%;
height:150px;
background-image:url("ban.gif";
}
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;
}

#connexion
{
display:inline;
float:right;
height:20px
text-align:center;
}
#menu_vertical
ul
{
float:left;
width:100px;
height:auto;
background-color:#EDF7F2:;
text-align:left;
}
a:hover {background-color:#75C37D;}
li display:block;
}

#contenu
{
display:table-cell;
width:800px;
height:auto;
background-color:#FFFFCC;
text-align:left;
}
#pied_de_page
{
width:auto;
height:auto;
text-align:left;
}

</tyle>

Merci et à plus.
Titre: Re:Menu horizontal
Posté par: WebVitrine le le 12-10-2012 a 11:29:19
Y a toujours pleins de fautes dans ton code html et css.
Dans mon précédent message, je t'ai marqué des pistes à suivre.

A savoir, je me répète : une balise <div> se ferme. Ça ne s'écrit pas <div données </div> mais <div> donnée </div>
class="" s'écrit bien class et non classe
background-color:#EDF7F2:; <---- Y a pas un truc qui gène là ? :;:;:;:;:;:;:;:;

Passe faire un tour sur le site du zero. Tu as besoin de base correcte.
Titre: Re:Menu horizontal
Posté par: WebVitrine le le 12-10-2012 a 12:02:11
Pour faire simple. Découpe ta page en plusieurs éléments :

<div id="entete">Les données de ton entête</div>

ensuite la navigation :
<div id="topnavigation">ton menu principal
<ul>
<li>menu 1</li>
<li>menu 2</li>
</ul>
</div>

ensuite ton contenu:
<div id="conteneur">ici tu places une div colonne avec un float left et une div contenu avec un float aussi en left. De cette façon, tu laisses la possibilité de mettre une div troisième colonne toujours à la suite des autres div en float left</div>

dans ton conteneur, tu as une colonne gauche et une colonne contenu:
<div id="side_left"> </div>
<div id="contenu"> </div>

dans ton side_left:
<div id="menu_left">
<ul>
<li>menu 1</li>
<li>menu 2</li>
</ul>
</div>

Au niveau css, ta navigation du haut tu lui mets un un li {display: inline;}
et ta navigation gauche {display:block;}
Titre: Re:Menu horizontal
Posté par: bidouille7 le le 12-10-2012 a 16:50:05
re. Bon j'ai tout changé, mais je n'ai toujours pas mon menu horizontal en haut de la page. Il n'y a que le premier bouton qui apparait. Que dois-je faire pour corriger. Je mets les nouveaux codes:

le html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>index</title>
<link rel="stylesheet" href="/style.css"/>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="accueil.php"> Accueil </a></li>
<li><a href="aide.php"> Aide </a></li>
<li><a href="forum.php"> Forum </a></li
><li><a href="contac.php"> Contactez-nous </a></li>
</ul>
</div>

<div id="container">
<div id="top">
<h1><img src="ban.gif" /></h1>
</div>
<div id="leftnav">
<ul>
<li><a href="#"> Autos </a></li>
<li><a href="#"> Bricolage </a></li>
<li><a href="#"> Bricolage </a></li>
<li><a href="#"> Bricolage </a></li>
<li><a href="#"> Bricolage </a></li>
<li><a href="#"> Bricolage </a></li>
<li><a href="#"> Bricolage </a></li>
<li><a href="#"> Bricolage </a></li>
<li><a href="#"> Bricolage </a></li>
<li><a href="#"> Bricolage </a></li>
</ul>
</div>
<div id="rightnav">
<?php
include('pdf_connexion.php');
?>
</div>
<div id="content">
<h2>Subheading</h2>
23.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
24.<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>

Le css:
#navigation
{
display:inline;
float: left;
margin: 10px auto;
padding: 10px auto;
width:80%;
height:30px;
text-align:center;
border; 3px;
}
#container
{
width: 100%;
margin: 50px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top {
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1 {
margin: 0;
padding: 0;
}

#leftnav {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#rightnav {
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content {
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
}

#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p, #rightnav p {
margin: 0 0 1em 0;
}

#content h2, #footer p {
margin: 0 0 .5em 0;
}
Donnez-moi la solution qui pourra me servir par la suite. Je ne sais pas encore ce que deviendra le site,donc ne pas se fier au bandeau, c'est juste un essai que je peux changer rapidement.

Merci pour votre aide et à plus.
Titre: Re:Menu horizontal
Posté par: WebVitrine le le 12-10-2012 a 17:54:00
J'ai l'impression que tu n'cherches pas à comprendre ce que tu fais.

Ta barre navigation (je parle de la barre et non des menus à l’intérieur), tu lui donne comme propriété de flotter sur la gauche, d'être sur la mémé ligne que ton bloc container, et à la fois d'être centrer au milieu de ta page...

essaye avec ça :

#navigation {margin: 0 auto 0; width :80%;}
tu centres ta barre de navigation.

li {display: block; float: left; position: relative; margin: 0 20px 0 0;}
tu affiches chaque menu sous forme de block aligné sur la gauche.

ou
li {display: inline; position: relative; margin: 0 20px 0 0;}
qui te permet d'afficher tes menus en ligne, sans prendre la propriété block, ni la flottaison gauche.
Titre: Re:Menu horizontal
Posté par: bidouille7 le le 12-10-2012 a 18:04:34
re.Après avoir mis tes lignes de code, j'ai bien le menu en haut de la page,mais toujours vertical. J'ai remarqué que le "display: inline; " n'est pas coloré en bleu comme les autres lignes dans le code css, pourquoi? Apparemment cela viendrait de ça ce qui empêche d'être horizontal, qu'en penses-tu?
Merci et à plus.
Titre: Re:Menu horizontal
Posté par: bidouille7 le le 12-10-2012 a 18:25:32
Autre chose qui s'est produit, le block de connexion se retrouve à gauche ,alors qu'avant je l'avais bine à droite. Que s'est-il passé? Merci et à plus.
Titre: Re:Menu horizontal
Posté par: bidouille7 le le 13-10-2012 a 17:19:34
Bonjour. J'ai trouvé comment faire après bien des recherches et modifs dans le css et html. Tout est bien en place comme je voulais. Merci pour votre aide et à bientôt car j'aurai encore besoin de vous.


Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.