28220 sujets

CSS et mise en forme, CSS3

[résolu] Probleme positionnement <ul> mozilla/explorer

Bonjour, j'ai un petit probleme pour positionner un <ul> précisément dans un div. le résultat est different selon le navigateur.

voici mon code html:

<body>

<div id="fond">
<ul class="menu_haut">
<li class="menu_haut"><img src="imginterface/menu1.jpg"></li>
<li class="menu_haut"><img src="imginterface/menu2.jpg"></li>
<li class="menu_haut"><img src="imginterface/menu3.jpg"></li>
<li class="menu_haut"><img src="imginterface/menu4.jpg"></li>
</ul>
</div>

</body>


voici mon code css:

#fond {
position:absolute;
background-color:#ffffff;
background-image:url(imginterface/fond.gif);
height:560px;
width:820px;
top:50%;
left:50%;
margin-top:-280px;
margin-left:-410px;
}

ul.menu_haut {
position:absolute;
color:#FFFFFF;
top:40px;
left:40px;
height:40px;
}


li.menu_haut {
display:inline;
color:#FFFFFF;
margin-left:-5;
}


et voici la page d'exemple. comme vous pouvez le constater, il y a une difference enorme entre mozilla et IE. (IE est dans le vrai pour une fois) alors que faire ? merci pour votre aide !!

ps: si quelqun pouvait aussi me dire comment supprimer les espaces blancs entre les élements de la liste ce serait cool !!
Modifié par yosh (29 Jun 2005 - 15:56)
Bonjour, pour les espaces blancs, tu peux déjà faire ceci :

<ul class="menu_haut">
<li class="menu_haut"><img src="imginterface/menu1.jpg"></li><li class="menu_haut"><img src="imginterface/menu2.jpg"></li><li class="menu_haut"><img src="imginterface/menu3.jpg"></li><li class="menu_haut"><img src="imginterface/menu4.jpg"></li>
</ul>


As-tu essayé le remplacement de texte par tes images, plutôt que de les placer directement dans ta liste?

Si un jour tu souhaites changer le style de ton site, et donc le menu, ça pourrait t'être utile. Smiley cligne

Sinon quand je fais 

* {
margin: 0;
padding: 0;
}


Je n'ai plus le problème, ça doit donc venir d'une marge (regarde du côté de ul).

Edit : 

ul.menu_haut {
[b]margin: 0;[/b]
position:absolute;
color:#FFFFFF;
top:40px;
left:40px;
height:40px;
}


Voilà! Smiley biggrin

Au passage, tu peux remplacer 
margin: 0 0 0 0;
/* et */
color: #FFFFFF;

par : 
margin: 0;
/* et */
color: #FFF;


Smiley cligne
Modifié par pierre6020 (29 Jun 2005 - 14:37)
merci beaucoup pour cette réponse rapide... la marge et le padding de <ul> étant non spécifiés, il partaient en sucette sur mozilla (je pense...)

par contre je n'ai pas compris ta solution pour les espace blanc, ni ta suggestion de "remplacer le texte par des images" peut tu êtres plus clair s'il te plait ?
Pour les marges et les padding, chaque navigateur applique en général les siennes, ce qui n'est pas très gênant par exemple pour les paragraphes, mais peut l'être plus pour les balises <ul></ul> par exemple.
Mieux vaut donc les définir à 0 dès le début.

Pour l'histoire de l'espace, je te conseilles simplement de coller tes balises, car un retour à la ligne est considéré comme un espace, et est donc interprété comme tel.
Je pense que c'est dû au fait qu'une balise <img /> est "inline", essaie donc display: block sur tes images pour voir si ça résoud le problème.

yosh a écrit :
par contre je n'ai pas compris [...] ta suggestion de "remplacer le texte par des images" peut tu êtres plus clair s'il te plait ?

Un des gros intérêts de l'usage des feuilles de style est de séparer complètement le contenu de la forme.
Si ces images font partie de ton design, elles doivent donc être placées dans ta feuille de style, par contre, si elles contiennent une information, elle doit etre placée dans le code HTML.

Tu peux dans ce cas remplacer tes balises <img /> par du texte, puis le rendre invisible, pour n'afficher que les images du fond (tes carres de couleur donc), ceci par diverses techniques.

Je ne sais pas si j'ai été très clair, enfin on fait ce qu'on peut Smiley murf
lol t'inquiètes c'est moi qui ait un peu de mal... merci pour ces eclaircissements.

pour le coup des images de fond, c'est bien ce que j'avais cru comprendre, mais comme la classe <li> est une classe justement, l'image de fond va se répeter à l'identique pour chaque <li> inscrit.

sinon instructif le coup du saut de ligne !! thanks !
Allez : 

<ul class="menu_haut">
<li class="menu_haut"><img src="imginterface/menu1.jpg"></li>
<li class="menu_haut"><img src="imginterface/menu2.jpg"></li>
<li class="menu_haut"><img src="imginterface/menu3.jpg"></li>
<li class="menu_haut"><img src="imginterface/menu4.jpg"></li>
</ul>


Ici, on peut voir que tu répète la classe menu_haut pour chaque <li></li> à l'intérieur de <ul></ul>, qui a déjà cette même classe.

Tu peux donc très bien atteindre tes balises <li></li> en utilisant le ciblage CSS, de cette facon : 

<ul class="menu_haut">
<li><img src="imginterface/menu1.jpg"></li>
<li><img src="imginterface/menu2.jpg"></li>
<li><img src="imginterface/menu3.jpg"></li>
<li><img src="imginterface/menu4.jpg"></li>
</ul>



ul.menu_haut li { /* sous-entendu : tous les <li> qui sont dans les <ul class="menu_haut">*/
   display:inline;
   color:#FFF;
   margin-left:-5;
}


Maintenant, rien ne t'empêche de donner une classe pour chaque élément de ton menu :

<ul class="menu_haut">
<li class="element_menu_1"><a href="#">element_menu_1</a></li>
<li class="element_menu_2"><a href="#">element_menu_2</a></li>
<li class="element_menu_3"><a href="#">element_menu_3</a></li>
<li class="element_menu_4"><a href="#">element_menu_4</a></li>
</ul>

(Tu remarqueras que j'ai mis du texte dans des liens à la place)

puis :

ul.menu_haut li a { /* on transforme les liens en blocs, pour en faire ce que l'on veut, et on lui donne les dimensions de l'image de fond*/
   display: block;
   width: [largeur de l'image de fond];
   height: [hauteur de l'image de fond];
}

li.element_menu_1 a { /* on transforme les liens en blocs, pour en faire ce que l'on veut*/
   background-image: url(imginterface/menu1.jpg);
}
li.element_menu_2 a {
   background-image: url(imginterface/menu2.jpg);
}
li.element_menu_3 a {
   background-image: url(imginterface/menu3.jpg);
}
li.element_menu_4 a {
   background-image: url(imginterface/menu4.jpg);
}

Reste à faire disparaitre le texte, je te laisse faire Smiley cligne
Modifié par pierre6020 (29 Jun 2005 - 15:31)
ok !! encore merci pour tout ! (la derniere solution multiplie quand même les classes à mort !! Smiley cligne )
Sujet clos
Aller à