28172 sujets

CSS et mise en forme, CSS3

Justifier un texte sur une seule ligne

Bonjour,

J'ai un petit problème auquel je ne trouve pour l'instant pas de solution.
Je dispose d'un espace de 650px de large pour faire une liste de catégorie, qu'il faudrait que j'écrive ainsi :

Cat1 - Cat2 - CatLong3 - CatLong4 - Cat5
Cat6 - Cat7 - Cat8 - Cat9 - Cat10 - Cat11
Cat 12 - Cat13

Si j'utilise un ul avec des li flottants et à taille fixe j'aurais des blancs selon la taille du nom des cat, et ça ne sera pas justifié.

Je suis donc parti sur un <p> car c'est la seule façon de justifier un texte non ?
Le souci avec ça c'est qu'il peut me couper un nom de cat en 2 lignes s'il est trop long, c'est pas ce que je veux.

Je fais donc un calcul à la génération de la page pour passer la nouvelle catégorie à la ligne s'il y a trop de caractères sur la ligne courante, ce qui donne un source comme ça :

<p class="liste_cat">
	<a href="#">Catégorie1</a> - <a href="#">Catégorie 2</a> - <a href="#">Catégorie 3</a> - <a href="#">Catégorie 4</a>
</p>
<p class="liste_cat">
	<a href="#">Catégorie 5</a> - <a href="#">Catégorie 6</a> - <a href="#">Catégorie 7</a> - <a href="#">Catégorie 8</a>
</p>
<p class="liste_cat">
	<a href="#">Catégorie 9</a> - <a href="#">Catégorie 10</a> 
</p>


Et le CSS
p.liste_cat {
	width:650px;
	margin:10px 15px;
	text-align:justify;
}


Avec ça j'ai bien le bon nombre de catégorie par ligne, mais comme la ligne n'est pas "complète" elle n'est pas justifiée.

Au lieu de faire un paragraphe pour chaque ligne j'ai essayé de mettre des br mais le problème est identique.


Une idée ?

Merci
Hello,

a écrit :
Le souci avec ça c'est qu'il peut me couper un nom de cat en 2 lignes s'il est trop long, c'est pas ce que je veux.

Juste pour dire, que tu peux jeter un oeil du coté de white-space:nowrap; pour empeche de couper les lignes trop longues.

Je n'ai pas de solution à ton problème d'alignement, mais je ne pense pas que modifier le code html du coté serveur pour régler un problème d'affichage soit la bonne méthode à utiliser.
D'autant plus qu'un calcul sur le nombre de caracteres n'est pas exact, un i est 3 fois moins grand qu'un m par exemple, et pourtant ils comptent comme un caractere.

Et que va t'il se passer quand ton utilisateur va agrandir la taille de son texte ? Tes lignes vont sauter bizarrement, être à moitié remplies, etc.

Non, soit tu connais exactement tes catégories (ce qui semble être le cas) et donc tu peux attribuer des tailles exactes à chacun, soit tu les laisse vivre leur vie (en empechant, pourquoi pas, de passer sur deux lignes)
hello,
je pense qu'il est possible de justifier une lste comme tu le souhaites en mettant le ul en text-align:justify et tes li en display:inline et sans float bien sur ...
Tymlis a écrit :
Je n'ai pas de solution à ton problème d'alignement, mais je ne pense pas que modifier le code html du coté serveur
Je suis bien d'accord, j'ai plutôt fait ça en dernier recours...

Alors j'ai essayé 
ul {
	width:650px;
	text-align:justify;
}
li {
	white-space:nowrap;
	display:inline;
}


Ca donne ce que je veux sous IE, par contre Firefox me met le ul sur une seule ligne, qui dépasse donc de mon cadre et même de ma page vue le nombre de catégorie.

Une idée pour contourner le problème ?

Merci
Sujet clos
Aller à