28172 sujets

CSS et mise en forme, CSS3

[Résolu] Selectionner les premières lettres

Bonjour à tous !

je souhaiterais savoir s'il est possible de sélectionner un certain nombre de lettre d'une balise a en CSS. Je sais qu'il serait plus simple de mettre un span autour des lettres souhaitées, mais je suis sur un CMS et il est impossible de customiser le code de la navigation car il est généré via du python Smiley decu

en gros je devrais avoir ce code : <a><span>MON</span>CODE</a> mais j'ai uniquement ça : <a>MONCODE</a> et je veux sélectionner "MON"

je pensais à quelque chose du genre : X:nth-letter(n) Smiley confus

Merci par avance à ceux qui pourront m'aiguiller
Bonjour,

malheureusement en css c'est simplement impossible ( bien que quelques propositions ont été faites par Chris Coyier et quelques autres ) mais actuellement la seule solution envisageable est d'employer lettering.js qui ajoute un span autour de chaque caractère. C'est un peu moche pour le code source mais c'est terriblement efficace !
Bonjour,

sauf erreur de ma part, le sélecteur :nth-letter(n) n'existe pas.

Je n'ai pas regardé en détail son fonctionnement mais le plugin jQuery Lettering.js semble adapter à votre problème. Il permet d'injecter des balises <span> autour des différentes lettres.

Par exemple: 
<a>MONCODE</a>


devient:
<a> 
<span class="char1"> M </span>
<span class="char2"> O </span>
<span class="char3"> N </span>
<span class="char4"> C </span>
<span class="char5"> O </span>
<span class="char6"> D </span>
<span class="char7"> E </span>
</a>


A voir si c'est utilisable dans votre cas.

Edit : Je vois que Ten a été plus rapide pour la réponse!
Modifié par blondin (17 Dec 2012 - 15:49)
magali_infographiste a écrit :
Je sais qu'il serait plus simple de mettre un span autour des lettres souhaitées, mais je suis sur un CMS et il est impossible de customiser le code de la navigation car il est généré via du python Smiley decu


Je vois pas en quoi le fait que le CMS soit codé en Python empêche de customiser le code.
Pour 3 premières lettres, je ne sais pas... Mais pour la première lettre d'un paragraphe :
p:first-letter {...}

Ou d'un titre h2 par exemple :
h2:first-letter {...}
jb_gfx a écrit :


Je vois pas en quoi le fait que le CMS soit codé en Python empêche de customiser le code.



Voici le code au quel j'ai accès :
<tal:sections tal:define="portal_tabs view/portal_tabs"
     tal:condition="portal_tabs"
     i18n:domain="plone">
    <h5 class="hiddenStructure" i18n:translate="heading_sections">Sections</h5>



<div id=header>
		
    <ul id="portal-globalnav"
        tal:define="selected_tab python:view.selected_portal_tab"
        ><tal:tabs tal:repeat="tab portal_tabs"
        >
		<li tal:define="tid tab/id;
                         subitems python:view.getTabObject(tabUrl = tab['url'], tabPath = tab.get('path'));
                         item_clickable python:view.enable_parent_clickable or not subitems"
             tal:attributes="id string:portaltab-${tid};
                             class python:selected_tab==tid and 'selected' or 'plain'"
            ><a href=""
               tal:content="tab/name"
               tal:attributes="href tab/url;
                               title tab/description|nothing;
                               class python:item_clickable and 'plain' or 'noClick'">
            Tab Name
            </a
            ><tal:block tal:condition="subitems">
                <ul class="submenu">
                    <tal:subitems tal:replace="structure subitems">
                        <tal:comment replace="nothing">Submenu</tal:comment>
                    </tal:subitems>
                </ul>
            </tal:block></li>
			
			</tal:tabs></ul>
</div><!--fin header-->				
</tal:sections>


Merci en tout cas pour le js !!!
Sujet clos
Aller à