28172 sujets

CSS et mise en forme, CSS3

Difficulté pour faire appliquer une classe

Bonjour,

Je tourne en rond depuis un moment, je n'arrive pas à savoir ce qui ne va pas.

Sur la page http://www.etiennechampollion.com/evenements/5/recital-notre-sentier/ , j'ai une id #affiche, qui contient plusieurs paragraphes, obéissant à différentes classes.

À un moment, j'ai une classe nommée .affichedetails, qui devrait afficher du texte en italique et en taille normale, et là ça ne s'applique pas.

Je n'arrive pas à savoir si c'est un problème d'héritage, ou bien la classe .affichedetails qui n'est pas prise en compte.

Est-ce que quelqu'un peut me dire de quel côté je dois chercher ?

Merci

Voici le code :



<ul id="affiche">

<p class="nom">Récital "Notre Sentier"</p>

<p class="affichedate">Lundi 19 septembre 2011</p>

<p>19 h 00</p>

<p><a href="http://www.etiennechampollion.com/locations/5/studio-raspail/">Studio Raspail</a></p>

<p>216,boulevard Raspail</p>

<p class="afficheville">Paris, France</p>

<a href="#plan">Voir le plan</a>

<p>

<ul class="affichedetails">

<p>Récital textes et musiques</p>
<p><strong>Mise en scène :</strong> Pierre Fesquet</p>
<p><strong>Récitants :</strong> Marie-Christine Barrault, Pierre Fesquet</p>
<p><strong>Piano, Accordéon :</strong> Etienne Champollion</p>
<p>Œuvres de Chopin, Satie, Villa-Lobos, Severac, etc…</p>
</ul>

</ul>




#affiche {
	
	margin: auto;
	margin-bottom: 20px;	
	width: 399px;
	background-color: #941601;
	background-repeat: no-repeat;
	text-align: center;
	padding-top: 80px;
	padding-bottom: 80px;
	padding-left: 50px;
	padding-right: 50px;
	font-size: large;
	-moz-transition: all 1.0s ease-in-out;
	-webkit-transition: all 1.0s ease-in-out;
	-ms-transition: all 1.0s ease-in-out;
	-o-transition: all 1.0s ease-in-out;
	
}

#affiche:hover {
	background-color: #a02815;
   -moz-transition: all 1.0s ease-in-out;
	-webkit-transition: all 1.0s ease-in-out;
	-ms-transition: all 1.0s ease-in-out;
	-o-transition: all 1.0s ease-in-out;

#affiche .nom {
	
font-size: 2em;

}

#affiche .affichedate, #affiche .afficheville {
font-size: 1.3em;
}

.affichedetails p {
	font-style: italic;
	font-size: 1em;
	}
Modérateur
Bonjour,

Tu n'utilises pas les éléments HTML correctement. UL sert à définir des listes sous cette forme :


<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>


Je t'invite fortement à utiliser le validateur W3C afin de corriger les erreurs dans la structure HTML. Ça réglera beaucoup de problèmes. Smiley cligne
Merci de ta réponse.

En fait, je ne peux pas changer le contenu du <ul> pour y mettre des <li>, car il est généré par l'éditeur de Wordpress, et arrive avec des <p>.

Donc si je comprends bien, à la place de <ul> il faut que j'utilise un élément html compatible avec des paragraphes ?
Modérateur
C'est quand même étonnant que l'éditeur ne permettre pas de créer une liste à base de ul et li. En es-tu certain? Fais le test en partant d'un code vierge.

Sinon, effectivement, tu peux utiliser un div pour englober la liste de paragraphes.
Si on passe en mode html, on fait ce qu'on veut avec l'éditeur.

Mais en mode WYSIWYG, quand l'utilisateur appuie sur "entrée", ça crée un nouveau paragraphe avec des <p>.
Le mode WYSIWYG c'est pas ce qu'il y a de mieux pour coder. Smiley decu
Modifié par jmlapam (18 Sep 2011 - 15:53)
Modérateur
jmlapam a écrit :
Le mode WYSIWYG c'est pas ce qu'il y a de mieux pour coder. Smiley decu


En effet, mais lorsqu'on propose aux clients de pouvoir éditer le contenu de leur site, c'est quand même ce qu'il y a de plus simple pour eux.
jmlapam a écrit :
Le mode WYSIWYG c'est pas ce qu'il y a de mieux pour coder. Smiley decu


Oui, je sais bien.

Le codage, c'est mon affaire. Mais ça n'est pas l'affaire de l'utilisateur du site. Lui, doit pouvoir saisir des textes en WYSIWYG.
Tony Monast a écrit :
Je viens de tester un démo de Wordpress, et j'ai été en mesure de créer une liste à base de ul et li directement en mode WYSIWYG.


Ah, alors je vais regarder l'éditeur de plus près. Enfin, en même temps ce n'est pas tout à fait l'éditeur de Wordpress, c'est l'éditeur WYSIWYG d'un plugin qui permet de gérer des listes d'évènements.

Enfin, sur tes conseils, je m'en suis sorti en remplaçant mes <ul> par des <div>, et cela fonctionne.

Merci beaucoup.

Je passe au validator pour tenter de corriger les autres erreurs, du coup.
Sujet clos
Aller à