Webmaster Hub > PB de validation pour une partie de code.

Version complète: sur le forum Webmaster Hub : PB de validation pour une partie de code.

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Grantome

mardi 14 juin 2005 à 00:41

Salut,

Bon, voici le code :

CODE

<form method="get" action="http://www.google.com/custom">
<p>
<input type="hidden" name="domains" value="www.castlemaniac.com"></input>
<img src="http://www.castlemaniac.com/images/puce.gif" title="" alt="" />  Rechercher<br />
<input type="text" name="q" size="15" maxlength="255" value=""></input>
<input type="hidden" name="sitesearch" value="www.castlemaniac.com"></input>
<input type="hidden" name="client" value="pub-xxxxxxxxxxxxxxxxx"></input>

<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="channel" value="xxxxxxxxxxxxx"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="cof" value="xxxxxxxxx"></input>
</p>
</form>

Mon pb et que pour la validation XHTML 1.1 strict, j'ai du placer une balise p dans le form afin d'accpter les input.

Maintenant, cette balise p décale mon titre de 60px vers la droite, mais uniquement sous IE, pas sous FF.
Que faire pour lui faire retrouver sa place ?

Page : www.castlemaniac.com

Merci

lupucide

mardi 14 juin 2005 à 00:47

Tu peux commencer en fermant correctement tes balises <input />. Ensuite évite l'utilisation de <br />, préfère plutôt l'utilisation de <p> quitte à en placer plusieurs.

Grantome

mardi 14 juin 2005 à 00:53

CITATION(lupucide @ mardi 14 juin 2005, 01h47)

Tu peux commencer en fermant correctement tes balises <input />. Ensuite évite l'utilisation de <br />, préfère plutôt l'utilisation de <p> quitte à en placer plusieurs.

C'est fait pour les input, c'est juste que je teste plusieurs méthode...

Par contre pour le <br /> je ne vois pas pourquoi je doit placer un p, c'est un retour chariot, pas un nouveau paragraphe.

Pour la page, c'est thhp://www.castlemaniac.com/index.php

Dudu

mardi 14 juin 2005 à 00:59

Je ne vois aucun décalage sur la page, mais c'est certainement un problème de CSS. Aucun attribut n'est dédié au balises <p>, ce qui veut dire que la CSS navigateur (celle qui est, en local, installée par défaut sur ton navigateur) va prendre le dessus et attribuer aux <p> les marges intérieures et extérieures par défaut.

En remplaçant le <p> par un <p style="margin:0;padding:0"> çà devrait remettre tout à la normale.
Ou bien si tu utilises plusieurs <p> comme le conseille lupucide, écris un <p class="LeNomDeTaClasse"> et associe dans la CSS les RAZ des marges

Grantome

mardi 14 juin 2005 à 01:14

J'utilise ceci dans mon css

CODE

p:first-letter
{
margin-top:0px;
margin-bottom:0px;
margin-left:60px;
}

Et sur FF tout va bien, mais sous IE, le mot Rechercher du menu de gauche est décalé de 60px

Bon, en faisant une class spécial pour ce p avec un margin-left de 0px, c'est bon.

Merci.

Dudu

mardi 14 juin 2005 à 01:42

Le problème a l'air réglé donc tant mieux

Cela étant, il est possible que la déclaration xml en 1ère ligne fasse passer IE en quirks mode, impliquant par conséquent quelques approximations au niveau du rendu.
Également, le code est un peu étrange pour du xhtml 1.1 Strict. L'HTML contient de nombreuses annotations liées à la présentation. Je n'ai regardé que le menu de gauche et 2 choses me choquent quelque peu:
- ce n'est pas une liste, et chaque ligne répète l'image 'puce.gif'
- les espaces insécables entre la puce et le texte pourraient avantageusement être remplacées en CSS

Pourquoi je dis çà ? Parce que certainement ce genre de problèmes ne serait apparu si le menu possédait une sémantique digne du doctype utilisé

Grantome

mardi 14 juin 2005 à 07:47

Pour la liste, elle n'es pas en prod, car j'ai un pb de mise en page, j'ai donc eu pour le moement recours à ce supterfuge.

Elle sera placée dès que possible au format XHTML 1.1 strict associé au CSS.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.