28172 sujets

CSS et mise en forme, CSS3

First-letter

Lorsque j'essaie d'appliquer un style à la première lettre d'une section, avec ceci : 
#section::first-letter{
    color:red;
    }
par exemple, rien ne se passe. Pour l'ajout de ligatures, j'ai laissé tomber. En revanche, ici, j'obtiens un résultat sur Codepen et autres JSfiddle avec un code simple, mais sur la page web que j'ai créée, ça ne répond pas. Quelle pourrait en être la cause ? Qu'est-ce qui peut bloquer ce genre de mise en forme ? Y a-t-il une question d'héritage que je comprends mal ? Si c'est le cas, comment la contourner, ou plutôt la forcer ?

C'est assez désespérant, j'ai dû reprendre plusieurs fois cette page à zéro pour revenir à des fondamentaux plus simples, parce que, dès qu'on arrive à un petit niveau de complexité, il y a toujours des surprises : problèmes de sélecteurs, de combinaisons de styles qui ne fonctionnent pas, de marges mal paramétrées, etc.
Lorsque mon "site" sera suffisamment fourni, je ne pourrai plus tout reprendre comme ça !
Bonjour.

Le code HTML serait également bienvenu. Utilises-tu, comme tu le dis, une balise <section> ou, comme ton code l'indique un autre élément avec un id #section ?

<body>
<div id=container>
<section id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin odio odio, interdum ultricies laoreet vitae, mattis ac ante. Aenean dui libero, placerat non suscipit in, tincidunt eget tortor. Morbi tempor odio non ornare facilisis. Vivamus in laoreet arcu. Pellentesque aliquet ullamcorper enim quis scelerisque. Cras tempor dolor dui, sed faucibus velit fermentum quis. Curabitur adipiscing velit eget neque lacinia posuere. Aenean fermentum, orci et adipiscing semper, dui nisl lacinia mi, id feugiat tellus magna non dui. Aenean augue ipsum, accumsan at augue non, tristique convallis massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum aliquam erat nulla, vitae tristique diam bibendum ac. Fusce dolor massa, accumsan sed sollicitudin quis, cursus id diam. </p>
<p>Praesent vulputate fermentum purus, eget semper velit ultrices sed. Cras congue justo non velit tristique, laoreet aliquet quam imperdiet. Aenean scelerisque pellentesque nisl. Fusce a felis tortor. Quisque est lectus, semper ac auctor in, fermentum vel turpis. Integer lacinia risus purus, at ultricies erat scelerisque in. Duis ut congue est. Fusce id adipiscing tortor, sed pulvinar purus. Nullam fermentum lobortis porta. Aliquam ultricies tincidunt ante, id porta mi eleifend eget.</p>
</section></div></body>
pour le html, et :
*{
	}
body{
    background:url('../images/ombre.png')repeat-y 50% scroll rgb(255,255,255);
    font-family:"Century Gothic",Verdana,Helvetica,Arial,sans-serif;
    }
#container{
    margin:auto;
    width:950px;
    min-height:500px;
    }
#lorem{
    margin:150px 50px;
    font-family:constantia, garamond,serif;
    first-letter:2em;
    }
#lorem:first-letter{
	font-size:2em;
	font-weight:bold;
	color:red;
	}
pour le CSS
Rebonjour.

Rien à proposer à part cibler plus précis :


#lorem > p:first-of-type:first-letter { /* ou  p:first-child:first-letter */
	font-size:2em;
	font-weight:bold;
	color:red;
	}

Bonne continuation.
Merci , Thierry.

Pardon de ne répondre que maintenant, mais j'ai l'impression que ça ne marche pas non plus. Je suis en train de revoir la structure de la page pour être certain que je n'ai pas fait une erreur... Je continue de tester. Je crois que la pseudo-classe ":first-letter" ne peut pas s'appliquer à la balise "section", mais doit effectivement s'appliquer à la balise "<p>", comme tu le suggères, mais il y a encore quelque chose qui cloche...

"La suite au prochain numéro"... à bientôt !
Modérateur
Bonjour,

Je viens d'essayer le morceau de code que tu as donné dans ton 2ème post et il fonctionne parfaitement chez moi sou Chrome...

Essaie de créer une nouvelle page chez toi juste avec ce morceau de code pour vérifier si il fonctionne de ton coté.
Il doit sûrement y avoir dans ton code css une class ou un id qui annule l'effet que tu souhaite donner à cette première lettre... Essaie de rajouter à la ligne first-letter le mot !important pour que cette valeur prenne la priorité sur les autres.

#lorem:first-letter{
	font-size:2em [#red][b]!important[/b][/#];
	font-weight:bold [#red][b]!important[/b][/#];
	color:red [#red][b]!important[/b][/#];
	}
Sujet clos
Aller à