28220 sujets

CSS et mise en forme, CSS3

Espacement gênant avec balise "li" help!

Hello,

Voici mon p'tit soucis, comme vouss pouvez le voir sur le site que je réalise http://www.michielsensprl.be/index2.html ou http://www.michielsensprl.be/index3.html j'ai un espacement automatique (en noir sur ma page) qui se met entre les liens de ma balise li, et comme mon but est de pouvoir bien centrer les liens sur leur fond (voir index3.html) et que l'aspect rollover soit impeccable, faites un test, vous verrez ce que je veux dire...

Suis perdu, voici mon code css.


a, .liendroit{
	text-decoration: none;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	display: inline;
	letter-spacing: 1px;
	padding: 2px 4px 1px 10px;
	background-color:#00FF33;
	
}

.liendroit {

	padding: 2px 6px 1px 10px;
	}

a:hover
 {
	background-image: url(images/hover.bmp);
	background-repeat: repeat; 
 }
 

ul,li {
	margin: 0px;
	padding: 0px;
}

li {
	display: inline;

	background-color:#000000;
}

ul
{
	list-style-type: none;
	background-color:#dedede;
}

#liens 
{
	position: absolute;
	top: 295px;
	left: 0px;
}

Et sur FF, c'est carrement l'emplacement des liens qui est mauvais...

Merci beaucoup d'avance!! Smiley cligne Smiley smile
Modifié par matt.t (13 Mar 2005 - 19:43)
Pourrait-tu stp balisés ton code grace au bouton de mise en forme "code" et aussi tes url avec le bouton "url".

Aide/Règles a écrit :

Merci de bien vouloir prendre le temps de présenter correctement vos messages, surtout si ces messages doivent inciter les autres membres à vous dépanner sur un problème. Des boutons de mise en forme sont prévus pour cela (gras, italique, etc.). Merci de systématiquement baliser vos codes HTML ou CSS avec le bouton CODE approprié (éviter également, pour des questions de lisibilité, de présenter des codes HTML et PHP imbriqués). Enfin, n'hésitez pas à toujours fournir une image explicative et une url où les membres auront un aperçu de votre problème.


Merci
Modifié par Osiris1426 (13 Mar 2005 - 19:26)
Bonsoir,

Si je suppose bien car ton explication n'est pas clair, le problème vient du noir entre les cases vertes qui n'est pas présent sous FF.

Dans ce cas, corrige ta CSS :


ul
{
	list-style-type: none;
	background-color:#000;
}
euh désolé si c'est pas clair, je vais faire bcp plus simple, ce que je désire faire, c'est éviter d'avoir un espace entre mes liens (voir l'index 2 ou cela apparait en noir) c'est apparement qqchose qui se met automatiquement malgré que j'ai toutes mes marges et padding à zero.

est-ce que je n'ai pas oublié de mettre autre chose à zero et est ce que ma structure ul / li et liens est bien faite??

merci, Smiley cligne
as tu essayé de mettre 

li {display: inline;background-color:#000000; margin: 0px; padding: 0px;}
ul {list-style-type: none; background-color:#dedede; margin: 0px;padding: 0px;}


et d'enlever la ligne

ul,li {
margin: 0px;
padding: 0px;
}


je pense qu'il doit y avoir un conflit entre toutes les balises <ul> et <li>
aucun changement, j'ai fait ce que tu m'as dit...
quelqu'un d'autre à une idée pourquoi je me chope un espace entre 2 balises li (voir mon lien, c'est bcp plus parlant)

merci Smiley biggrin
Salut,

J'ai eu le meme soucis que toi.
C'est bizarre cet espace n'apparait que sur Mozilla/Firefox. Meme si les marges de mes ul et li sont à 0.

Bref moi j'ai réglé ça en avec un float left


li {display: inline; float: left; margin: 0px; padding: 0px;}
ul {list-style-type: none; margin: 0px;padding: 0px;}
KitO a écrit :
C'est bizarre cet espace n'apparait que sur Mozilla/Firefox. Meme si les marges de mes ul et li sont à 0.


Certainement la hauteur de ligne qui rentre en compte.
Corrigeable en spécifiant une hauteur pour "line-height" ou encore en passant tes éléments de liste en "display:block;".

C'est juste une idée comme ça, je n'ai pas testé.
Sujet clos
Aller à