28172 sujets

CSS et mise en forme, CSS3

Positionnement éléments de liste

Bonjour à tous,

avant de vous exposer mon problème, et nouveau sur le forum, je vais me présenter brièvement, car je trouve ça important! Smiley smile

Je me prénomme Fabien, j'ai bientôt 35 ans, papa d'un petit garçon de 15 mois. Je travaille dans l'informatique depuis 12 ans, plus précisément dans le développement de la GPAO pour la PME dans lequel je suis salarié.
Ces derniers temps, l'envie de me mettre aux langages du web m'a chatouillée, c'est pourquoi j'ai lu un paquet de tutos sur les langages HTML-CSS mais aussi PHP.

Après avoir fait quelques petites maquettes de sites (pas très jolies! Smiley lol ), j'ai décidé de me lancer dans la création (la vraie) de mon premier site web.
Mais voilà, un premier problème se pose à moi, à savoir que je n'arrive pas à placer les éléments d'une liste là où je le souhaite. J'ai beau lire et relire différents articles, il doit y avoir quelque chose qui m'échappe Smiley decu

Voici le code que j'utilise:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test poules</title>
	<link rel="stylesheet" href="poules2.css"/>
  </head>
   
  <body>
		<div id="groupe-list">
		<ul>
			<li><a href="#">Groupe A</a></li>
			<li><a href="#">Groupe B</a></li>
			<li><a href="#">Groupe C</a></li>
			<li><a href="#">Groupe D</a></li>
			<li><a href="#">Groupe E</a></li>
			<li><a href="#">Groupe F</a></li>
			<li><a href="#">Groupe G</a></li>
			<li><a href="#">Groupe H</a></li>
		</ul>
		</div>
  </body>
</html>


body {
    margin: 0 auto;
    width: 1000px;
}
#groupe-list {
    background: url("images/flo_groupe.png") repeat-x scroll 0 0 #C8DF33;
    border-radius: 10px 10px;
    height: 50px;
}
#groupe-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
#groupe-list li {
    display: inline-block;
    margin: 0 25px;
    height: 50px;
}
#groupe-list a {
    color: white;
    font-family: Tahoma;
    font-size: 0.9em;
    text-decoration: none;
}


J'ai essayé différentes solutions, mais pour partir sur de bonnes bases, je préfèrerai avoir votre avis sur la solution la mieux adaptée.
Je souhaiterai en fait remonter le nom de mes groupes dans la partie rouge de mon image que je vous ai joint.
upload/49181-flogroupe.png

A savoir que j'ai mis un "display: inline-block" sur mes <li>, ainsi qu'une hauteur car je souhaite par la suite afficher des logos en dessous des noms de groupes.

Merci pour votre aide.

Edit: je viens de tester ce code sur mes éléments <li>, ça fonctionne mais je doute que ce soit une excellente solution, et de plus la hauteur des <li> ne correspond plus avec la hauteur de mon image (50px)
position: relative;
bottom: 4px;

Modifié par Fabien24 (02 Apr 2013 - 16:10)
Pourrais-tu poster un screenshot de l'état actuel des choses ? Smiley smile

Edit: sans la dernière étape que tu a indiqué dans ton edit.
Modifié par juliendargelos (02 Apr 2013 - 16:11)
L'idéal serait selon moi de réduire le margin-top de l'élément ul ou de la div "groupe-list".
Pourquoi fixe-tu la hauteur de tes li ?
Pour pouvoir par la suite y mettre une autre div qui contiendra les logos.
J'ai essayé les margin-top sur l'élément ul ou sur la div "groupe-list" mais le résultat n'est pas bon car ça me remonte tout, même l'image, sans doute à cause de la fusion des marges.
Bonjour Julien,

merci, en effet, cette solution fonctionne.
Mais y aurait-il un moyen de remonter les noms sans avoir ce décalage de 4px entre ma div et mon ul (que je peux voir facilement à l'aide de Firebug)?
Sujet clos
Aller à