18073 sujets

Questions générales et questions de débutants

[Résolu] Problèmes de positionnement menu + fil d'ariane

Bonjour,

Après avoir cherché, en vain, je m'adresse à vous Smiley blushie

J'ai 2 petit pbl:

- le 1er: mon menu "langue" s'affiche correctement sur ff, mais sur ie, les 3 liens s'affichent l'un en dessous de l'autre....

- le 2è: j'ai un écart indésirable entre le menu général et le fil d'ariane juste en dessous (sur ie uniquement)

Voici 2 petites captures sur ie et ff:
upload/3889-ie.gif
upload/3889-sousie.gif

Mon xhtml

<body id="princessedunjour">
<div id="page">
     <div id="header">
             <div id="logo"> <a href="#" id="Logo"> <img src="Logo.gif" alt="Princesse d'un Jour" width="287" height="71" title="Logo Princesse d'un Jour"/></a>
						 </div>
						 <h1><img src="titre.gif" alt="Bijoux et accessoires pour le mariage" title="Bijoux et accessoires pour le mariage"/></h1>
						 <ul id="menu_langue">
						 <li><a id="langue" title="Langue">Langue</a></li>
						 <li><a id="english" title="English" href="#">EN</a></li>
						 <li><a id="français" title="Français" href="#">FR</a></li>
						 </ul>
    </div>
		<ul id="menu_haut">
    <li><a id="menu1" title="Accueil" href="#">ACCUEIL</a></li>
		<li><a id="menu2" title="Collections" href="#">COLLECTIONS</a></li>
		<li><a id="menu3" title="Points de vente" href="#">POINTS DE VENTE</a></li>
		<li><a id="menu4" title="Atelier de création" href="#">ATELIER DE CREATION</a></li>
		<li><a id="menu5" title="A propos" href="#">A PROPOS</a></li>
		<li><a id="menu6" title="Contact" href="#">CONTACT</a></li>
    </ul>
	 <p id="ariane">Vous êtes ici: <a href="http://www.eternel.fr">Accueil</a></p>
	 <div id="contenu">
	 <img src="fleurdecristal.jpg" alt="Collection de bijoux pour le mariage" width="250" height="375" title="Collection de bijoux pour le mariage"/></a>
	 </div>
	 <div id="footer">
	 <p id="mentions">Copyright © 2006 Princesse d'un Jour. Tous droits réservés. Princesse d'un Jour® est une marque déposée.</p>
</div> 
</div>                  
</body>


et ma CSS

* {
 padding: 0;
 margin: 0;
 }
body {
text-align: center;
background: url(background.png) repeat-y center top;
}
img {
border-width: 0;
border-style: none;
}
#page {
margin-left: auto;
margin-right: auto;
margin-top: 2px;
width: 770px;
text-align: left;
background-color: #FFFFFF;
}
#logo {
float: left;
}
h1 {
float: left;
}
#menu_langue {
float: left;
font-family: Arial, Times, serif;
font-size: 60%;
list-style-type: none;
width: 150px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#menu_langue a {
float: left;
color: #A6A5A5;
text-decoration: none;
text-align: center;
line-height: 8px;
}
#english {
width: 20px;
border-right: 1px solid #A6A5A5;
}
#français{
width: 20px;
}
ul#menu_haut {
clear: both;
margin: 10px 0 0 0;
letter-spacing: 3px;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 60%;
text-align: center;
}
#menu_haut li {
float: left;
}
#menu_haut a {
display: block;
color: #A6A5A5;
text-decoration: none;
text-align: center;
line-height: 20px;
}
#menu1 {
width: 100px;
background: url(menu1-off.png) no-repeat;
}
a#menu1 {
color: #6C3089;
}
a#menu1:hover {
background-color: #E8E8E8;
}
#menu2 {
width: 130px;
background: url(menu2-off.png) no-repeat;
}
a#menu2:hover {
background: url(menu2-on.png) no-repeat;
}
#menu3 {
width: 160px;
background: url(menu3-off.png) no-repeat;
}
a#menu3:hover {
background: url(menu3-on.png) no-repeat;
}
#menu4 {
width: 190px;
background: url(menu4-off.png) no-repeat;
}
a#menu4:hover {
background: url(menu4-on.png) no-repeat;
}
#menu5 {
width: 90px;
background: url(menu5-off.png) no-repeat;
}
a#menu5:hover {
background: url(menu5-on.png) no-repeat;
}
#menu6 {
width: 90px;
background: url(menu-off.png) no-repeat;
}
a#menu6:hover {
background: url(menu6-on.png) no-repeat;

}
#menu_haut a:hover {
color: #6C3089;
}
p#ariane{
clear: both;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: Trebuchet MS, Times, serif;
font-size: 70%;
color: #666666;
}
#ariane a {
color:#666666;
text-decoration: none;
}
#contenu {
float: left;
}
#footer {
clear: both;
text-align: center;
height: 43px;
}
p#mentions{
font-family: Trebuchet MS, Times, serif;
font-size: 65%;
padding: 40px 0 0 0;
color: #666666;
}


Si vous avez une idée pour régler les 2 problèmes ...

Merci. Smiley cligne
Modifié par pp51 (07 Apr 2006 - 19:02)
Bonjour pp51,

Voici ce que tu peux faire pour aligner ton menu, bien que je n'aurais pas mis "langue" dans des balises <a>

css

ul, li {
list-style-type: none;
}
#menu_langue {
width: 100%;
margin: 0;
padding: 0;
}
#menu_langue li {
float: left;
}
#menu_langue li a{
display: block;
font-family: Arial, Times, serif;
font-size: 60%;
color: #A6A5A5;
text-decoration: none;
text-align: center;
line-height: 8px;
}
#menu_langue li a#langue {
width: 40px;
}
#menu_langue li a#en {
width: 20px;
border-right: 1px solid #A6A5A5;
}
#menu_langue li a#fr {
width: 20px;
}


html

<div id="menu_langue">
	<ul>
		<li><a id="langue" title="Langue">Langue</a></li>
		<li><a id="en" title="English" href="#">EN</a></li>
		<li><a id="fr" title="Français" href="#">FR</a></li>
	</ul>
</div>


Sinon, en ce qui concerne l'écard indésirable entre le menu général et le fil d'ariane, je vais voir Smiley smile
Merci beaucoup blue Smiley cligne

Le problème 1 du menu est réglé, par contre tu dis "je n'aurais pas mis "langue" dans des balises <a>".
Je me suis posé la question aussi.... j'aurais bien voulu l'enlever du menu puisqu'il n'est pas clicable... comment aurais-tu fait ?

Pour le problème 2, c'est réglé, mais je me suis rendu compte maintenant que j'ai un autre espace indésirable entre le logo et le menu horizontal principal....

Merci encore, et si tu as d'autres bonnes idées

Smiley cligne
Pour ton menu, j'ai 2 solutions, mais je ne sais pas qu'elle est la plus conforme

1ère solution :

css

ul, li {
list-style-type: none;
}
#menu_langue {
width: 100%;
margin: 0;
padding: 0;
}
#menu_langue li {
float: left;
}
#menu_langue li span {
width: 40px;
display: block;
font-family: Arial, Times, serif;
font-size: 60%;
color: #A6A5A5;
line-height: 8px;
}
#menu_langue li a{
display: block;
font-family: Arial, Times, serif;
font-size: 60%;
color: #A6A5A5;
text-decoration: none;
text-align: center;
line-height: 8px;
width: 20px;
}
#menu_langue li a#borderRight {
border-right: 1px solid #A6A5A5;
}

html

<div id="menu_langue">
        <ul>
	        <li><span>Langue</span></li>
	        <li><a id="borderRight" title="English" href="#">EN</a></li>
		<li><a title="Français" href="#">FR</a></li>
	</ul>
</div>


2ème solution :

css

#langue {
font-family: Arial, Times, serif;
font-size: 60%;
color: #A6A5A5;
line-height: 8px;
float: left;
}
ul, li {
list-style-type: none;
}
#menu_langue {
margin: 0;
padding: 0;
float: left;
}
#menu_langue li {
float: left;
}
#menu_langue li a{
display: block;
font-family: Arial, Times, serif;
font-size: 60%;
color: #A6A5A5;
text-decoration: none;
text-align: center;
line-height: 8px;
width: 20px;
}
#menu_langue li a#borderRight {
border-right: 1px solid #A6A5A5;
}


html

<div id="langue">Langue</div>
<div id="menu_langue">
	<ul>
                <li><a id="borderRight" title="English" href="#">EN</a></li>
		<li><a title="Français" href="#">FR</a></li>
	</ul>
</div>


Pour ton autre souci, peux-tu me donner l'adresse de ton travail stp, car ça n'est pas évident de voir sans les images
Modifié par blue (07 Apr 2006 - 12:07)
Re hello Blue Smiley nuts

Merci, encore une fois...

Pour mon problème d'ecart entre le logo et le menu, j'avais en fait l'image du h1 qui avait une hauteur > hauteur du logo.

Allez, je mets un petit résolu.

Merci encore Smiley cligne
Sujet clos
Aller à