28173 sujets

CSS et mise en forme, CSS3

Centrer un sous-menu horizontal

Bonjour à tous,

J'ai fait une recherche sur le forum, tenté les diverses solutions trouvés mais je n'y arrive toujours pas...

J'ai fait un sous-menu contenant l'alphabet pour pouvoir se rendre rapidement au bon endroit dans la page qui contient une de terme en ordre alphabétique. Cependant ce sous-menu est aligné à gauche alors que je voudrais qu'il soit centré...

La page se trouve à l'adresse suivante : http://bmjdr.free.fr/site_bm3/bm_regles/compe_liste.php

Le code CSS en cause :


/* ---------------- CONTENU ----------------*/
#contenu { /* Conteneur du contenu */
	margin-left: 145px;
	padding: 10px;
	text-align: justify;
}
.contentsection:last-child {
	background-image: none;
}
.contentsection {
	background-image: url(_images/ligne.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding: 0px 0 15px;
	margin: 0 0 15px;
}
.contentsection li {
	margin: 5px 0 5px;
}
.sousmenu ul {
	padding: 0;
	overflow: hidden;
}
.sousmenu li { /*Titre(s) d'un menu*/
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	border : 0 none;
	float: left;
	clear: none;
	background: url(_images/menu-li-li.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding: 0 0 0 6px;
	margin: 0 9px 0 -6px;
}


Le code HTML :

<div id="contenu">
<div class="contentsection">
<div class="sousmenu">
<ul>
	<li><a href="#a">A</a></li> 
	<li><a href="#b">B</a></li> 
	<li><a href="#c">C</a></li> 
	<li><a href="#d">D</a></li> 
	<li><a href="#e">E</a></li> 
	<li><a href="#f">F</a></li> 
	<li><a href="#g">G</a></li> 
	<li><a href="#h">H</a></li> 
	<li><a href="#i">I</a></li> 
	<li><a href="#j">J</a></li> 
	<li><a href="#k">K</a></li> 
	<li><a href="#l">L</a></li> 
	<li><a href="#m">M</a></li> 
	<li><a href="#n">N</a></li> 
	<li><a href="#o">O</a></li> 
	<li><a href="#p">P</a></li> 
	<li><a href="#q">Q</a></li> 
	<li><a href="#r">R</a></li> 
	<li><a href="#s">S</a></li> 
	<li><a href="#t">T</a></li> 
	<li><a href="#u">U</a></li> 
	<li><a href="#v">V</a></li> 
	<li><a href="#w">W</a></li> 
	<li><a href="#x">X</a></li> 
	<li><a href="#y">Y</a></li> 
	<li><a href="#z">Z</a></li>
</ul>
</div>
</div>


Merci beaucoup pour votre aide Smiley cligne
Bonjour,

Très simplement :
ul {text-align: center;}
li {display: inline;}

Et voilà. Smiley smile

PS : ne pas utiliser float pour les li si on veut que display: inline fonctionne.
Modifié par Florent V. (09 Jun 2007 - 21:27)
Plus simplement encore, utiliser un paragraphe à la place de cette liste alphabétique qui, en tant que liste ul, n'apporte aucune fonctionnalité notable.
Florent V. a écrit :
Bonjour,

Très simplement :
ul {text-align: center;}
li {display: inline;}

Et voilà. Smiley smile

PS : ne pas utiliser float pour les li si on veut que display: inline fonctionne.


J'ai tenté, mais alors j'ai un - avant mon A et les tirets (qui sont en fait une images) ne sont plus centré entre les lettres Smiley ohwell
C'est peut-être qu'une question d'ajustement des paddings et autre, je vais jouer un peu dans le code et voir.

Laurent :
La première fonctionalité notable est surtout pour moi, car ce type de liste me permet éventuellement de changer le '-' entre les <li>. De plus, ce site comportera d'autres sous-menu dans d'autre sous-section, qui seront plus complexe qu'un simple alphabet... à long terme cela me semblait plus intéressant qu'un paragraphe en terme d'évolutivité.... mais peut-être que je me fait des idées Smiley lol

Edit :
Bon en faisant ainsi j'ai les tirets qui ont l'air centrés... reste à réussir à retirer le tout premier :
.sousmenu ul { /*Sous menu */
	padding: 0;
	overflow: hidden;
	text-align: center;
}
.sousmenu li { 
	list-style: none;
	border : 0 none;
	display: inline;
	clear: none;
	background: url(_images/menu-li-li.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding: 0 0 0 6px;
}

Modifié par Shara (09 Jun 2007 - 22:01)
Bonjour,

Concernant l'utilisation d'une liste ou non, bon je serais en l'état du code plutôt de l'avis de Laurent, pour les tirets, j'aurais quand à moi simplifier en les incluant en dur dans les li a ce qui évite les problèmes de centrage, leur permet de supporter l'agrandissement du texte et de les positionner comme il se doit. En les englobant dans une balise span stylée on peut également les différencier.
<style type="text/css">
.contentsection:last-child {
	background-image: none;
}
.contentsection {
	background-image: url(_images/ligne.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding: 0px 0 15px;
	margin: 0 0 15px;
}
.contentsection li {
	margin: 5px 0 5px;
}
.sousmenu ul { /*Sous menu */
	padding: 0;
	overflow: hidden;
	text-align: center;
}
.sousmenu li { 
	list-style: none;
	border : 0 none;
	display: inline;
}
.sousmenu li a{ 
	text-decoration: none;
	color: green;
}

.sousmenu li a span{ 
	color: red;
}
</style>
</head>
<body>
	<div class="contentsection">
		<div class="sousmenu" id="top">
			<ul>
				<li><a href="#a">A<span class="tiret"> - </span></a></li><li><a href="#b">B<span class="tiret"> - </span></a></li><li><a href="#c">C<span class="tiret"> - </span></a></li><li><a href="#d">D<span class="tiret"> - </span></a></li><li><a href="#e">E<span class="tiret"> - </span></a></li> 
			</ul>
		</div>
	</div>


Ps: a savoir

<li>bla bla ...</li>
<li>bla bla ...</li>

Induit un espace à l'affichage entre les 2 élements alors que

<li>bla bla ...</li><li>bla bla ...</li>

Non Smiley biggol
Laurent Denis a écrit :
Plus simplement encore, utiliser un paragraphe à la place de cette liste alphabétique qui, en tant que liste ul, n'apporte aucune fonctionnalité notable.
Hmmm, je ne suis pas vraiment d'accord. Sans parler d'apport de fonctionnalités (je ne pense pas que cela doive intevenir sur le choix d'une balise HTML), vous ne pensez vraiment pas que cet alphabet tient plus de la liste (mais ordonnée) que du paragraphe ?
N'empêche qu'entre

- une simple liste insérant un tiret automatiquement (ce tiret étant une image, il pourra de plus être changé plus tard)

et

- Un tiret avec en plus un <span>

La première solution me semble bien plus 'aéré' question code tout en me permettant une évolution future. Alors qu'avec la seconde, si un jour je veux changer le tirer, je dois revoir tout le code et pas seulement le CSS...

Quant à faire un paragraphe :
Je ne crois pas que ce soit une bonne solution, car j'aurais aussi des sous-menu ailleurs qui la seront vraiment des listes contenant soit une liste des noms des dieux, une liste des sorts décrit dessous, ... et alors j'aurais le même problème...

Je vais voir si mon ami qui m'a fait le code pour le menu de gauche arrive à reproduire cela pour mes sous-menus... sinon je songerais plus sérieusement à la solution de ghost Smiley cligne
marcv a écrit :
Hmmm, je ne suis pas vraiment d'accord. Sans parler d'apport de fonctionnalités (je ne pense pas que cela doive intevenir sur le choix d'une balise HTML), vous ne pensez vraiment pas que cet alphabet tient plus de la liste (mais ordonnée) que du paragraphe ?


Une simple question: balisez-vous systématiquement toute énumération sous forme de listes ul et ol ? Il est évident que non, et que l'existence de ces listes ul et ol n'empêchent en rien la présence de facto d'énumérations dans des contenus de paragraphe.

Il n'existe pas en HTML d'élément de balisage d'une liste au niveau des éléments de phrase (un équivalent des listes ul et ol qui soit un élément entrant dans le type%inline, tout comme q est un équivalent de blockquote). Cela ne doit cependant pas conduire à l'utilisation forcée de ul et ol, au prix de contorsions telles que celles que l'on voit ci-dessus pour gérer de simples tirets... Ou au prix de l'amusant problème posé parfois par l'indentation du code qui devient (et c'est normal) un espace significatif lorsque le style display:inline est appliqué aux éléments li...
Modifié par Laurent Denis (10 Jun 2007 - 10:52)
En fait la liste avec gestion des tirets, si j'arrive à la faire fonctionner, apporte les avantages suivants :

- Gestion automatique des retours à la ligne

Bon là il faudrait vraiment un écran peu large pour avoir un retour à la ligne, mais dans d'autres pages j'aurais des listes avec des termes plus grand et un nombre de terme plus important. Si je les mets en paragraphe, selon la largeur de la fenêtre, les tirets peuvent se retrouver au mauvais endroit (en début ou fin de ligne).

- Possibilité de changer le tiret pour autre chose dans le futur directement par le fichier CSS plutôt que de devoir aller dans chaque page html
Bonjour,

Au point de vue maintenance (changement des tirets) avec une organisation à partir d'include (a condition de disposer de php Smiley cligne ) et d'un éditeur de texte possédant la fonction rechercher remplacer, il ne doit pas falloir plus de 3 mn pour effectuer les changements.
Laurent Denis a écrit :


l'espace insécable est là pour cela...


euh... je connais pas trop, mais il me semble qu'alors, si l'écran n'est pas assez large, l'utilisateur pourrait se retrouver avec une barre de défilement horizontale..

Car si je ne veux pas avoir de '-' en début ou en fin de ligne, il faut alors que toute une ligne soit insécable...

ou alors j'ai pas compris le fonctionnement de cet espace
Hmmm, je ne suis toujours pas vraiment d'accord Smiley smile

Laurent Denis a écrit :
balisez-vous systématiquement toute énumération sous forme de listes ul et ol ?
Une énumération intégrée dans un paragraphe, formant partie d'une phrase par exemple, non, du fait qu'on ne va pas aller jusqu'à baliser les listes au "niveau des éléments de phrase", je suis d'accord avec ça. Cependant, ici on a une liste qui est autonome, totalement indépendante, qui n'est pas un élément d'un paragraphe. À la limite, elle est elle-même (et exclusivement elle) le paragraphe. En faire un <p> alors qu'on a la possibilité de la qualifier mieux, d'être moins vague (et sans véritable "contorsion" Smiley smile ) me semble réducteur. Alors autant baliser les titres (h1, h2, etc.) en <p>, de la même manière que les blockquote, etc.

Dans le cas du site de Shara, la liste de liens permettant de se rendre sur les différentes pages du site (ce qu'on appelle communément le menu) est une <ul>, pourquoi n'en serait-il pas de même pour la liste de liens permettant de se rendre aux différentes sections d'une page ?

Laurent Denis a écrit :
au prix de contorsions telles que celles que l'on voit ci-dessus pour gérer de simples tirets
Le fait de mettre ce tiret dans les styles ne me semble pas d'une difficulté particulière, et permet de surcroît une plus grande séparation présentation-contenu : ce tiret est un élément décoratif et Shara n'en voudra peut-être plus dans le prochain redesign de son site.
Modifié par marcv (10 Jun 2007 - 11:45)
ghost a écrit :
Bonjour,

Au point de vue maintenance (changement des tirets) avec une organisation à partir d'include (a condition de disposer de php Smiley cligne ) et d'un éditeur de texte possédant la fonction rechercher remplacer, il ne doit pas falloir plus de 3 mn pour effectuer les changements.


Mes menus et les sous-menus sont des include php oui...
Seulement il est fort possible que mes menus et mes sous-menu contiennent des termes possédant des tirets ('homme-lézard' par exemple)... aussi un simple rechercher/remplacer génèrera des erreurs...

Alors que changer l'image dans le CSS... ça prend pas plus de temps et en plus je ne risque pas de remplacer un truc qu'il ne faut pas en passant...

De plus le jour ou je veux remplacer le '-' par une réelle image et non pas un caractère... il me semble alors que le CSS sera plus pratique que de faire rechercher/remplacer '-' par '<img ...'

Enfin le tout est sujet à débat... mais je crois que marcv est celui qui comprend le mieux ma conception de la chose Smiley cligne
Modifié par Shara (10 Jun 2007 - 11:52)
Et sinon, juste pour dire...

<ul>
	<li class="premier">A</li>
	<li>B</li>
	<li>C</li>
	<li>...</li>
	<li class="dernier">Z</li>
</ul>

Code pas compliqué à générer (dans le cas d'une boucle PHP, la classe "premier" sera facile à générer, la classe "dernier" peut-être un peu plus compliquée même si ça reste relativement simple), et réservant des possibilités pour la mise en forme.

Le fait que les li soient en display: inline n'empêchera pas l'utilisation d'images de fond (via la propriété background, et pas list-style-image par contre).

Pour les espaces insécables, il s'agit plutôt de faire ceci (si les tirets sont dans le code) :
<p>A &ndash;&nbsp;B &ndash;&nbsp;C ... &ndash;&nbsp;Z</p>

Donc pas des espaces insécables pour toute la ligne, juste entre les caractères que l'on ne veut pas voir séparés sur deux lignes différentes.

Quant au débat p ou ul+li... Eh bien, pour ma part il me semble que la différence n'est pas énorme. Sauf peut-être :
- des possibilités de mise en forme plus importantes avec des li (quoique, on peut faire la même chose avec p et des span) ;
- un rendu peut-être un peu plus lourds avec une synthèse vocale pour une liste...

Les deux me semblent valables et pas particulièrement problématiques. Donc bon...
Florent V. a écrit :
Et sinon, juste pour dire...

<ul>
	<li class="premier">A</li>
	<li>B</li>
	<li>C</li>
	<li>...</li>
	<li class="dernier">Z</li>
</ul>

Code pas compliqué à générer (dans le cas d'une boucle PHP, la classe "premier" sera facile à générer, la classe "dernier" peut-être un peu plus compliquée même si ça reste relativement simple), et réservant des possibilités pour la mise en forme.


Pas mal comme idée.
Par contre j'ai pas besoin de class="dernier" puisque l'image de fond génère un tiret à gauche seulement (donc il faut le retirer qu'au premier).

Cependant en cas de saut de ligne automatique du à une largeur de fenêtre trop étroite, j'ai toujours un tiret sur l'élément qui se retrouve au début de la ligne...

enfin c'est pas si grave
Sujet clos
Aller à