[Résolu] Liste horizontale avec <ul> et <li> : ajouter les

Niveau : Je débute en HTML , CSS.
J'aimerais faire un jeu de lettres. Et je dois afficher des lettres.

J'ai fait un premier code comme ceci.
http://jsfiddle.net/montardon/R5wzs/

Mon problème est que les lettres sont collées en haut et éloignées de la gauche.

Il y a-t-il une solution simple pour positionner correctement les lettres avec un espace en haut
et un espace moins grand à droite ?

J'ai essayé de modifier les padding et margin de mon élément <ul> mais je n'obtiens rien de correct.
J'aimerais un espace de 5px entre le haut des lettres et le haut de la zone grise.
De même, je souhaiterais que la première lettre démarre plus à gauche.

Si quelqu'un peut me dépanner, merci d'avance.

Bonsoir @montardon

les padding et les margin ne servent pas à faire des positionnements de blocs . Je te recommande vivement la lecture de cet article qui frise l'excellence http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html
et grâce auquel j'ai enfin compris le centrage vertical ainsi que celui-ci : http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
qui te fera aimer le CSS et toutes ses finesses

bon courage !

Bonjour,

Une proposition :

	#lettres
	{
		margin:0;
		padding:5px 0;
	}
	#lettres li
	{
		list-style-type:none;
		margin:0;
		padding:0;
		display:inline-block;
		text-align:center;
		width:30px;
		height:30px;
		line-height:30px;
		border:1px solid rgba(0,0,0,0.7);
		border-radius:4px;
		font-size:20px;
		font-family:'Permanent Marker',Arial,Serif;
		background-color: #FAF8EF;
	}

Pour que les <li> soient collés les uns aux autres, quand on utilise le display:inline-block, il faut en plus que dans le code html, il n'y ait pas d'espace ou retour à la ligne entre les <li> (ou bien il faut commenter ces espace et retour à la ligne).

EDIT : comme on est en 2014 et que de toute façon, on n'utilise pas d'unités relatives , si on ne veut pas toucher au code html, on peut aussi mettre une taille de police de 0 au conteneur des lettres (par exemple #lettres {font-size:0;}).

Si on utilise la technique des espace et retour à la ligne commentés dans le code html, ça donne :

<ul id="lettres">
	<li>A</li><!--
	--><li>B</li><!--
	--><li>C</li><!--
	--><li>D</li><!--
	--><li>E</li><!--
	--><li>F</li><!--
	--><li>F</li><!--
	--><li>G</li><!--
	--><li>H</li><!--
	--><li>I</li><!--
	--><li>J</li><!--
	--><li>L</li><!--
	--><li>M</li><!--
	--><li>N</li><!--
	--><li>O</li><!--
	--><li>P</li><!--
	--><li>Q</li><!--
	--><li>R</li> 
</ul>

Pour la distance entre la première lettre et le bord gauche du conteneur grisé, cela dépend du text-align. Si le text-align du conteneur est "center", l'ensemble des lettres sera centré horizontalement dans son conteneur. Si on veut coller la première lettre à une distance de 5px du bord gauche du conteneur, on peut ajouter :

#lettres {text-align:left;margin-left:5px;}

Amicalement,
Modifié par parsimonhi (17 Jun 2014 - 11:02)

Merci beaucoup pour votre aide !

J'ai lu les liens proposés qui m'ont appris des choses que je ne connaissais pas.

La solution proposée est tout à fait adaptée à mon problème actuel.