[RESOLU]Probleme avec p et liste ... - Forum Alsacréations : CSS et Standards Web

Auteur
Hum	# 25 Jan 2006 - 03:38:48
863 Posts	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 « joyeux » motards de Béthemont-La-Forêt et de ses environs,<br /> (sous l’égide des « Bielles de Jadis », Association bien connue d’amateurs de <br /> Motocyclettes anciennes de Pontchartrain (78760, « Seine et Oise ») a relevé un périlleux défi : Organiser une exposition de machine d’avant 1900 jusqu’à 1940, un défile en tenue d’époque ainsi qu’un concours d’élégance, une bourse d’échange de pièces d’avant 1970, et surtout une balade d’environ 30 kilomètre en forêt de Carnelle. Cette manifestation côtoyait le traditionnel et savoureux Marché Poitevinde Presles. Pari difficile mais réussi, au grand plaisir des spectateurs autant que des participants ainsi que des personnalités au nombre desquelles nous avons eu le plaisir de compter la présence remarquée de Monsieur le Député Maire de l’Isle-Adam, ainsi que de Monsieur le Maire de Presles toujours attentifs à la sauvegarde du patrimoine. Cette exposition se voulait le reflet de l’avancée technologique en France et en Europe depuis cette fin de 19ème siècle jusqu’à la tragique déclaration de guerre de 1940, trop de personnes ignorant le foisonnement créatif, sportif et productif français de cette époque où le motocyclisme n’avait rien à envier à l’automobile. Deux chapiteaux abritaient 41 motocyclettes d’avant 1940, pendant que plus de 20 machines d’avant 1960 attendaient sur le parking gardé le départ de la balade, côtoyant la bourse ou 19 engins d’avant 1960, des pièces détachées, accessoires, vêtements d’époque avaient attiré de nombreux amateurs ? Il est bien difficile de parler de chaque motocyclette, tant les modèles uniques ou rarissimes étaient nombreux et passionnants et dans un état de conservation exceptionnel.<br /> <ul> <dl> Citons néanmoins : </dl> <li>- Werner, La Motocyclette de 1899, la doyenne de ces instruments à courroies.</li> <li>- Terrot Motorette N°1 de 1906, N° 2 de 1911, N° 3 de 1913.</li> <li>- Peugeot Paris-Nice de 1913, Fabrique Nationale de 1913.</li> <li> - Motobécane MB1 de 1923, New Map Anzani arbre à cane en tête de 1926.</li> </ul> Ainsi que tant d’autres hélas disparues telles que Motoconfort, Gnome et Rhône, Dollar, Gillet d’Herstal,<br /> Monnet-Goyon, Paul-Antoine Perraud, Magnat Debon, Propulcycle Zurcher… Le défilé en tenue d ‘époque<br /> connut un grand succès, les musiques de tous nos ancêtres ayant réveillé autant de poignants souvenirs chez nos aînés qu’interloqué les enfants, suscitant l’intérêt de tous, voire la nostalgie de certains… <br /> La balade, encadrée de motos modernes et de deux véhicules d’assistance (dont un camion Peugeot de 1932 piloté de main de maître et en tenue d’époque bien sûr !) a parcouru sereinement les routes de Nointel, Beaumont, Viarmes, s’arrêtant au passage devant le château de Saint Martin du Tertre, pour revenir en traversant la splendide forêt de Carnelle. Toutes les machines ont vaillamment grimpé les cotes (avec l’aide, il est vrai d’un pousseur émérite, le plus sportif et le plus jeune parmi les organisateurs).<br /> Seule une crevaison a privé le pilote de la New Map de cette promenade, désolé de ne pouvoir Profiter de cette occasion unique au nord de la Loire de rouler avec ces très anciennes motocyclettes, leurs performances limité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 à Presles, quelques démonstrations de démarrage ont passionné les nombreux spectateurs jusqu’au moment de la remise des prix.<br /> Dimanche soir, devant les demandes pressantes des Preslois ainsi que des participants, les organisateurs, épuisés mais heureux, ont décidé de tenter de mieux faire le 25 avril 2004...<br /> Rendez-vous est donc pris… </p> Modifié par Hum (25 Jan 2006 - 12:16)
863 Posts
Laurent Denis	# 25 Jan 2006 - 04:23:48
7888 Posts	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) 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éanmoins :</p> <ul> <li>- Werner, La Motocyclette de 1899...</li> <li>...<li> </ul> <p>Ainsi que tant d’autres hé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... : 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’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 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 (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) Je ne fais que passer
7888 Posts
Hum	# 25 Jan 2006 - 11:42:49
863 Posts	Merci beaucoup. Je m'en suis donc sorti comme tu me l'as indiqué. html <p class="citation">Citons néanmoins :</p> <ul class="citationterme"> <li>Terrot Motorette N°1 de 1906, N° 2 de 1911, N° 3 de 1913.</li> <li>Peugeot Paris-Nice de 1913, Fabrique Nationale de 1913.</li> <li>Motobécane MB1 de 1923, New Map Anzani arbre à cane en tê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;}
863 Posts
Olivier	# 25 Jan 2006 - 11:51:03
Modérateur 5807 Posts	Salut, pourquoi n'utilises tu pas un blockquote puisque c'est une citation ? La FAQ répond aux questions fréquemment posées. Vérifiez qu'elle ne contient pas une réponse à votre problème.
Modérateur 5807 Posts
Igor	# 25 Jan 2006 - 11:51:10
Modérateur 5646 Posts	Hum a écrit : Merci beaucoup. Je m'en suis donc sorti comme tu me l'as indiqué. C'est donc un problème résolu: Comment éditer un sujet sur le forum, et comment classer un sujet en [Résolu] ?
Modérateur 5646 Posts
Hum	# 25 Jan 2006 - 12:16:29
863 Posts	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
863 Posts
Prévenir un modérateur

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles

Nikozen : Hébergement - Réalisation : Alsacreations.fr