28172 sujets

CSS et mise en forme, CSS3

Première lettre en majuscule ombrée sur un lien

bonjour,

Est-il possible d'afficher un lien de manière que la première lettre du mot apparaisse en majuscule ombrée et sans faire de cette première lettre une icône surtout ?
Merci de vos explications.
Administrateur
Bonjour,

Normalement cela devrait se faire sans problème avec le pseudo-élément :first-letter.
Bonjour,

Je te remercie.
Je ne connais pas du tout... Comment l'inscris-tu dans la feuille de style ? Et sur la page ?
par exemple, là j'ai :

<ul>
<li>
<a href="http://petit-rat-conte-moi">Petit rat conte-moi</a>
</li>
</ul>

Peut-être pas utiles les balises de liste... Pardon, c'est par habitude...
Merci.
Administrateur
Par exemple rapide (j'ai placé les styles dans la page HTML, mais il sera préférable de les placer dans un fichier .css externe) :


<!doctype html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<style>
	li:first-letter {
		font-size: 3em;
		text-transform: uppercase;
		text-shadow: 1px 1px 5px red
	}
	</style>
	<title></title>
</head>
<body>
	<ul>
		<li>
			<a href="http://petit-rat-conte-moi">Petit rat conte-moi</a>
		</li>
	</ul>
</body>
</html>

Modifié par Raphael (03 Aug 2011 - 10:26)
Merci.
Oui, je souhaite de toute façon inscrire le style sur mon fichier.css...
Par contre, je ne voudrais pas que toutes les premières lettres de chaque lien soit majuscules et ombrées... Je n'ai pas été dans le détail...
En fait j'aimerais afficher ainsi seulement certains liens d'un menu...
Je ne sais pas si je suis claire.

J'essaie donc d'expliquer le but : je voudrais faire lire verticalement le mot OPERA sur le menu. Sachant que le premier lien "accueil" sera illustré - normalement... - par une icône.

Merci !
Salut,

ajoute une class sur les li contenant les liens sur lesquels tu voudrais ajouter ton style.
Et ne la mets pas sur ceux où tu ne veux pas voir ce style.


<ul> 
        <li class="nom-de-ta-classe"> 
            <a href="http://petit-rat-conte-moi">Petit rat conte-moi</a> 
        </li> 
</ul> 





nom-de-ta-classe a:first-letter { 
        font-size: 3em; 
        text-transform: uppercase; 
        text-shadow: 1px 1px 5px red 
    }
Immense merci !
Je tente cela et mettrai la page d'accueil du nouveau site pour lequel je voudrais réaliser "la chose" en ligne au plus vite. Je viendrai en donner le lien ici !
A bientôt tous !
Administrateur
Fahrenheit a écrit :


nom-de-ta-classe a:first-letter {


Si je ne me trompe pas, :first-letter ne peut s'appliquer qu'à un élément bloc, donc pas directement sur le lien.

Il faudrait écrire 

nom-de-ta-classe:first-letter {
Raphael a écrit :


Si je ne me trompe pas, :first-letter ne peut s'appliquer qu'à un élément bloc, donc pas directement sur le lien.

Il faudrait écrire 

nom-de-ta-classe:first-letter {


si je ne me trompe , display:inline-block; sur <a> suffit suffirait a émuler :first-letter (de mémoire, il me semble que ça passait aussi sous IE6 et son foutu layout, extrapolé au contexte de formatage ça marche généralement plutôt bien Smiley smile ) .

Cordialement
... au risque d'avoir une memoire peu fiable Smiley smile

GC
Eh bien, voilà, enfin... J'ai pris un peu de repos... Mais la page est en ligne - dans une version "en construction" ; manque ce soir, le pied depage encore...
Est-ce que quelqu'un pourrait me dire ce que cela donne ?

Par ailleurs, j'ai diminué la taille du dessin qui illustre la page. Je me demande si cela ne crée pas de problème de résolution ; c'est "sensible" un dessin... Et alors, puis-je l'afficher en "taille réelle" (800X600PX)

Merci pour votre aide et pardon pour le hors sujet de ma deuxième question.

Excellente soirée à tous.
bonjour
J'ai vérifié ma feuille, j'ai relu le code sur la page .php ; j'ai l'impression que tout y est mais, décidément, l'affichage ne rend chez aucun de mes contacts...
Qui pourrait m'éclairer ?
D'avance merci.
a écrit :
Est-ce que quelqu'un pourrait me dire ce que cela donne ?

Sans lien vers ta page, ça va être un peu difficile Smiley smile
Heu... Pardon, je suis confuse.
Le lien :
http://enrecreations.free.fr

* je sais qu'il y a un souci d'affichage d'image et du menu gauche ; on me l'a signalé par ailleurs... Mais là je travaille dessus ; je pense savoir d 'où vient l'erreur... Ce qui n'est pas le cas pour les lettres... Merci d'avance !
Bonsoir,

pour emuler :first-letter sur tes liens, il te faut en modifier le contexte de formatage Smiley smile .

.mombre a , .mombre a:first-letter {display:inline-block;}


;)

++
bonjour,
pardon pour la réponse tardive ; avec la nouvelle version de revue d'écran que j'utilise, je n'arrive pas à naviguer aussi facilement qu'avant ici...
J'essaie ça et... Si quelqu'un pouvait me donner son avis !
bonne reprises à ceux qui vivent leur dernier week-end de vacances !
bonsoir,

petites erreurs de syntaxe et d'application des regles Smiley smile , finalement ça n'a fait aucun mal.

1. extrait de votre feuille de style :

.mombre .mombre 
a , .mombre a:first-letter 
display:inline-block;
font-size: 3em;
text-transform: uppercase;
text-shadow: 1px 1px 5px red;
}


il n'y a pas d'accolade ouvrante.

2. 
.nombre .nombre a
ne cible rien qui existe (2 fois .mombre)

puis , .mombre a , .mombre a:first-letter{font-size:3em} grossie les textes du liens de 3em , puis la premiere lettre a nouveau de 3em. (c'est pour le coup vraiment tres gros)


3. une premiere correction pourrait se faire comme ceci :
.mombre a ,
 .mombre a:first-letter {
display:inline-block;
text-decoration:none;
}
.mombre a:first-letter {
font-size: 3em;
text-transform: uppercase;
text-shadow: 1px 1px 5px red;
}

(text-decoration: none ; pour les liens , car il y a deja une bordure basse sur les item de liste qui les contiennent )

bonne continuation,

Cyrille
Modifié par gc-nomade (27 Aug 2011 - 21:10)
Sujet clos
Aller à