Liste : taille verticale des lignes

Bonjour!

ça me prend la tête les CSS!
mais je garde espoir puisqu'il le faut

sur une liste qui est en fait un menu fait d'images, je voudrais faire disparaitre l'espacement entre les lignes <li>. ça marche super sur firefox mais pas sur IE encore une fois...

j'ai besoin d'un pti coup de main svp, voici le code CSS :

div#menuleft {
  position: absolute;
  background-color: #FFFFFF;	
  top : 0;
  left: 0;
  width: value;
  padding: 20px 0px 15px 0px ;
  margin: 268px 1px 0 9px;
}	
.menu {
  list-style-type: none;
  height: 40px;
  width: 140px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

et le HTML qui l'appelle :

<div id="menuleft">  
   <ul class="menu">
     <li class="menu"><a href="accueil.htm"><img src="images/accueil_w.gif" height="40"></a></li>
     <li class="menu"><a href="demarche.htm"><img src="images/demarche_w.gif" height="40"></a></li>
     <li class="menu"><a href="prestations.htm"><img src="images/prestations_w.gif" height="40"></a></li>
   </ul>
 </div>

je sais qu'il y a à redire mais où?
merci d'avance
Modifié par miltonis (21 Sep 2005 - 10:52)

Attention Miltonis je crois que tu es atteint d'une maladie exotique des CSS : tu utilise systématiquement des class.
au lieu de ca :

<div id="menuleft">
<ul class="menu">
<li class="menu"><a href="accueil.htm"><img src="images/accueil_w.gif" height="40"></a></li>
<li class="menu"><a href="demarche.htm"><img src="images/demarche_w.gif" height="40"></a></li>
<li class="menu"><a href="prestations.htm"><img src="images/prestations_w.gif" height="40"></a></li>
</ul>
</div>

et ca :

.menu {
list-style-type: none;
height: 40px;
width: 140px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

il vaut mieux ca :

<div id="menuleft">
<ul>
<li><a href="accueil.htm"><img src="images/accueil_w.gif" height="40"></a></li>
<li><a href="demarche.htm"><img src="images/demarche_w.gif" height="40"></a></li>
<li><a href="prestations.htm"><img src="images/prestations_w.gif" height="40"></a></li>
</ul>
</div>

et ca :

div#menuleft ul,li
{
...
}

Tu peux même supprimer le div et mettre ca à la place :

<ul id="menuleft"></ul>

pour ton problème, il vient a mon avis du fait que ton <ul> et ton <li> ont la même hauteur alors qu'il y a 3 <li> dans ton <ul>
Modifié par the_penguin (21 Sep 2005 - 13:02)

merci penguin de ta réponse, mais ça ne va pas encore. C'est vrai que le code est plus simple comme ça mais en plus d'être toujours espacé entra chaque ligne, tout le bloc est décalé très loin vers le bas....

que faire?
en attendant j'ai remis le code initial...mais je continue de chercher!

tu peux donner le code quand tu l'as corrigé stp...

voici:

div#menuleft ul li {
	background-color: #FFFFFF;	
	list-style-type: none;
	top : 0;
  left: 0;
	bottom: 0;
  height: 40px;
	width: 140px;
	padding: 0px 0px 0px 0px ;
	margin: 0px 0px 0 0px;
}

et

 <div id="menuleft">     	 
   <ul>
	   <li><img src="images/top_menu.gif" hspace="0" vspace="0" border="0" alt=""></li>
     <li><a href="accueil.htm"><img src="images/btn_accueil_w.gif"></a></li>
     <li><a href="demarche.htm"><img src="images/btn_demarche_w.gif"></a></li>
   </ul>	 
 </div>

la liste est décélée trop à droite et trop en bas de la page (elle n'est pas visible sans la scrollbar....

Modifié par miltonis (21 Sep 2005 - 15:56)

Dans l'exemple que tu donnes, ton div "menuleft" n'est pas positionné. Si c'est normal, alors essaie de supprimer le bottom: 0;

de plus,

padding: 0px 0px 0px 0px ;
margin: 0px 0px 0 0px;

peut être optimisé par

padding: 0;
margin: 0;

PS : div#menuleft ul li désigne UNIQUEMENT les balises <li> comprises à l'intérieur des balises <ul> qui sont elles mêmes comprises à l'intérieur de la balise <div> dont l'id est "menuleft".

Je suis désolé et deviens dingue !!!

j'ai beau essayer mais je n'y arrive pas, j'ai même laissé de coté ce probleme pour m'éclaircir l'esprit mais au retour aucun résultat positif.

Sous Firefox pas de souci, mais avec IE bien entendu, ça ne focntionne pas. Le menu est décalé à droite et passe avant le div du contenu.

Je sais qu'il y a une manière de mettre les div sur une même ligne, vu en faisant un recherche
http://forum.alsacreations.com/topic.php?fid=4&tid=6774&s=div+meme+ligne
mais ça concerne 3 div et pas 2, bref, je rame!

je demande une aide précise quitte à comprendre ensuite en voyant que ça focntionne. Là, je sature mais j'essaie de garder un sourire minimal

ci-joint les images que je veux et celle que me montre IE , on voit que le menu est décalé à droite..


merci d'avance à ceux qui voudront se pencher sur mon probleme...
Modifié par miltonis (24 Sep 2005 - 16:45)

bonjour,
ce sujet n'intéresse personne?
en tout cas j'ai simplifié le code à défaut de trouver la solution.
voici :

.menu {
	position: relative;
	float: left;
	top: -4px;
	left: 0;
	padding: 0;
	margin: 0 0 0 5px;
  list-style-type: none;
	height: 40px;
	width: 140px;
}
.top_menu {
  position: relative;
  padding-left: 5px;
	float: left;
	top: -4px;
	list-style-type: none;
	height: 10px;
}

html:

   <ul class="menu">
	   <li class="top_menu"><img src="images/top_menu.gif" width="140" height="10" hspace="0" vspace="0" border="0" alt=""></li>
     <li class="menu"><a href="accueil.htm" target="_top" onmouseover="i01.src='images/btn_accueil_g.gif'" onmouseout="i01.src='images/btn_accueil_w.gif'"> <img src="images/btn_accueil_w.gif" border=0 name="i01" width="140" height="40" hspace=0 vspace=0 /></a></li>
   </ul>

il y a toujours un espace entre les deux lignes (en fait il y en a plus) et le menu est décalé vers la droite alors que je le voudrais à gauche (voir les images plus haut svp)

je sature!
svp un pti coup de main...