[Résolu]Problème d'alignement d'une liste

Bonjour,

Je me retrouve en face d'un petit problème d'alignement. Sur l'image ci-dessous vous constaterez que les options de mon menu sont centrées, alors que j'aimerais les aligner à gauche :



Le menu se trouve dans un <div> dont les propriétés ne contiennent pas de spécifications quant à l'alignement du texte. Ensuite les options du menu sont définies comme suit :

<a class="menu" href="index.php">Accueil</a><br />

et le css :

a.menu:link {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	text-align: left;
}

Pourquoi l'alignement à gauche n'est-il pas pris en compte ?
Modifié le 18 Dec 2004 - 15:38

parce que :link est une pseudo classe qui s'applique pour les liens aux pages qui n'ont pas encore été visitées, tout comme :hover, qui s'applique aux liens survolés.
http://fr.selfhtml.org/css/proprietes/pseudoformats.htm#link_visited_hover_active_focus

Il faudrait plutot que tu style ton div conteneur, genre :

#menu a { text-align:left; } 

( en prenant en compte que ton div a un id="menu" )

Merci Brice, mais justement ce sont des liens vers des pages non visitées (et j'ai également mis un text-align dans le hover et le visited)

La solution de Kevin me semble pas mal, mais ça ne marche toujours pas :

#menuGauche a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	text-align: left;
}

Et dans le code :

<div id="menuGauche"> 
  <div class="MenuTitle">Menu</div>
  <a href="tartapion.php">Accueil</a><br />

Modifié le 18 Dec 2004 - 11:23

As-tu déjà penser à utiliser une liste pour ton menu ?
http://www.alsacreations.com/articles/menu/
http://www.maxdesign.com.au/presentation/listamatic/index.htm

Euh... non. J'ai lu en vitesse tes 2 liens et ça semble en effet assez intéressant. Je vais modifier mon menu de ce pas

Alors j'ai donc intégré les listes selon le tutorial d'Alsacréations, mais on dirait que l'affichage mélange des puces classiques avec mes puces personnalisées...



Le code :

<div id="menuGauche"> 
  <div class="MenuTitle">Menu</div>
  <ul class="ulGauche"><li><a href="tartanpion.php">Menu 1</a></li>
(...)

Le CSS :

ul#ulGauche {
list-style-type: none; /* on supprime les puces, inutiles */
width: 100%; /* précision pour Opera */
}

ul#ulGauche li { float: left;} /* on aligne les listes sur la gauche */

.ulGauche a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	text-align: left;
	color: #000000;
	text-decoration: none;
	background-image: url(../img/puceOff.jpg);
        background-repeat: no-repeat;
	font-weight: bold;
}

J'ai utilisé ul#ulGauche, plutôt que 'ul' comme dans le tutorial histoire de pouvoir créer d'autres listes de menu sur le site qui n'aient pas le même look. Le problème doit venir de là...

Salut,

Tu t'es mélangé les pinceaux entre les class (.) et les id (#), ce qui doit expliquer ton problème je pense

Exact, je m'étais un peu mélangé les pinceaux Toutefois le résultat n'est toujours pas terrible :



Code :

<ul class="ulGauche">
<li><a href="index.php">Accueil</a></li>
<li><a href="index.php">Forum</a></li>

Vu que tout est collé, j'ai essayé de mettre des <br> en fin de ligne, mais voilà le résultat :



Je dois avouer que je suis un peu largué, je ne vois vraiment pas comment le navigateur peut interpréter le css de cette façon...

Je vous redonne ici mon code :

le code CSS du <ul>

ul.ulGauche {
list-style-type: none; /* on supprime les puces, inutiles */
width: 100%; /* précision pour Opera */
}

ul.ulGauche li { float: left;} /* on aligne les listes sur la gauche */

le code CSS du <a>

.ulGauche a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	text-align: left;
	color: #000000;
	text-decoration: none;
	background-image: url(../img/puceOff.jpg);
        background-repeat: no-repeat;
	font-weight: bold;

Pareil pour le mélange "." et "#":

ul#menu{
	list-style-type: none; /* on supprime les puces, inutiles */
	width: 100%; /* précision pour Opera */
	margin:0;
	padding:0;
}
ul#menu li{
	pas de float à utiliser ici
	margin:0;
	padding:0;
}
ul#menu li a{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	text-align: left;
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	background-image: url(../img/puceOff.jpg);
        background-repeat: no-repeat;
        background-position: left;
	padding:0 0 0 20px; /* créer le décalage pour image en background*/
/*ou text-indent:20px;*/
}

et

<ul id="menu">
     <li><a href="index.php">Accueil</a></li>
     <li><a href="index.php">Forum</a></li>
</ul>

Modifié le 18 Dec 2004 - 13:20

Merci, désormais l'affichage est correct. Ta réponse bien structurée m'a permis de mieux comprendre cette hiérarchie qui se crée entre les éléments (ul#menu li a).

Bonne nouvelle,
Pour les recherches futures tu pourrais aussi renommé le titre en "[Résolu] problème d'alignement d'une liste" par exemple.