[xhtml]qu'est-ce qui va pas ?

[Tintaspi]

Le validator me dit que ma page n'est pas valide dans cette partie du code:

<blockquote><div class="codee"><div class="titrecodee">blabla1:</div><code><blockquote><p>
blabla2
<br /><br /></p></blockquote></code></div></blockquote>

avec comme déclaration:

div.codee{color:dark;
background-color:aliceblue;
}
div.titrecodee{color:red;
background-color:#AEBFE2;
text-align:center;
}

le message du validator:

Line 26, column 86: document type does not allow element "blockquote" here; missing one of "object", "ins", "del", "map", "button" start-tag

...odee">blabla1:</div><code><blockquote><p>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

vu que les balises sont bien imbriquée, et vu les messages du validator, je dirais que le problème vient d'une balise qui ne devrait pas êtres imbriquée dans une autre, mais je vois pas laquelle

[Nyro Xeo]

Voici ton code, mieux indenté :

<blockquote>
<div class="codee">
	<div class="titrecodee">blabla1:</div>
	<code>
		<blockquote>
			<p>blabla2<br /><br /></p>
		</blockquote>
	</code>
</div>
</blockquote>

À partir de là, on voit assez les problèmes. Donc <code> est une balise inline. Les balises de type inline ne peuvent pas contenir de balises de type bloc (ce qui est le cas de <blockquote>).

D'ailleurs, la preuve est que ce code (sans <code>) est valide :

<blockquote>
<div class="codee">
	<div class="titrecodee">blabla1:</div>
		<blockquote>
			<p>blabla2<br /><br /></p>
		</blockquote>
</div>
</blockquote>

Donc il faut enlever <code>. Ou alors tu peux le mettre correctement dans une balise de type bloc, comme par exemple :

<blockquote>
<div class="codee">
	<h3>blabla1:</h3>
		<blockquote>
			<p>
				<code>blablabl2<br /><br /></code>
			</p>
		</blockquote>
</div>
</blockquote>

Enfin voilà quoi !

Maintenant, quelques truc à dire au niveau de la sémantique : c'est horrible !

De toute évidence, tu cherches à mettre en page un code ? Il existe une balise qui est faite pour ça : <pre> !

Utilise la, c'est fait pour ! C'est pour mettre un texte préformaté, donc il n'y aura même pas besoin de mettre les retours à la ligne. Cependant, si tu ne veux pas ça non plus, alors dans ce cas, utilise une balise <div> et mets une classe .code :

<div class="code">
<code>Ici le code</code>
</div>

Mais en tout cas pas dans une balise <blockquote> !!! <blockquote>, c'est pour des citations (et pas des citations de code), donc je te déconseille fortemenet <blockquote> pour ça !

Deuxième chose : le <div class="titrecode"> ! Tu sais qu'il existe une balise faite exprès pour les titres ? <hn> !

C'est fait pour, donc utilise le !

Voilà, c'était juste pour dire ça !

[Tintaspi]

ouai pour la sémantique, j'ai remarqué que c'est pas super!

le plus simple serait que j'explique ce que je veux, tu pourras peut-êtres me dire comment faire:

j'ai un texte (c'est pas vraiment du code, mais plus un algorithme en français)

je voudrais donc:

- le titre (centré) sur un fond différent de celui de la page

- le code là aussi sur un fond différent de la page (pas le même que le titre)

d'où l'utilisation du <div>

le problème c'est que le texte et la limite de ma zone de couleur, sont au même endroit et je voudrais laisser un espace

si je prend un <pre> + une tabulation, le problème est que si ma ligne doit s'afficher sur plusieurs lignes, la seconde ligne commence de nouveau à la limite

d'où l'utilisation du blockquote

tu vois comment faire ça en plus propre ?

[Nis]

Pour le titre tu peux faire :

// HTML
<h1>Mon titre</h1>

// CSS
h1 {
 background-color: #ffffff;
 text-align: center;
 width: 200px; (éventuellement ...)
}

Pour la partie code, tu peux utiliser la balise code ...

Je pense que c'est sémantiquement mieux que la balise pre ... A confirmer.

// HTML
<code>
 Voici mon code
    C'est super !
</code>

// CSS
code {
 background-color: #ffffff;
 width: 200px; (éventuellement)
}

J'ai pas très bien compris le problème de ligne ...

Mais je suppose que ton problème peut se résoudre avec les propriétés

padding: 
margin: 

Exemple :
padding-bottom: 10px (ou -top, -left, -right)
margin: 0 0 10px 0; (haut, droite, bas, gauche)

Tu peux leur donner une taille en pixels ...

Par exemple, avec padding: tu vas avoir la couleur qui va se prolonger après ta derniere ligne (je pense que c'est ça que tu veux). Avec margin:, tu vas avoir un certains espace entre le bloc où tu appliques le margin et le bloc suivant.

Ce n'est pas facile à expliquer, amuse-toi un peu avec ces propriétes.

Et dans ton code HTML :

// HTML
<div class="monCode">
 <h1>Titre descriptif du code</h1>
 <code>Mon code</code>
</div>

Voila ... je ferai comme ça, mais il faut voir si on est bien sur la même longueur d'onde

[Tintaspi]

c'était presque ça, un petit truc à changer, et c'est bon

merci à tous les deux !