Hello,
là commence a m'emmeler les pinceaux...
ma liste me fait sauter mon style appliqué a <p>.

edit : en fait je veux faire une liste ds un p, ...
css:
p {font-size:0.7em; font-family:Verdana, Arial, Helvetica, sans-serif; 
   margin:15px 20px 26px 15px;}

ul {display:inline; font-size:0.7em; font-family:Verdana, Arial, Helvetica, sans-serif; 
   margin:15px 20px 26px 15px;}

<p><img class="floatleft" src="./images/histo03.jpg" alt="Localisation Presles" /><img class="floatleft" src="./images/histo033.jpg" alt="Localisation Presles" />

Le 27 avril 2003, s’est déroulée la « 1ère Bourse-Expo des courroies de carnelle » <a href="#pop">à Presles</a> (Val d’Oise).<br />
Un petit groupe de &laquo; joyeux &raquo; motards de B&eacute;themont-La-For&ecirc;t et de ses environs,<br />
(sous l&#8217;&eacute;gide des &laquo; Bielles de Jadis &raquo;, Association bien connue d&#8217;amateurs de <br />
Motocyclettes anciennes de Pontchartrain (78760, &laquo; Seine et Oise &raquo;) 
a relev&eacute; un p&eacute;rilleux d&eacute;fi :
Organiser une exposition de machine d&#8217;avant 1900 jusqu&#8217;&agrave; 1940, un d&eacute;file en tenue d&#8217;&eacute;poque ainsi qu&#8217;un concours d&#8217;&eacute;l&eacute;gance, 
une bourse d&#8217;&eacute;change de pi&egrave;ces d&#8217;avant 1970, et surtout une balade d&#8217;environ
30 kilom&egrave;tre en for&ecirc;t de Carnelle. Cette manifestation c&ocirc;toyait le traditionnel 
et savoureux March&eacute; Poitevinde Presles.

Pari difficile mais r&eacute;ussi, au grand plaisir des spectateurs autant que des participants ainsi
que des personnalit&eacute;s au nombre desquelles nous avons eu le plaisir de compter la pr&eacute;sence remarqu&eacute;e
de Monsieur le D&eacute;put&eacute; Maire de l&#8217;Isle-Adam, ainsi que de Monsieur le Maire de Presles toujours attentifs &agrave; la sauvegarde du patrimoine. Cette exposition se voulait le reflet de l&#8217;avanc&eacute;e technologique en France et en Europe depuis cette fin de 19&egrave;me si&egrave;cle jusqu&#8217;&agrave; la tragique d&eacute;claration
de guerre de 1940, trop de personnes ignorant le foisonnement cr&eacute;atif, sportif et productif fran&ccedil;ais 
de cette &eacute;poque o&ugrave; le motocyclisme n&#8217;avait rien &agrave; envier &agrave; l&#8217;automobile.
Deux chapiteaux abritaient 41 motocyclettes d&#8217;avant 1940, pendant que plus de 20 machines d&#8217;avant 1960 
attendaient sur le parking gard&eacute; le d&eacute;part de la balade, c&ocirc;toyant la bourse ou 19 engins 
d&#8217;avant 1960, des pi&egrave;ces d&eacute;tach&eacute;es, accessoires, v&ecirc;tements d&#8217;&eacute;poque 
avaient attir&eacute; de nombreux amateurs ?
Il est bien difficile de parler de chaque motocyclette, tant les mod&egrave;les uniques ou rarissimes &eacute;taient nombreux 
et passionnants et dans un &eacute;tat de conservation exceptionnel.<br />

        
    <ul>
      <dl>
        Citons n&eacute;anmoins : 
      </dl>
      <li>- Werner, La Motocyclette de 1899, la doyenne de ces instruments &agrave; 
        courroies.</li>
      <li>- Terrot Motorette N&deg;1 de 1906, N&deg; 2 de 1911, N&deg; 3 de 1913.</li>
      <li>- Peugeot Paris-Nice de 1913, Fabrique Nationale de 1913.</li>
      <li> - Motob&eacute;cane MB1 de 1923, New Map Anzani arbre &agrave; cane 
        en t&ecirc;te de 1926.</li>
    </ul>
    
Ainsi que tant d&#8217;autres h&eacute;las disparues telles que Motoconfort, Gnome et Rh&ocirc;ne, Dollar, Gillet d&#8217;Herstal,<br />
Monnet-Goyon, Paul-Antoine Perraud, Magnat Debon, Propulcycle Zurcher&#8230; Le d&eacute;fil&eacute; en tenue d &#8216;&eacute;poque<br /> connut un grand 
          succ&egrave;s, les musiques de tous nos anc&ecirc;tres ayant r&eacute;veill&eacute; 
          autant de poignants souvenirs chez nos a&icirc;n&eacute;s qu&#8217;interloqu&eacute; 
          les enfants, suscitant l&#8217;int&eacute;r&ecirc;t de tous, voire la 
          nostalgie de certains&#8230;
		  <br />
		  La balade, encadr&eacute;e de motos modernes et de deux v&eacute;hicules d&#8217;assistance 
            (dont un camion Peugeot de 1932 pilot&eacute; de main de ma&icirc;tre 
            et en tenue d&#8217;&eacute;poque bien s&ucirc;r !) a parcouru sereinement 
            les routes de Nointel, Beaumont, Viarmes, s&#8217;arr&ecirc;tant au 
            passage devant le ch&acirc;teau de Saint Martin du Tertre, pour revenir 
            en traversant la splendide for&ecirc;t de Carnelle.
			Toutes 
          les machines ont vaillamment grimp&eacute; les cotes (avec l&#8217;aide, 
          il est vrai d&#8217;un pousseur &eacute;m&eacute;rite, le plus sportif 
          et le plus jeune parmi les organisateurs).<br />
          Seule une crevaison a priv&eacute; le pilote de la New Map de cette 
          promenade, d&eacute;sol&eacute; de ne pouvoir Profiter de cette occasion 
          unique au nord de la Loire de rouler avec ces tr&egrave;s anciennes 
          motocyclettes, leurs performances limit&eacute;es ainsi que leur quasi-absence 
          de freinage leur interdisant les balades et autres rallyes de Motos 
          de collection par trop rapide.<br />
          De retour &agrave; Presles, quelques d&eacute;monstrations de d&eacute;marrage 
          ont passionn&eacute; les nombreux spectateurs jusqu&#8217;au moment 
          de la remise des prix.<br />
          Dimanche soir, devant les demandes pressantes des Preslois ainsi que 
          des participants, les organisateurs, &eacute;puis&eacute;s mais heureux, 
          ont d&eacute;cid&eacute; de tenter de mieux faire le 25 avril 2004...<br />
          Rendez-vous est donc pris&#8230; 
</p>

Modifié par Hum (25 Jan 2006 - 12:16)
Bonjour Hum,

Voilà une erreur (tout à fait compréhensible) très intéressante et très pédagogique. Elle est même presque merveilleuse (C'est une excellente journée qui commence, je crois) Smiley smile

En effet, en (X)HTML, les éléments <p> ne peuvent pas contenir de listes <ul>, lesquelles ne peuvent pas contenir directement des éléments <dl>, lesquelles ne peuvent pas contenir du texte anonyme. Et cette erreur de validité HTML conduit directement au problème CSS... alors que beaucoup de gens, volontairement ou involontairement, ne se soucient pas de réaliser d'abord un site valide avant de s'occuper de sa présentation...

En cas de problème de rendu, toujours commencer par vérifier la validité du code (X)HTML

Pour une solution vite fait, le code HTML valide à utiliser pourrait être, par exemple :


<p>...</p>
<p>Citons n&eacute;anmoins :</p>
<ul>
<li>- Werner, La Motocyclette de 1899...</li>
<li>...<li>
</ul>
<p>Ainsi que tant d&#8217;autres h&eacute;las disparues...</p>


Il suffit, partant de là (ou d'un autre code valide équivalent), de modifier les styles en conséquence.




Mais si je peux me permettre de creuser un peu... Smiley cligne :

Ce type de code invalide sera traité par chaque navigateur selon ses propres processus de traitement d'erreur, potentiellement variables de l'un à l'autre, car ils ne sont soumis actuellement à aucune spécification : à moins d'avoir une parfaite connaissance de ces processus pour chaque navigateur (ce qui est en fait illusoire actuellement, même à un très haut niveau d'expertise), tu t'en remets donc en quelque-sorte au hasard pour déterminer l'arbre du document, c'est à dire la structure finale réelle de ton document telle que le navigateur va l'utiliser pour le rendre à l'écran avec CSS et le manipuler avec js.

Les styles CSS, on l'ignore trop souvent, ne sont en effet pas appliqués au code HTML que vous avez écrit, mais au code tel qu'il a été interprété et corrigé par le navigateur, qui s'efforcera de rétablir un code valide et donc utilisable. Le résultat peut être très loin des attentes de l'auteur, comme c'est le cas ici.

Pour les curieux, un exemple : ici, IE, FF et Opera considèrent que le paragraphe se ferme avant l'ouverture de la liste <ul>, et insèrent une balise </p> avant le <ul>. Cette décision est logique dans la mesure où la balise de fermeture des paragraphes est optionnelle en HTML et où le document, même s'il est peut-être formellement en XHTML, est traité en tant que text.html. C'est d'ailleurs ce qui conduit ces 3 navigateurs à adopter dans ce cas précis la même méthode de traitement de l'erreur, alors qu'ils auraient pu diverger.

Firefox traite de même la fermeture finale de paragraphe en la transformant en <p></p> vide. Opera, lui, fait directement disparaître le </p> et ne génère rien dans l'arbre du document à ce point. Je n'ai pas vérifié quel était le choix fait par IE, mais on peut noter au passage que, dans tous ces navigateurs, il est totalement inutile de mettre une liste <ul> dans un paragraphe puisque cette structure invalide est obligatoirement neutralisée en HTML et (X)HTML traité comme tel.

On se retrouve donc, au final, avec un premier paragraphe contenant du texte, suivi par une liste ul au contenu invalide, suivi par du texte anonyme (Celui commençant par Ainsi que tant d&#8217;autres hélas disparues...), suivi éventuellement par un paragraphe vide...

Tout à fait logiquement, le contenu de <ul> et le texte anonyme ne peuvent pas être stylés par une règle p {...} comme l'auteur le souhaitait, puisqu'ils ne sont pas dans un <p> une fois le code corrigé par ces navigateurs Smiley lol

On a donc structuré et stylé pour rien, sauf que le navigateur et l'auteur ont dû travailler un peu plus que si le code avait été valide. C'est un très bel exemple, très simple, de la nécessité constante de ne travailler que sur des structures valides... et donc prévisibles et faisant gagner du temps , ce qui est tout l'intérêt des standards Web Smiley cligne

(En passant, pour les vraiment très curieux, voir le récent billet de Yan Hyxon : Tag Soup: Crazy parsing adventures, particulièrement révélateur.)
Modifié par Laurent Denis (25 Jan 2006 - 06:01)
Merci beaucoup.
Je m'en suis donc sorti comme tu me l'as indiqué.
html
 <p class="citation">Citons n&eacute;anmoins :</p>

<ul class="citationterme">

<li>Terrot Motorette N&deg;1 de 1906, N&deg; 2 de 1911, N&deg; 3 de 1913.</li>
<li>Peugeot Paris-Nice de 1913, Fabrique Nationale de 1913.</li>
 <li>Motob&eacute;cane MB1 de 1923, New Map Anzani arbre &agrave; cane en t&ecirc;te de 1926. </li>
</ul>

<p>


css
.citation    {
                 position:relative;
                 font-family:Verdana, Arial, Helvetica, sans-serif;
			     font-size:0.8em; 
			     left:70px;top:0px;
			     margin:2px 0px 2px 0px;
			     padding:0px 0px 0px 0px;} 
			 
.citationterme   {
                    position:relative;
                    font-family:Verdana, Arial, Helvetica, sans-serif;
			        font-size:0.7em; 
			        left:70px;
			        top:0px;
		        	margin:0px 0px 2px 0px;
			        padding:0px 0px 0px 0px;} 
C'est plus une liste qu'une citation, mais comme le texte est : Citons néanmoins...ben j'ai repris l'intitulé pour la classe,...
regle