Bonjour, j'ai quelques soucis avec la création de menu. Avant j'utilisais la balise <table>,maintenant j'aimerais faire mieux et j'utilise les balises <ul><li>,mais j'ai un pb et 1 question a ce sujet.
1) le probleme.
sous firefox5.0 et internet explorer6.0 je n'obtiens pas la meme chose,la couleur de fond de mon menu n'a pas la meme taille sous les 2 navigateurs...Aprés multitudes de modifs je n'arrive pas a trouver ou ca coince...est ce que quelqu'un saurait m'aider?
voici ce que ca donne:
http://cyrille.flour.free.fr/firefox5.0.JPG
http://cyrille.flour.free.fr/internetexplorer6.0.JPG
et l'adresse du site:
http://cyrille.flour.free.fr/Essai_menu/essaimenu.htm
En fait les cadres contenant les 2 menus reste a la bonne taille, c'est plutot le bloc contenant les 2 menus qui me posent probleme.
et mon code HTML:
et mon code CSS:
2)une question, a terme je voudrait incorporer des images entre 2 ou 3 lignes de menu,or quand je fais:
le validateur du W3C me retourne une erreur pour les images, normal,les <ul> ne peuvent pas contenir d'elements en ligne,mais comment puis je faire?j'ai commencé a faire des tests en ettant mon image en background d'un <li>, mais pour l'instant c pas encore trés concluant,qu'est ce qui serait le mieux comme méthode?celle que je viens de citer est t'elle une bonne méthode a condition que je m'améliore dans le posostionnement...
Merci pour vos reponses....
Modifié par averell22 (03 Feb 2006 - 12:33)
1) le probleme.
sous firefox5.0 et internet explorer6.0 je n'obtiens pas la meme chose,la couleur de fond de mon menu n'a pas la meme taille sous les 2 navigateurs...Aprés multitudes de modifs je n'arrive pas a trouver ou ca coince...est ce que quelqu'un saurait m'aider?
voici ce que ca donne:
http://cyrille.flour.free.fr/firefox5.0.JPG
http://cyrille.flour.free.fr/internetexplorer6.0.JPG
et l'adresse du site:
http://cyrille.flour.free.fr/Essai_menu/essaimenu.htm
En fait les cadres contenant les 2 menus reste a la bonne taille, c'est plutot le bloc contenant les 2 menus qui me posent probleme.
et mon code HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Bienvenue sur crepes-dentelles.com</title>
<link rel="stylesheet" media="screen" type="text/css" title="" href="stylemenu.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="menu">
<ul>
<li><a href="liens/menu1_1.html">La crêpe dentelle</a></li>
<li><a href="liens/menu1_2.html">Le secret de son origine</a></li>
<li><a href="liens/menu1_3.html">Technique de fabrication</a></li>
<li><a href="liens/menu2_1.html">Naissance</a></li>
<li><a href="liens/menu2_2.html">Evolution</a></li>
<li><a href="liens/menu3_1.html">Les médias en parlent!</a></li>
<li><a href="liens/menu3_2.html">Les distinctions</a></li>
<li><a href="liens/menu3_3.html">Livre d´or des célébrités</a></li>
<li><a href="liens/menu3_4.html">Livre d´or du site</a></li>
</ul>
<br>
<ul>
<li><a href="liens/menu4_1.html">Goutêr la crêpe dentelle</a></li>
<li><a href="liens/menu5_1.html">Recettes de crêpes</a></li>
<li><a href="liens/menu5_2.html">Recettes de galettes</a></li>
<li><a href="liens/menu6_1.html">Tout sur nous</a></li>
<li><a href="liens/menu6_2.html">Contribuez à notre essor </a></li>
</ul>
</div>
</body>
</html>
et mon code CSS:
/* CSS Document 1024 768*/
body{
margin:0;
padding:0;
background-image: url(Photos/background_crepe-dentelle.jpg);
color:black;
font-family:Arial, "Bitstream Vera Sans", Verdana, Helvetica, Serif;
}
/*MISE EN PLACE DU MENU*/
#menu{
display:block;
float:left;
height:auto;
width:200px;
padding: 1em 0em 1em 2em;
margin:0 0 0 0;
background: #336600 url(Photos/contenuboite3.jpg) bottom left repeat;
}
#menu ul{
list-style-type:none;
width:170px;
padding:0;
margin:1em 0em 0em 1em;
background: #336600 url(Photos/contenuboite.jpg) bottom left repeat;
}
#menu li a{
display:block;
text-decoration:none;
color:black;
font-size:0.8em;
font-weight:normal;
height:1.6em;
line-height:1.6em;
text-indent:0.2em;
}
#menu li a:hover{
color:navy;
background-image:url(Photos/rolloverfond.jpg);
font-size:0.8em;
font-weight:bold;
text-indent:0.7em}2)une question, a terme je voudrait incorporer des images entre 2 ou 3 lignes de menu,or quand je fais:
<ul>
<img src="Photos/Une_recette_secrete.gif" alt="coucou">
<li><a href="liens/menu1_1.html" class="class1">La crêpe dentelle<span>Introduction
à la crêpe dentelle</span></a></li>
<li><a href="liens/menu1_2.html" class="class1">Le secret de son origine<span>Depuis
1886, le secret reste bien gardé</span></a></li>
<li><a href="liens/menu1_3.html"class="class1">Technique de fabrication<span>Découvrez
ici les différentes étapes</span></a></li>le validateur du W3C me retourne une erreur pour les images, normal,les <ul> ne peuvent pas contenir d'elements en ligne,mais comment puis je faire?j'ai commencé a faire des tests en ettant mon image en background d'un <li>, mais pour l'instant c pas encore trés concluant,qu'est ce qui serait le mieux comme méthode?celle que je viens de citer est t'elle une bonne méthode a condition que je m'améliore dans le posostionnement...
Merci pour vos reponses....
Modifié par averell22 (03 Feb 2006 - 12:33)