Menu horizontal - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Menu horizontal

« Précédent Suivant »

Pages: 1 [2]

Auteur

Sujet: Menu horizontal (Lu 7806 fois)

Re:Menu horizontal
« Répondre #15 sur: le 12-10-2012 a 10:33:25 »

bidouille7
Habitué

Hors-Ligne

Messages: 446

Je suis un petit retraité

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.

Rapporter au modérateur

http://www.alenchere.com

Re:Menu horizontal
« Répondre #16 sur: le 12-10-2012 a 10:52:20 »

WebVitrine
Superactif

Hors-Ligne

Sexe: Male

Messages: 639

Critique Mastery Max level !

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.

« Dernière Édition: le 12-10-2012 a 10:53:06 par WebVitrine »

Rapporter au modérateur

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016

Re:Menu horizontal
« Répondre #17 sur: le 12-10-2012 a 11:10:52 »

bidouille7
Habitué

Hors-Ligne

Messages: 446

Je suis un petit retraité

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.

Rapporter au modérateur

http://www.alenchere.com

Re:Menu horizontal
« Répondre #18 sur: le 12-10-2012 a 11:29:19 »

WebVitrine
Superactif

Hors-Ligne

Sexe: Male

Messages: 639

Critique Mastery Max level !

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.

Rapporter au modérateur

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016

Re:Menu horizontal
« Répondre #19 sur: le 12-10-2012 a 12:02:11 »

WebVitrine
Superactif

Hors-Ligne

Sexe: Male

Messages: 639

Critique Mastery Max level !

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

Rapporter au modérateur

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016

Re:Menu horizontal
« Répondre #20 sur: le 12-10-2012 a 16:50:05 »

bidouille7
Habitué

Hors-Ligne

Messages: 446

Je suis un petit retraité

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.

Rapporter au modérateur

http://www.alenchere.com

Re:Menu horizontal
« Répondre #21 sur: le 12-10-2012 a 17:54:00 »

WebVitrine
Superactif

Hors-Ligne

Sexe: Male

Messages: 639

Critique Mastery Max level !

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.

Rapporter au modérateur

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016

Re:Menu horizontal
« Répondre #22 sur: le 12-10-2012 a 18:04:34 »

bidouille7
Habitué

Hors-Ligne

Messages: 446

Je suis un petit retraité

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.

Rapporter au modérateur

http://www.alenchere.com

Re:Menu horizontal
« Répondre #23 sur: le 12-10-2012 a 18:25:32 »

bidouille7
Habitué

Hors-Ligne

Messages: 446

Je suis un petit retraité

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.

Rapporter au modérateur

http://www.alenchere.com

Re:Menu horizontal
« Répondre #24 sur: le 13-10-2012 a 17:19:34 »

bidouille7
Habitué

Hors-Ligne

Messages: 446

Je suis un petit retraité

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.

Rapporter au modérateur

http://www.alenchere.com