[Résolu] Text justify sur un lien (a) dans un menu en (ul) et (li) ?

Salouté

je souhaiterai justifié mon texte concernant mon menu ( fait de ul et de li et de a ).
Du style la 1ere lettre du nom de ma série photo aligné à gauche et la dernière alignée à droite avec un espacement entre les lettres équitables ( seulement pour chaque ligne ) l'effet recherché correspond aux articles de journaux, en colonne.
Je souhaite que chaque titre prenne toute la largeur de ma colonne.

voici mon code html :

<div class="listeprojet">


<ul id="seriephoto">
<li><a href="listemenu" title="aller à la serie beverley">BEVERLEY</a></li>
<li><a href="listemenu" title="aller à la section 2">MAGIC MILLION</a></li>
<li><a href="listemenu" title="aller à la section 3">NOCTAMBULE</a></li>
<li><a href="listemenu" title="aller à la section 3">JB PRODUCTION</a></li>
<li><a href="listemenu" title="aller à la section 4">CORPORATE</a></li>
<li><a href="listemenu" title="aller à la section 5">ABSTRACT</a></li>
<li><a href="listemenu" title="aller à la section 3">NOCTAMBULE</a></li>
<li><a href="listemenu" title="aller à la section 3">JB PRODUCTION</a></li>
<li><a href="listemenu" title="aller à la section 4">CORPORATE</a></li>
<li><a href="listemenu" title="aller à la section 5">ABSTRACT</a></li>
</ul>


</div>

----------------------------
ET MON CODE CSS :

/* liste projet correspond au bloc ou apparaissent la liste des noms de projets photo dans le bloc menu */
.listeprojet{
margin: 0px;
padding: 0px;
width: 100%;
position: absolute;
top: 17%;
bottom: 17%;
background-color: brown;
color: white;

}

#seriephoto{
width: 100%;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 17%;
bottom: 17%;

}

#seriephoto li a{
color: black;
text-align: justify;
list-style: none;
text-decoration: none;
top: 17%;
bottom: 17%;
left: 17%;
right: 17%;

}

--------------------------------------------

J'ai aussi lu qu'il n'était pas possible de faire un text-align avec des liens (a) alors une solution alternative se veut-elle ?

Merci à tous !
Modifié par LILOU2404 (03 Dec 2014 - 14:51)

Salut,

L'effet que tu souhaites réaliser est difficile à réaliser : tu as, certes, les propriétés CSS text-align et letter-spacing ; mais, tu seras obligé de multiplier les styles pour avoir le même effet partout, étant donné la longueur variable des textes concernés. Et, en cas de modification des contenus, bonjour la maintenance ! Bref, ne te tracasse pas trop avec ça.

Quant à la propriété text-align, elle n'est d'aucun effet sur un élément qui se voit appliquer la déclaration CSS display: inline (cette déclaration s'applique par défaut à l'élément a). Pour appliquer text-align à ton a, ajoute un display: block, par exemple.

Soit dit en passant, list-style est inutile pour la règle #seriephoto li a, de même que les top, right, bottom est left (à moins que les éléments a ne soient positionnés ailleurs dans tes CSS). En outre, quand tu veux montrer des portions de code, utilise la colorisation syntaxique proposée par le formulaire de saisie de tes messages : ce sera plus lisible et ça donnera bien plus envie aux autres de t'aider.

Salut,

Effectivement CSS3 à quelques trous, dont ces fameuses propriétés "text-justify" ou encore "text-align-last", qui ne sont supportés que par IE '-_-

Cependant tu peux hacker, il faut juste mettre un espace entre chaque lettres + un après la dernière, et ajouter ce bout de code à ton CSS :

#seriephoto li a:after {
    content: "–––––––––––––––––––––––––––––––––––";
    /* si le content n'est pas assez long, rajouter des "–", sans espace */
    line-height: 0;
    visibility: hidden
}

Ça va créer un long "mot" sur la même ligne que ton texte, suffisamment long pour que ça fasse sauter une ligne à ton lien (ce qui ne se voit pas car le line-height est à zéro). Du coup les caractères de la première ligne, étant reconnus comme des mots, vont se justifier comme des grands.

C'est moche de devoir en arriver là sur des navigateurs récents, vive Internet Explorer

Merci pour vos réponses ..

Je viens de tenter la solution de Freez qui me rend la capture donnée ci-dessous ..

LE CODE CSS

    #seriephoto{
	 width: 100%;
	 list-style: none;
	 margin: 0;
	 padding: 0;
	 position: absolute;
	 top: 17%;
         bottom: 17%;
	 
    }

    #seriephoto li a{
	 color: black;
	 list-style: none;
	 text-decoration: none;
	 text-align: justify;
	
	
    }
    
    #seriephoto li a:after {
    content: "––––––––––––––––––––––––––––––––––––––––––––––––––––––––";
    /* si le content n'est pas assez long, rajouter des "–", sans espace */
    line-height: 0;
    visibility: hidden;
}
    

LE HTML

   <div class="listeprojet">
                  
                    
                 <ul id="seriephoto">
                     <li><a href="listemenu" title="aller à la serie beverley">B E V E R L E Y </a></li>
                     <li><a href="listemenu" title="aller à la section 2">M A G I C  M I L L I O N </a></li>
                     <li><a href="listemenu" title="aller à la section 3">N O C T A M B U L E  </a></li>
                     <li><a href="listemenu" title="aller à la section 3">J B   P R O D U C T I O N </a></li>
                     <li><a href="listemenu" title="aller à la section 4">C O R P O R A T E </a></li>
                     <li><a href="listemenu" title="aller à la section 5">A B S T R A C T </a></li>
                     <li><a href="listemenu" title="aller à la section 3">N O C T A M B U L E </a></li>
                  
                </ul>
                    
                    
                </div>
                

Sinon Mr Brito, merci de me faire aérer mon CSS par contre je n'ai pas très bien compris votre solution ? car je ne connais pas le CSS display et je n'utilise pas encore de in-line block … Merci de m'éclaircir sur le sujet

Merci à vous, j'attends vos retour avec impatience .

LILOU2404 a écrit :
Sinon Mr Brito, merci de me faire aérer mon CSS par contre je n'ai pas très bien compris votre solution ? car je ne connais pas le CSS display et je n'utilise pas encore de in-line block … Merci de m'éclaircir sur le sujet

Display, vous connaissez ?

Je pense que si ça ne fonctionne pas correctement c'est parce qu'il faut mettre la propriété

text-align: justify

sur un parent du lien (le LI ou le UL par exemple).

En bref mettre un text-align sur un élément de type inline n'a pas vraiment de sens (car il est sensé faire parti du contenu). Du coup tu as également la possibilité de faire passer ton lien en display:block pour pallier au problème.

Bonne continuation

Ca fonctionne nickel , merci à tout les 2 !