[resolu]Probleme avec le bloc pre

content d'avoir pu mettre en ligne le résultat de mon dur labeur
je me suis empresse de valider le html et le css (pour ce dernier c'est ok)

mais pour l'html
quand je laisse le bloc <pre>
la validation est refusee
et
le probleme c'est que j'en ai besoin
et que je suis perdu
je ne sais pas pourquoi ça fait cela
j'ai essaye de rajouter <code> entre autre (suite à la recherche sur le site)
mais rien
alors si quelqu'un pouvait m'aider
test

merci d'avance
Modifié par mod52 (11 Aug 2005 - 08:44)

Bonjour,
PRE c'est comme P, pas de balise de type bloc dedans, donc pas de H2.

Rapidement, deux choses :

1. Le code HTML cité dans un bloc <pre> doit être "neutralisé" pour ne pas être interprété par le navigateur, mais affiché tel quel avec ses balises. Le fait de le mettre dans un <pre> ne suffit pas : il faut encoder chaque délimiteur de balise. C'est à dire que:
- le caractère < doit être écrit &lt;
- le caractère > doit être écrit &gt;
Il est facile, dans des éditeurs HTML texte comme HTML-Kit, d'automatiser cette conversion.

2. Je n'ai pas eu le temps de regarder ta CSS, mais je suppose que le positionnement de ton menu repose sur un centrage par les marges négatives ? Celui-ci est à revoir, car le premier item de ton menu à coulisse est rogné sans espoir de retour pour de nombreux utilisateurs (précision: je suis sur un très grand écran en haute résolution).
Modifié par Laurent Denis (11 Aug 2005 - 06:50)

en enlevant les balises <p> ===>ca marche
pour les <H2> j'ai du les viréés ===>sinon en mettant &lt; et &gt;
le resultat est <h2>bla bla </h2> (idem avec les <p>)

pour mon menu

==> en local (ça me deplace ce qui ce trouve en dessous)
#menu {
position: relative;
margin-top: auto;
margin-left: auto ;
text-align: center ;
z-index:100;
width: 100%;
}

je le met en ligne pour que tu vois

voila merci les gars
vos reponses me sont d'un grand reconfort

Salut,

Attention à l'écriture correcte des exemples ici. Merci de bien vouloir tenir compte des Règles du forum

Il y'a plusieurs choses curieuses dans ton code :

#menu {
position: relative;
margin-top: auto;
margin-left: auto ;
text-align: center ;
z-index:100;
width: 100%;
}

- l'élément "menu" a une largeur de 100% (il prend donc tout l'espace). Quel intérêt dans ce cas de lui donner une marge à gauche qui ne sera pas prise en compte ?
- si tu veux centrer "menu", c'est dans son parent qu'il faut déclarer le text-align center. Tu devrais peut-être relire le tuto sur le centrage.

EDIT : et quel est le rapport avec ton sujet et ton problème de <pre> ?
Modifié par Raphael (11 Aug 2005 - 07:54)

autant pour moi pour le menu
en ligne ça fonctionne
j'ai seulement un bug dans un sous-menu
lien1
lien2
**** ce que j'ai mis dans un menu js ne fonctionne pas ici ??
lien3
lien4

par contre j'ai encore une erreur dans la validation du html

ça a l'air de ressembler a l'erreur de tout a l'heure
sauf que c'est en dehors de <pre>

je vais relire les regles
EDIT : et quel est le rapport avec ton sujet et ton problème de <pre> ?
je repondait a Laurent Denis qui en controlant la validation a vu un bug dans le menu

pour le menu

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
text-align: center ;
list-style-type: none;
}
 
#menu {
position: relative;
margin-top: auto;
z-index:100;
width: 100%;
}

maintenant j'ai les 2 validation
mais le menu pousse tout
il m'aura quand meme fallu une paire d'heures
@+
Modifié par mod52 (11 Aug 2005 - 08:45)

mod52 a écrit :

maintenant j'ai les 2 validation
mais le menu pousse tout

Oui puisqu'il reste dans le flux (position relative).
Si tu veux éviter ce problème, il faut le sortir du flux.
Voir le tutoriel à la partie "Attention aux décalages !"

mod52 a écrit :
en enlevant les balises <p> ===>ca marche
pour les <H2> j'ai du les viréés ===>sinon en mettant &lt; et &gt;
le resultat est <h2>bla bla </h2> (idem avec les <p>)

Ahem... Je crains que tu ne saches pas trop à quoi sert un bloc <pre>.

Ce n'est pas une balise destinée à l'usage que tu en fais : <pre> sert essentiellement à afficher des lignes de code en respectant les espaces et les retours à la ligne, et avec les &lt; et &gt; pour que le balisage soit affiché, justement.

Si tu as simplement besoin d'une élément conteneur, utilise <div>.

salut,
j'ai bien compris a quoi sert le bloc pre
en il a ete mis dans le code du tutorial justement pour ce que tu m'as explique
je donc mettre un div a la place
merci