28221 sujets

CSS et mise en forme, CSS3

[resolu] Marge par default sous ie avec l'element ul ?

Pages :
bonjour, je me casse la tete depuis quelques jours a essayer de faire en sorte que l'espacement entre les element <li> contenu dans une liste <ul> soit quasi nul. c'est a dire comme mozilla ..., j'ai un espacement la qui est plutot genant, un espacement que je n'est pas d'ailleur avec mozilla.

j'ai suivi les billet, concernant la compatibiliter entre chaque navigateur, et les regle des positionement, des marges etc sur les differents element les plus courant en xhtml, <ul>,<div>, etc, mais nrien n'a abouti, je vous code mon code xhtml et css ci dessous.

P.S : mes page sont validées selon les normes W3C

code xhtml : 


<!-- debut partie menu gauche -->
	<div id="left">
		<div><img alt="general" src="./images/menu_general.jpg" border="0" /></div>
    <div class="menu" style="border-right:1px solid white;"> 
      <ul>
        <li><a href="index.php?page=news">News</a></li>
        <li><a href="index.php?page=team">Membres team</a></li>
        <li><a href="index.php?page=forum">Forum</a></li>
        <li><a href="index.php?page=contact">Contacts</a></li>
        <li><a href="index.php?page=rel">Releases</a></li>
        <li><a href="index.php?page=bito">Bittorent</a></li>
      </ul>
		</div>
			
		<div><img alt="projets" src="./images/projets.jpg" border="0" /></div>
    <div class="menu" style="border-right:1px solid white;"> 
      <ul>
        <li><a href="index.php?page=procours">En cours</a></li>
        <li><a href="index.php?page=profini">Finis</a></li>
        <li><a href="index.php?page=profutur">Futur</a></li>
        <li><a href="index.php?page=proactu">Actuels</a></li>
      </ul>
			</div>
			
		<div><img alt="misc" src="./images/misc.jpg" border="0" /></div>
		
			
    <div class="menu" style="border-right:1px solid white;"> 
      <ul>
        <li><a href="index.php?page=irc">Irc</a></li>
        <li><a href="index.php?page=irc">Tutoriaux</a></li>
      </ul>
			</div>
			
		<div><img alt="coin_bas_droite" src="./images/tab_menu_bas_droite.jpg" border="0" /></div>
	</div>

<!-- fin menu gauche -->


code css : 


/* CSS Document */
* {margin: 0; padding: 0;}

body{
margin-top:15px;
margin-left:10px;
}
.menu{
position:relative;
}

.menu ul{
text-indent:10px;
list-style-type: none;
}
.menu li a
{
width:100%;
font-weight: bold ;
font-size:7pt;
letter-spacing:1px;
font-family:arial;
color: #fff ;
text-decoration: none;
display:block;
}

.menu li a:hover
{
background-color:#4a5d98;
color:#fff;
}


voila, si vous voyez des chose a améliorer, merci de me faire signe ...

ciao
Modifié par FaBouneY (24 May 2005 - 15:17)
Lorsque tu considèreras ton sujet comme réglé, un petit [Résolu] dans ton titre (en éditant le post qui a servi à créer ton sujet) sera apprécié Smiley smile

Merci ! Smiley lol

--
Stephan
malheureusement ca ne résoud pas mon pb, il ne parle pas de l'espace entre chaque <li>, je me demande si c'est possible ce que je demande

http://www.kooba.biz/etf/

[ URL corrigée par Stephan ]

regarde mon site avec mozilla puis ie, et regarde la differrence ds le menu de gauche, c'est ca que je souhait modifier
Modifié par Stephan (24 May 2005 - 00:48)
je te remercie, en espérant que tu trouve quelque chose d'interressant .... car je lutte depuis quelques jours Smiley smile
deja essayé ca ... le probkeme c'est que IE ne l'interprete pas de la meme maniere que mozilla, c'est a dire que ie le prend pr la hauteur d'une ligne et mozilla le prend pr l'espacement entre 2 ligne.

en gros cette méthode ne va pas Smiley decu

je suis sceptique sur le fait qu'il y ai une méthode, mais je suis persuader que si.
je vais coucher, si tu trouve, une méthode, je te serais vraiment reconnaissant, je trouve rien moi Smiley decu suis désespéré la, suis sur c'est tout bête, a et puis ils sont chiant avec leur navigateur, peuvent pas faire quelque chose de commun nom de dieu ! Smiley decu
j'ai rien dit !!! cela fonctionne !!! alors il fallait retirer le display:block, hum hum et isoler le a de l'element li dans le css, fallait trouver .... suis content j'ai trouver tt seul, merci de ton aide stephan !!!!! bonne nuit
enfin c bizarre qd meme, des que je fait appliquer un style a l'element <a> qui se trouve dans le <li>, ca refait comme avant, donc on dirait que l'element <a> pose probleme dans ce cas de figure, des que je le retire ca passe .... mais bon !!!.
Alors essais d'utiliser font-size: 11px; (ou autre) à la place de font-size: 7pt;


.menu li a{
   width:100%;
   [b][#blue]font-size:11px;[/#][/b]
   letter-spacing:1px;
   font-family:arial;
   color: #fff ;
   text-decoration: none;
}


L'idéal serait d'utiliser le « em » comme unité, mais bon...
Modifié par Stephan (24 May 2005 - 01:20)
Bonjour,
Je pense avoir compris que l'espace gauche des éléments li devait être
de 10px.


/*
.menu ul{
text-indent:10px;
list-style-type: none;
}
*/

.menu li{
display:inline; /* correction bug ie */
}

.menu li a{
padding:0 0 0 10px;
font-size:11px;
letter-spacing:1px;
font-family:arial;
color: #fff ;
text-decoration: none;
display: block;
}


J'ai utilisé la solution de Bieler Baptistehttp://css.maxdesign.com.au/listamatic/vertical12.htm qui consite à utiliser
display: inline sur les li qui supprime les marges et list-style, appliquer un padding:0 0 0 10px
sur les liens
le code menu.ul est à supprimer
t vraiment un chef, je te remercie, ca fait plaisir, surtout quand ca fait un moment qu'on cherche Smiley cligne maintenant je le serais et je met ton lien en favoris lol Smiley cligne

bonne journée a vous
je veux bien igore, mais je n'est pas de boutton editer, a coter de celui citer, donc je ne peux éditer ce post Smiley decu
Pages :
Sujet clos
Aller à