tioneb369 a écrit :
Salut,
j'ai bien peur que le :first-letter ne fonctionne qu'avec des div ou des p ou des éléments de paragraphes.
quand tu ajoutes à la fin de tes styles :
.navig:first-letter{color:#f00}
on a bien la première lettre en rouge...
par contre sur a, li ou ul ca marche pas....
Par contre ! (chose affreuse !) 
,
si tu places des div dans tes a de menu
ce qui donne par exemple :
<li><a href="#"><div>Inscription</div></a> |</li>
(c'est affreux, je vous avez prévenus)
que tu changes ton style en :
.navig div:first-letter{color:#f00}
.navig div{float:left}
là par magie tu auras tes lettres en rouge.
Par contre point de vue sémantique et code propre c'est pourri !
Salut merci pour ta réponse.
Bon on va dire que j'ai trouver.^^
"first-letter ne s'applique qu'au contenu d'un élément de type block, list-item, table-cell, table-caption et inline-block... Mais pas aux éléments inline cligne "
Citation d'un post sur le forum.
En effet j'ai effectuer un float sur
.navig ul
{
list-style-type: none;
display: inline;
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
float: left;
}
.navig li
{
list-style-type: none;
font-family: "Time New Roman";
font-weight: normal;
display: inline;
font-size: 15px!important;
font-size: 14px;
margin: 0;
padding: 0;
float: left;
}
Et celà fonctionne, sauf que!
Et oui fau bien qu'il est un mais
Ces puces sont des liens, et lorsque la souris est passé dessus, les premières lettres redeviennent Noires...
Comment faire ?
D'avance merci
EDIT:
j'ai trouver pour que les liens restent avec le même effet, voilà le CSS actuel :
body
{
width: 100%;
height: 100%;
margin: auto;
margin-left: auto; /* Pour centrer notre page */
margin-right: auto;
background-color: #eae8e7; /* Couleurs de fond */
text-decoration: none;
}
a /* On défini les paramètres par défaut des liens, on vire les laideurs */
{
border: 0px;
border-color: none;
text-decoration: none;
color: #53a6b4;
font-weight: bold;
}
a:first-letter
{
color: #FF0000;
}
#header
{
width: 768px;
height: 199px;
margin-left: auto;
margin-right: auto;
background-image: url("header_2.png");
}
.quick
{
width: 771px;
height: 65px;
margin-left: auto;
margin-right: auto;
background-image: url("quick.png");
}
.login
{
width: 220px;
height: 40px;
margin-left: 20px;
float: left; /* Obligation d'utiliser un flottant */
margin-top: 10px;
font-size: 0.9em;
color: #0765af;
font-weight: bold;
}
.login input
{
border: 1px dotted;
border-color: #FF0000;
height: 15px;
color: #000000;
font-weight: bold;
font-size: 0.9em;
}
.send_login input
{
width: 20px;
height: 20px;
border: 0px;
border-color: none;
float: left;
margin-left: 192px;
margin-top: -18px;
}
.navig
{
width: 640px;
height: 30px;
float: left;
margin-left: 250px;
margin-top: -25px;
}
.navig ul
{
list-style-type: none;
display: inline;
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
float: left; /* On ajoute des flottants pour que le first-letter puisse fonctionner */
}
.navig li
{
list-style-type: none;
font-family: "Time New Roman";
font-weight: normal;
display: inline;
font-size: 15px!important;
font-size: 14px;
margin: 0;
padding: 0;
float: left; /* On ajoute des flottants pour que le first-letter puisse fonctionner */
}
.navig li:first-letter
{
color: #FF0000;
}
.navig li:after
{
content: " | ";
padding: 5px;
}
.navig ul a:hover
{
text-decoration: underline;
color: #FF0000;
}
.body
{
width: 771px;
height: 534px;
margin-left: auto;
margin-right: auto;
background-image: url("body.png");
}
.footer
{
width: 771px;
height: 70px;
margin-left: auto;
margin-right: auto;
border-top: 1px dashed;
background-image: url("footer.png");
text-align: center;
font-size: 0.8em;
}
Je suis assez vicieux et je vais encore vous embêter mais, je voudrais lros du survol, que le first letter s'inverse, c'est à dire :
A la base les premières lettres des puces sont rouges donc, et le reste dans une autre couleur, je voudrais que lorsque l'on survol le lien/la puce, la première lettre devienne de la couleur des autres lettre, et que les autres lettres soient rouges...
oui j'avoue je cherche la merde
Modifié par harddream (07 Jun 2007 - 15:19)
