18041 sujets

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

Eviter des separations entre liens

Bonjour à tous,

Je débute en CSS, et me voici face à un problème que vous trouverez peut être dérisoire Smiley cligne
Mon but est de faire un menu horizontal simple. Voici le code :


<html>
<head>

<style type="text/css">

/* RESET Styles */
html, body 
{
padding: 0;
margin: 0;
}

html {font-size: 1em;}
body {font-size: 100%;}
a img {border: 0;}



#nav
{
	text-align:center;	
}

ul
{	
	margin:0;
	border:0;
	padding:0;	
	
	list-style-type:none;
}


li
{
	display:inline;	
}

a:link,a:visited
{
	width:120px;
	padding:4px;
	font-weight:bold;
	
	color:#FFFFFF;
	background-color:#98bf21;
	
	text-align:center;
	
	text-decoration:none;
	text-transform:uppercase;
	}

a:hover,a:active
{
	background-color:#7A991A;
}

</style>

</head>



<body>
	<div id="nav">
		<ul>
			<li><a href="#menu1">menu1</a></li>
			<li><a href="#menu2">menu2</a></li>
			<li><a href="#menu3">menu3</a></li>
			<li><a href="#menu4">menu4</a></li>
		</ul>
	</div>
</body>
</html>


Tout a l'air ok, sauf qu'il y a une séparation entre chaque élément, et je voudrais une barre continue..

J'ai tenté de changer les valeurs 'margin','border' mais à priori ça ne change rien.. Je n'arrive pas à trouver quel élément génère la marge droite et gauche..


Merci pour votre aide,

Alain
Bonjour,

tu as essayé de rentrer une valeur négative dans "margin"?

Exemple, tu mets:

li{
margin: -10px; (margin-left si c'est un menu horizontale, margin-top pour un menu verticale)
}

Je suis pas un pro mais ça devrait marcher.
Modifié par aelor (10 Mar 2011 - 15:59)
Administrateur
Bonjour et bienvenue,

4px au hasard ? Smiley rolleyes
C'est l'espacement ("whitespace" = espaces, tabulations et retours à la ligne) qui est entre </li> et <li> qui provoque ça je suppose.

Soit tu colles tout sur une ligne sans aucun blanc soit tu intercales des commentaires HTML bien jointifs :

<ul>
    <li>truc A</li><!-- no whitespace
    --><li>truc B</li><!-- no whitespace
    --><li>truc C</li><!-- no whitespace
    --><li>truc D</li>
</ul>
Merci à vous deux! Smiley jap

La solution d'aelor marche, mais je me demande si mettre une valeur 'en dur' ne risquerait pas de ne plus fonctionner suivant les polices, browser, etc..

La solution de Felipe marche aussi, et me parait plus 'standard'. Jamais je n'aurais pensé à une histoire d'espace... Je croyais qu'il n'était pas pris en compte en html Smiley tired

Merci encore Smiley smile

Alain
Modifié par alain91 (10 Mar 2011 - 16:15)
bonjour,

il y a aussi la possibilité de jouer sur les valeurs word-spacing/letter-spacing sur ul en les retablissant sur les liens ...
... ou de passer la couleur de fond sur ul, ...
jouer sur le contexte de formatage de ul en modifiant les valeurs de display, ...

en fait sans évoquer les marges négatives, plusieurs choix s'offrent, en particulier en jouant sur les contextes de formatages et même en laissant les liens ou item de listes flottés Smiley smile :
page test : http://gcyrillus.free.fr/essai/menu-centrer-differentes-technique.html
la page use de display: inline, inline-block, table et inline-table avec un correctif pour IE7 au moins. Il y encore d'autre possibilités.

cordialement
p.s. d'autres solutions existent et toutes sont bonnes si elles donne le resultat voulu sans nuire a la navigation.
Si l'on veut donner une largeur au lien, il faudra les passé en inline-block ou les faire flotté par exemple, ce qui réduit alors les possibilités de style sur li et ou ul.

Cordialement,
GC
Waouh ! Impressionnant! Smiley eek

Avec des exemples de toutes sortes dans une page html dédiée..

Merci beaucoup Smiley smile
Sujet clos
Aller à