28220 sujets

CSS et mise en forme, CSS3

[Résolu] List & First Letter

Bonsoir,
Je suis entrain de faire la refonte d'un ancien site. Et jai une petite question.

Mon menu est fait sous formes de liste.

Quand j'ajouter au css l'attribut first letter comme ceci :

#navbar li:firstletter{
background-color:transparent;
color:#ff0099;
display:inline;
margin:0 0em 0 0;
}


Ma 1er lettre deviens rose, mais ma liste se remet comme une liste normal les élements les un en dessous des autres et des puces apparaissant. Si je retire l'attribut "First Letter" alors ma liste se met comme souhaité, les mots les uns a coté des autres.

Donc si vous pouvez m'aider =D Histoire d'avoir l'attribut first letter mais que ça ne rajoute pas les puces et que ça me mette le tout en ligne !

Mci d'avance
Mon css

#navbar {
margin-bottom:10px;
color: #FF0099;
width:800px;
height:10px;
font-weight:700;
font-size: 110%;
letter-spacing:1px;
}

#navbar ul{
margin:0 0 0 0em;

padding:0;

float:left;

}



#navbar li{
background-color:transparent;

color:#ff0099;

display:inline;

margin:0 0em 0 0;
}

Modifié par Bleeps (16 Jan 2006 - 20:58)
Bonjour,

En ne mettant que :
#navbar li:first-letter{
background-color:transparent;
color:#ff0099;
display:inline;
margin:0 0em 0 0;
}

... tu n'appliques ces propriétés qu'à la première lettre (:firstletter) et non aux éléments li. Il faut écrire par exemple :

#navbar li {
background-color: transparent;
display: inline;
margin: 0;
}
#navbar li:firstletter {
color: #ff0099;
}

Modifié par Laurent Denis (16 Jan 2006 - 15:38)
J'ai essayé comme tu disais rien ne ce passe...
j'ai essayer mais la je sèche Smiley ohwell
Si vous avez des idées !
En effet, petit oubli: 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 Smiley cligne

Pour conserver l'effet de first-letter: faire flotter les éléments li plutôt que de les mettre en inline.
Rebonsoir,
J'ai donc ajuster mon code, comme ceci :


#navbar ul{
margin:0 0 0 0em;

padding:0;

float:left;

}


#navbar li {
margin:0 0 0 1em;
background-color: transparent;
float:left;

}

#navbar li:first-letter {
color: #FF0099;

font-weight: bold;

}


Ca marche très bien, mais j'ai les puces qui sont revenus. Qu' est que j'ai bien peut oublier pour les puces ?

Ps : Je suis entrain d'apprendre donc je sèche par moment =P
Merci de votre aide =D
Merci beaucoup =D
Cela marche très bien =D

Mais ma question est pourquoi cela marchait sans cette attribut avant first letter ? (curiosité ^^)
Les éléments li ont par défaut un valeur de display: list-item qui permet de générer la puce (plus exactement, la boîte de marqueur où va se placer la puce). En mettant les listes en ligne avec display: inline, tu leur fais simplement perdre la possibilité de générer les puces.

En revanche, quand un élément li est mis en float, sa valeur de display:list-item reste inchangée.
Sujet clos
Aller à