28173 sujets

CSS et mise en forme, CSS3

Bonjour
j'ai mis un formulaire dans un paragraphe (fond coloré) et je n'obtiens pas le même rendu sous FF et sous IE !
Je ne comprends pas pourquoi sous IE le formulaire est en quelque sorte "poussé" hors de la boite du paragraphe ??

Voici la page :
http://pacsed.free.fr/squelettes/essaisbox.html
(je croyais que p n'acceptait que des element en ligne et que les input en étaient bien..)

Que faut'il que je fasse pour que sous FF le formulaire soit bien inclus dans le paragraphe ?

Merci beaucoup.

La feuille de style est la suivante :

<style type="text/css">
    /* les deux x2  cellules */

#cel,#celbas{
	float:left;
	display:inline;
	}
#cel ul,#celbas ul{
	list-style-type: none;
	display:inline;
	margin:0;
	padding:0;
	clear:both;
}
#cel li, #celbas li{
	width:235px;
	float:left;
	display:inline;
	margin: 6px 0 6px 10px;
	padding:0;
	}

#cel li img,#celbas li img{
	margin: 0 6px;
   max-width: 200px;
	}

#cel li h4,#celbas li h4{
	word-spacing: 0.1em;
	display:block;
	-height:1%;
	}
/* AJOUT SARAH Des textes dans les deux x2 même cellules boites*/
#celbas li p{
	background:#FFFFFF;
        border: 1px solid #C5E41C;
}


le html :

          <div id="cel">
<ul id="deco">
<li>

[(#REM) une breve en haut à gauche.]

<BOUCLE_blogbox_haut(BREVES){titre_mot=homebox_haut}{par num titre}{par date}{inverse}{0,1}>
<h4>coucou</h4>
<p><span class="logogauche"><a href="#URL_BREVE"><INCLURE{fond=logo}{id_breve}{taille=46}{date=#ENV{date}}></a></span>
essais blalalal hed jdbhqzeh</p>


</BOUCLE_blogbox_haut>
<h4>BOUTIQUE</h4>
<p>Boutique en ligne #NOM_SITE_SPIP.:

* si vous êtes déjà client, veuillez vous identifier
<THELIA SI NON CONNECTE>

				<form action="#URLCOURANTE" method="post" class="connex" >
   <!-- j'ai enlevé une ligne avec un input hidden -->

					<input name="email" type="text" value="e-mail" size="5" onclick="this.value='';" />

					<input name="motdepasse" type="password" value="000000" size="5" onclick="this.value='';" />

					<a href="javascript:document.getElementById('connex').submit()" class="LIEN_entete">Valider</a>

					<a href="mdpoublie.php" class="LIEN_entete">J'ai perdu mon  mot de passe perdu ?</a>
				</form>

				</THELIA SI NON CONNECTE> </p>

<//B_blogbox_haut>
</li>
</ul>
</div>

Modifié par Madrilene (01 Feb 2008 - 19:41)
Salut !

Je ne sais pas trop te répondre pour le moment mais qu'est-ce donc ceci ?

<THELIA SI NON CONNECTE>
</BOUCLE_blogbox_haut>
<//B_blogbox_haut>
etc.

Et enfin, en xhtml, TOUTES les balises doivent se fermer ! il se fait que la balise <p> n'est jamais refermée chez toi.
Alphonse a écrit :
Salut !

Je ne sais pas trop te répondre pour le moment mais qu'est-ce donc ceci ?

<THELIA SI NON CONNECTE>
</BOUCLE_blogbox_haut>
<//B_blogbox_haut>
etc.


Ce sont des codes propres à SPIP et à THELIA qui permet d'ajouter un moduule de commerce électronique.

C'est le code html généré que Madrilene devrait soumettre ici.
Hello,
merci de vous arreter sur ma "mixture" Smiley confus
je ne pense pas que les balises thelia et Spip que j'ai laissées pour faire vite aient la moindre influence, mais je vous ai recharché à la même adresse une page néttoyée avec du HTLM simple.

voici le html pur et dur Smiley cligne :
<BODY>
          <div id="cel">
<ul id="deco">
<li>



<h4>coucou</h4>
<p>
essais blalalal hed jdbhqzeh</p>



<h4>BOUTIQUE</h4>
<p>Boutique en ligne 

* si vous êtes déjà client, veuillez vous identifier


				<form action="#URLCOURANTE" method="post" class="connex" >
   <!-- j'ai enlevé une ligne avec un input hidden -->

					<input name="email" type="text" value="e-mail" size="5" onclick="this.value='';" />

					<input name="motdepasse" type="password" value="000000" size="5" onclick="this.value='';" />

					<a href="javascript:document.getElementById('connex').submit()" class="LIEN_entete">Valider</a>

					<a href="mdpoublie.php" class="LIEN_entete">J'ai perdu mon  mot de passe perdu ?</a>
				</form>

			 </p>


</li>
</ul>
</div>
</BODY>


est ce que le probleme sous FF ne viendrait pas du ul li et que c'est ca qui pousse les champs du formulaire hors du paragraphe ?
Help...
je lis les posts sur les formulaires (y en a un paquet)
et je cite Florent V:
a écrit :
"Il y a aussi la question des éléments de type en-ligne interdits dans form directement en Strict. Je ne sais pas si c'est une pratique recommandée, mais pour les formulaires simples on pourra utiliser un fieldset unique (sans legend). Ou bien une div, ou une série de paragraphes. Ça n'est pas très important il me semble."


je ne comprends pas ce que veut dire :
la question des éléments de type en-ligne interdits dans form directement en Strict


mais est ce que c'est une piste pour mon probleme ???
(citation extraite de cette discussion :
http://forum.alsacreations.com/topic.php?fid=2&tid=31899&s=formulaire

j'ai enlevé les ul li et div initial ici :
http://pacsed.free.fr/squelettes/boxessais3.html
et ca change pas le fait que sous FF les inputs ne sont toujours pas dans la boite du paragraphe !
Pauvre de mois !
je tournais autour du pot, j'ai trouvé ce qui allait pas :

<p> n'admet que des elements en ligne, input est bien enligne mais form est un element block.
Du coup j'ai sorti la balise form en dehors du paragraphe et cette fois ci : ca marche !!!!

resultat ici :
http://pacsed.free.fr/squelettes/essaisbox4.html
les champs sont bien rentrés dans le paragraphe a fond violet.

pour le html faite "afficher la source"

bon ben si ca peut eviter a un(e) autre de s'arracher autant de cheveux betement ... Smiley confused