5568 sujets

Sémantique web et HTML

Pages :
bonjour,

voilà, cela fait plusieurs jours que je me creuse la tête, mais rien n'y fait...
Pour résumer ma situation, j'ai une page qui contient deux formulaires (donc du php). Je les ai mis dans un tableau. (petite précision: pensant au départ que c'était peut-être dû au tableau, j'ai aussi essayé sous forme de blocs grâce au CSS, mais le problème demeure... donc, cela ne semble pas venir de ça).
Sous Mozilla tout marche très bien (même mon php, ce qui n'est pas le cas sous IE...)
Je me suis aperçu qu'IE fusionne mes deux formulaires ensemble et en ôte une partie au passage.
voilà le code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>commander</title>
<link rel="stylesheet" type="text/css" href= "design.css">
<style type="text/css">
</style></head><body>
<div id="page">
<div id="logo">
</div>

<div id="entete">
</div>

<div id="menu"> 
	<a href="accueil.html"><img src="boutons%20de%20navigation/accueil.gif" alt"bouton navigation accueil"></a>
	<a href="collections.html"><img src="boutons%20de%20navigation/collections.gif" alt"bouton navigation collections"></a>
	<a href="commander.html"><img src="boutons%20de%20navigation/commander_actif.gif" alt"bouton navigation commander"></a>
	<a href="mailto:keocreations@free.fr"><img src="boutons%20de%20navigation/contact.gif" alt"bouton de navigation contact"></a>
	<a href="portrait.html"><img src="boutons%20de%20navigation/portrait.gif" alt"bouton de navigation portrait"></a>
	<a href="curieuses.html"><img src="boutons%20de%20navigation/curieuses.gif" alt"bouton de navigation curieuses"></a><br>
</div>
	
<div id="contenu">
	<h2>Conditions générales de vente :</h2><a href="conditions_de_vente.html" title="Cliquer pour accéder aux conditions de vente"/>cliquer ici</a> pour y accéder.</span><br>
	<p class="indent">En remplissant ci-dessous le bon de commande, vous reconnaissez avoir pris connaissance des conditions générales de vente <a
 href="conditions_de_vente.html" title="Cliquer pour accéder aux conditions de vente"/>ici</a> et les accepter sans aucune réserve.</p>
	<p class="indent">Les frais d'envoi vous sont offerts en FRANCE METROPOLITAINE. Pour des envois vers d'autres
destinations, n'hésitez pas à me contacter <a href="mailto:keocreations@free.fr" title="Cliquer pour m'envoyer un email"/>ici</a> pour le supplément.</p>
	<p class="indent">Nous souhaitons attirer votre attention sur le fait que certains bijoux peuvent potentiellement avoir une légère différence de couleurs
comparativement à la photo que vous découvrez sur ce site internet pour
des raisons intrinsèques à la photographie numérique.</p>
	<p class="indent">Vous recevrez votre ou vos bijoux dans des jolis emballages à s'offrir ou à offrir (dans ce dernier cas vous
recevrez une photographie numérique par messagerie du ou des bijoux dans leurs emaballages que recevra le destinataire).</p><br><br> 
	
	<table>
		<tr>
		<th>Bon de commande :</th>
		<th>Il s'agit d'un cadeau :</th>
		</tr>
		<td>
		<p><p class="indent">Tous les champs marqués avec un * sont à remplir OBLIGATOIREMENT. Merci de votre compréhension.</p></p><br><br>
		<form method="post" action="formulairecommande.php" name="FormulaireCommande">
			<fieldset>
				<legend>Vos coordonnées</legend> 
				<p><p class="different">Nom* :<input type="text" name="Nom"/></p></p>
				<p><p class="different">Prénom*:<input type="text" name="Prenom"/></p></p>
				<p><p class="different">E-mail*:<input type="text" name="email"/></p></p>
				<label><p class="different">Adresse*:<textarea name="Adresse" cols="12" rows="3"</textarea></p></label>
				<p><p class="different">Code Postal* :<input type="text" name="Codepostal"/></p></p>
				<p><p class="different">Ville* :<input type="text" name="Ville"/></p></p>
				<p><p class="different">Pays* :<input type="text" name="Pays"/></p></p>
			</fieldset>
			<fieldset>
			<legend>Référence des Bijoux :</legend> 
				<p><p class="different">Référence bijou 1:<input type="text" name="reference1"/></p></p>
				<p><p class="different">Référence bijou 2:<input type="text" name="reference2"/></p></p>
				<p><p class="different">Référence bijou 3:<input type="text" name="reference3"/></p></p>
			</fieldset>
			<fieldset>
			<legend>Confirmation de vente :</legend> 
				<p>J'ai lu et j'accepte les conditions de vente* : 
				<label><input type="radio" name="Cdvente" value="oui" /> Oui</label><br /></p>
			</fieldset>
			<p><input name="Envoyer" value="Envoyer" type="submit"/> <input name="annuler" value="Annuler" type="reset"/></p>
			</p>
		</form>
		</td>
				
		<td>
		<p><p class="indent">Vous souhaitez offrir un ou des bijoux à une personne et préférez qu'elle le reçoive directement alors remplissez les champs du
formulaire de vos coordonnées personnelles au préalable, puis compléter le formulaire ci-dessous.<br>Tous les champs marqués avec un * sont à remplir
OBLIGATOIREMENT. Merci de votre compréhension.</p></p><br><br>
		<form method="post" action="commandecadeau.php" name="FormulaireCadeau">
			<fieldset>
				<legend>Les coordonnées du destinataire:</legend> 
				<p><p class="different">Nom* :<input type="text" name="NomDestinataire"/></p></p>
				<p><p class="different">Prénom* :<input type="text" name="PrenomDestinataire"/></p></p>
				<p><p class="different">Prénom* :<input type="text" name="PrenomDestinataire"/></p></p>
				<label><p class="different">Adresse d'envoi* :<textarea name="adresse"cols="12" rows="3"</textarea></p></label>
				<p><p class="different">Code postal* :<input type="text" name="codepostal"/></p></p>
				<p><p class="different">Ville* :<input type="text" name="ville"/></p></p>
				<p><p class="different">Pays* :<input type="text" name="Pays"/></p></p>
			</fieldset>
			<fieldset>
				<legend>Réference des bijoux à offrir :</legend>
				<p><p class="different">Référence bijou 1:<input type="text" name="reference1"/></p></p>
				<p><p class="different">Référence bijou 2:<input type="text" name="reference2"/></p></p>
				<p><p class="different">Référence bijou 3:<input type="text" name="reference3"/></p></p>
				<label><p class="different">Message pour accompagner l'envoi :<br>
                <textarea name="message" rows="10" cols="33"></textarea>
				</p></label>
			</fieldset>
			<fieldset>
			<legend>Confirmation de vente :</legend> 
				<p>J'ai lu et j'accepte les conditions de vente* : 
				<label><input type="radio" name="Cdvente" value="oui" /> Oui</label><br /></p>
			</fieldset>
			<p><input name="Envoyer" value="Envoyer" type="submit"/> <input name="annuler" value="Annuler" type="reset"/></p>
			</p>
			</form>
			</td>
		</tr>
	</table><br><br>
	<p>Vous recevrez un message de confirmation par e-mail très rapidement.<br>Si vous ne recevez pas de confirmation de ma part c'est qu'un problème est survenu. N'hésitez pas alors à me recontacter.<br>Merci de votre confiance.</p>
	<h4>Pour faire connaître le site de Keo à vos ami(e)s cliquez <a href="faire_connaitre.html">ici</a><img src="boutons%20de%20navigation/mailbox%20RED.png"></h4></br>
	<br></div>

<div id="menu">
	<a href="accueil.html"><img src="boutons%20de%20navigation/accueil.gif" alt"bouton navigation accueil"></a>
	<a href="collections.html"><img src="boutons%20de%20navigation/collections.gif" alt"bouton navigation collections"></a>
	<a href="commander.html"><img src="boutons%20de%20navigation/commander_actif.gif" alt"bouton navigation commander"></a>
	<a href="mailto:keocreations@free.fr"><img src="boutons%20de%20navigation/contact.gif" alt"bouton de navigation contact"></a>
	<a href="portrait.html"><img src="boutons%20de%20navigation/portrait.gif" alt"bouton de navigation portrait"></a>
	<a href="curieuses.html"><img src="boutons%20de%20navigation/curieuses.gif" alt"bouton de navigation curieuses"></a><br>
</div>
</div>

</body></html>


je me suis "amusée" à mettre dans deux fichiers html chacun des formulaires, et ils sont bien lu sous mozilla mais à chaque fois, une partie manque quand je les ouvre sous IE.
Je tourne en rond, et là, je commence à avoir le tournis...
Auriez-vous une idée? Voyez vous quelque chose que je ne vois pas?
Merci de votre aide
Bonjour,

Ce n'est pas forcément la cause de ton problème, mais ton document contient un certain nombre d'erreurs que le validateur HTML pourra te signaler. La première chose à faire est de les corriger, ça permettra d'être sûr que ton souci ne vient pas de là. Smiley smile
je suis passée par un autre validateur W3C. J'avais effectivement abusé des <p> </p>... et ai donc fait un grand nettoyage. Une erreur subsiste néanmoins (mais je ne comprend pas de quoi il est question!...)
    <label><p class="different">Adresse*:<textarea name="Adresse" cols="12" rows="3"</textarea></p></label>

Erreur suivante...

Erreur à la colonne 31:  type de document ne permet pas l'élément "P" ici; manque un de "OBJECT", "MAP", "BUTTON" de l'étiquette de début (type #65)
Salut,

Un textarea ne peut pas être contenu dans une balise de paragraphe.

Un élément de type Bloc ne peut pas contenir un autre élèment de type bloc. Pour les experts, c'est bien comme cela qu'il faut le dire, ou je fait fausse route ? Smiley lol
Administrateur
Super_baloo8 a écrit :

Un élément de type Bloc ne peut pas contenir un autre élèment de type bloc. Pour les experts, c'est bien comme cela qu'il faut le dire, ou je fait fausse route ? Smiley lol

Au contraire, un élément de type bloc peut contenir des éléments de type bloc. Heureusement, sinon on ne pourrait jamais mettre de div dans un div Smiley smile

En fait il y'a quelques exceptions à la règle, tout simplement :
http://forum.alsacreations.com/faq/faq-62-Balises-bloc-et-en-line--les-exceptions.html
Modifié par Raphael (10 May 2007 - 14:59)
a écrit :
En fait il y'a quelques exceptions à la règle, tout simplement :
http://forum.alsacreations.com/faq/faq-62-Balises-bloc-et-en-line--les-exceptions.html


J'avais demandé un expert Raphaël, pas toi Smiley tusors

Non, je rigole Smiley cligne

J'essayez d'apprendre le vocabulaire css et tout ce qui vas avec. Merci pour la correction. Tu ne m'aurais pas donné ce lien que j'aurais déjà du lire Smiley fache , j'aurais cru que les Div étaient la seul exception. Mais ca n'avait rien à voir du tout. Merci Raphaël !
Modifié par Super_baloo8 (10 May 2007 - 15:05)
a écrit :
Un textarea ne peut pas être contenu dans une balise de paragraphe.

Ah bon, mais alors il est contenu dans quoi?!?!?
Administrateur
klaviebel a écrit :
Un textarea ne peut pas être contenu dans une balise de paragraphe.

Ah bon, mais alors il est contenu dans quoi?!?!?
Tout bloc... sauf un paragraphe (ou un titre)... ou alors dans rien du tout : il se suffit à lui-même Smiley smile
Merci Raphael! Smiley smile

Sinon, malgré le nettoyage opéré dans mon fichier html, mon problème n'est pas résolu Smiley decu
Sous IE, je n'ai toujours qu'une partie des infos qui apparaissent: c'est-à-dire la moitié de mon premier formulaire collé avec la dernière partie de mon formulaire...
Auriez-vous une autre idée?
Merci
klaviebel a écrit :
Un textarea ne peut pas être contenu dans une balise de paragraphe.

Ah bon, mais alors il est contenu dans quoi?!?!?
En fait, si, un textarea peut être contenu dans un paragraphe, et il ne doit pas apparaître directement dans le formulaire. Dans ces cas-là, l'idéal est de faire un petit test avec le validateur. Smiley smile
a écrit :
En fait, si, un textarea peut être contenu dans un paragraphe, et il ne doit pas apparaître directement dans le formulaire.

Je ne comprends pas ce que la deuxième partie de la phrase veut dire. Excuses-moi je ne maitrise pas très bien le vocabulaire de la construction de site....
En tous les cas, le validateur W3C n'a pas accepté le fait d'avoir un textarea contenu dans un paragraphe.
NB: Il n'aime pas non plus qu'un paragraphe soit contenu dans un label...

Dur dur la construction de site... surtout lorsqu'il faut compter avec les bugs sous IE... (je ne comprends pas qu'il n'y ai pas un putsch massif contre IE!)
En fait, un textarea dans un paragraphe est entièrement correct.
Par contre ce qui ne l'est pas, c'est le p dans le label. Un label est un élément de type en ligne, qui n'accepte donc que des éléments en ligne.
IL y a deux erreurs parce que 1/le p dans le label, 2/le textarea dans le label.
Modifié par QuentinC (11 May 2007 - 07:09)
merci pour vos réponses et explications.
a écrit :
Par contre ce qui ne l'est pas, c'est le p dans le label. Un label est un élément de type en ligne, qui n'accepte donc que des éléments en ligne.

effectivement. j'ai rectifié. C'est un label qui peut être dans le p.

Par contre, je ne comprends pas le numéro 2:
a écrit :
2/le textarea dans le label.

tu veux dire que si j'écris ça:
<p><label> bla bla bla bla <textarea name="critique">
klaviebel a écrit :
tu veux dire que si j'écris ça:
<p><label> bla bla bla bla <textarea name="critique">

Il serait préférable d'écrire ceci :
<p><label for="critique">bla bla bla bla</label>
<textarea name="critique" id="critique"></textarea></p>
En fait, le mieux est d'écrire quelque chose dans ce genre :
<p><label for="adresse">Adresse*&nbsp;:</label> <textarea name="adresse" id="adresse" cols="12" rows="3"></textarea></p>


<edit>Grillé...
Modifié par Julien Royer (11 May 2007 - 10:00)
a écrit :
tu veux dire que si j'écris ça:
<p><label> bla bla bla bla <textarea name="critique">

aie il manquait un bout! excusez-moi...

Merci pour la proposition d'écriture.

Sinon, pour ma demande première,(à savoir qu'une partie de mes formulaires disparait sous IE et que de surcroit, il fusionne la première partie de mon premier formulaire avec la dernière partie de mon deuxième formulaire), je peux vous certifier (maintenant, que j'ai nettoyé mes pages html et qu'elles ont été validées) que ça n'a rien changé sous IE. Le problème reste entier.
Auriez-vous une idée du pourquoi du comment ce kidnapping de formulaires par IE?
Pour avoir un aperçu, je vous donne le lien:
http://klaviebel.free.fr/commander.html (en l'ouvrant avec IE et avec Mozilla, vous pourrez voir la différence...)
Le code HTML n'a pas l'air corrigé...
<p><label>Adresse*:<textarea name="Adresse" cols="12" rows="3"</textarea></label></p>


Tu peux déjà faire un test en désactivant les feuilles de style, pour voir si le problème vient de la mise en forme ou d'une erreur de syntaxe CSS.

Note : lorsque j'enregistre la page en local via Firefox, puis l'ouvre dans IE, tout passe bien (sauf les images de fond qui ne sont pas enregistrées, bien sûr).
a écrit :
Le code HTML n'a pas l'air corrigé...

oui, je n'ai pas encore charger le dernière correction sur Filezilla.
je vais tester ta solution. Merci.
Merci pour l'idée de désactiver les CSS!

voilà, j'ai essayé plusieurs choses à partir de notepad++:
1/ repris mon page html en supprimant les instructions du css: sous mozilla, pas de soucis. Sous IE: toujours la même configuration: une partie du tableau supprimé + fusion des formulaires

2/ j'ai ouvert deux nouvelles pages html en mettant un formulaire par page. Il s'affichent correctement sous Mozilla et une partie manque à chaque fois sous IE (du formulaire et du tableau) (soit la mise en page que je retrouve lorsqu'il y a les css)

Ca veut donc dire que ce n'est pas les CSS, n'est-ce pas?
Et le cas échéant, c'est dans mon code html qu'il y a des erreurs, exact? Et donc probablement des problèmes de construction dans mon tableau? Est-ce qu'il faut des instructions conditionnelles pour IE lorsqu'il y a des tableaux? Est-ce que ça peut provenir de php? (parce qu'il ne fonctionne pas correctement sous IE)?

Bon, je sais que ça fait beaucoup de questions... mais je deviens chèvre!
Pages :