Problème avec les styles d'un formulaire

Question

Melody Nelson

10 May 2006 à 06:07

bonjour,

je débute avec les CSS... je lis beaucoup et j'essaie de mettre en application ce que j'apprends mais là, je n'arrive pas à résoudre un problème sur une page contenant un formulaire "stylé"

voici ce que j'obtiens sur Safari (et qui me convient) :
http://img353.imageshack.us/img353/4577/image17uq.th.png

la même page sur Firefox (le premier "input" est décalé) :
http://img353.imageshack.us/img353/1046/image28eh.th.png

(je n'ai aucune idée de la tête de mes pages sur IE Windows, faute de PC pour tester... j'espère ne pas avoir trop de mauvaises surprises)

j'ai trouvé en bidouillant la feuille de style que si j'enlevais text-indent: 1.5em; dans #contenu p, ça solutionnait mon décalage... mais j'aimerais garder l'indentation des paragraphes (sauf dans le formulaire)... je n'ai pas trouvé comment faire...

voici maintenant ma feuille de styles (sûrement pleines d'erreurs Smiley confused

)

body {
	margin: 0;
	padding: 0;
	text-align: center;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif;
	color: #333;
	background: #fff;
}

#conteneur {
	width: 770px;
	margin: 0 auto;
	text-align: left;
	background: #fff;
}

/*  ------------------------------------------	*/
/*  ENTETE + MENU + PIED DE PAGE				*/
/*  ------------------------------------------	*/

h1#header {
	/* border: 1px solid #000; */
	margin: 0;
	padding: 0;
	width: 770px;
	height: 33px;
	background: url(images/deco_haut.png) no-repeat;
}

h1#foot {
	/* border: 1px solid #000; */
	margin: 0;
	padding: 0;
	width: 770px;
	height: 33px;
	background: url(images/deco_bas.png) no-repeat;
}

h2#logo {
	/* border: 1px solid #000; */
	float: right;
	text-align: right;
	margin: 0;
	padding: 0;
	margin-right: 35px;
	width: 114px;
	height: 70px;
	background: url(images/logo.gif) no-repeat;
}

h2#separation_menu {
	/* border: 1px solid #000; */
	float: left;
	text-align: left;
	margin: 0;
	padding: 0;
	margin-top: 15px;
	margin-left: 35px;
	width: 440px;
	height: 17px;
	background: url(images/deco_bas_menu.png) no-repeat;
}

ul#menu {
	height: 33px;
	margin: 0;
	padding: 0;
	margin-left: 35px;
	list-style-type: none;
}

#menu li {
	float: left;
	text-align: left;
	background: url(images/fond_menu.png) no-repeat;
	line-height: 33px;
	font-size: 1.25em;
	font-weight: bold;
	letter-spacing: 1px; 
	display: block;
	margin-right: 25px;
}

#menu a {
	color: #790000;
	text-decoration: none;
}

#menu a:hover {
	color: #ff0808;
}

#rubrique_active {
}

a#rubrique_active {
	color: #ff0808;
	text-decoration: none;
}

a#rubrique_active:hover {
	color: #ff0808;
	text-decoration: none;
}	



/*  ------------------------------------------	*/
/*  CONTENU PAGE								*/
/*  ------------------------------------------	*/

#contenu {
	padding: 70px 35px 0 35px;
	background: url(images/deco_bords.png) no-repeat 50% 50%;
}

#contenu h1 {
	margin: 0;
	padding-top: 16px;
	font-size: 1.3em;
	background: url(images/fond_titre.png) no-repeat left top;
	color: #790000;
}

#contenu h2 {
	font: 1.1em "Trebuchet MS", helvetica, sans-serif;
	color: #790000;
	text-indent: 1.5em;
}

#contenu p {
	text-align: justify;
 	text-indent: 1.5em;
	line-height: 1.3em;
}

#contenu ul {
	list-style-image: url(images/puce.png);
}


#contenu a {
	color: #ff0808;
	border-bottom: 1px dotted;
	text-decoration: none;
}

#contenu a:hover {
	color: #790000;
}


p#erreur {
	font-weight: bold;
	color: #ff0808;
}

p#simili_hr {
	background: url(images/puce.png);
	margin-left: 20px;
	height: 1px;
	/*color: #ff0808;*/
}	

p#hot_news {
	margin-left: -20px;
	padding: 0;
}	




/*  ------------------------------------------	*/
/*  CADRE INTERIEUR (ACTU + FICHE TECH)			*/
/*  ------------------------------------------	*/

#contenu dl { 
	float: right;
	text-align: right;
	margin: 0;
	padding: 0;
	margin-top: 20px;
	margin-right: 35px;
	width: 231px;
	clear: right;
} 

#contenu dl {  
	margin: 0; 
	padding: 0; 
	margin-top: 15px;
} 

#contenu dt, dd {  
	margin: 0; 
	padding: 0;
} 

#contenu dl { 
	background: url(images/cadre_bas.png) bottom left no-repeat; 
	padding-bottom: 10px;
} 

#contenu dt { 
	height: 20px; 
	background: url(images/cadre_haut.png) top left no-repeat; 
	font-family: "Trebuchet MS", helvetica, sans-serif;
	font-size: 1.2em; 
	font-weight: bold; 
	text-align: left;
	color: #fff;
	padding-left: 30px;
} 

#contenu dd { 
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: 0.85em; 
	color: #000;
	padding: 10px 12px 0 40px;
	text-align: left; 
	background: url(images/cadre_centre.png) top left repeat-y;
} 


#contenu li { 
	list-style-image: url(images/puce.png);
}

/*  ------------------------------------------	*/
/*  ACTUS : IMAGE LIEE							*/
/*  ------------------------------------------	*/

ul#image_actu { 
	float: right;
	text-align: right;
	margin: 15px 0 0 20px;
	padding: 0;
	clear: right;
} 


/*  ------------------------------------------	*/
/*  PRODUITS : LOGO CONSTRUCTEUR				*/
/*  ------------------------------------------	*/

ul#logo_produit { 
	float: right;
	text-align: right;
	margin: 0;
	padding: 0;
	width: 231px;
	clear: right;
} 

/*  ------------------------------------------	*/
/*  SOCIETE : PLAN D'ACCES						*/
/*  ------------------------------------------	*/

ul#plan_acces { 
	float: right;
	text-align: right;
	margin: 0;
	padding: 0;
	width: 350px;
	clear: right;
} 

/*  ------------------------------------------	*/
/*  FORMULAIRES									*/
/*  ------------------------------------------	*/


form {
	width: 50em;
	/*padding: 0 100px 0 100px;*/
}


#titreForm, #piedForm {
	font: bold 1.1em "Trebuchet MS", helvetica, sans-serif;
	color: white;
	margin: 0;
	padding: .5em;
}

#piedForm {
	text-align: right;
} 


#corpForm {
	/*border: 1px solid #790000;*/
	color: black;
	/*background: #eee;*/
	margin: 0;
	/*padding: 1em;*/
}

#corpForm fieldset {
	margin: 0;
	font-style: normal;
	padding: 0 1em 1em;
	border: 1px dotted #790000;
	background: #F6F6F6;
}

#corpForm legend {
	font: bold 1.1em "Trebuchet MS", helvetica, sans-serif;
	color: #790000;
	background: transparent;
}
	
#corpForm p {
	padding: .2em 0;
	margin: 0 0 .2em 0;
}

#corpForm label {
	float: left;
	width: 25%;
	text-align: right;
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;
}

#corpForm label.oblig {
	font-weight: bold;
}

/*  ------------------------------------------	*/
/*  CADRE ASTUCE								*/
/*  ------------------------------------------	*/


#astuce {
	margin: 20px 0 0 0;
	padding: 0;
	/*font-family: "Trebuchet MS", helvetica, sans-serif;
	font-size: 0.9em; */
	border: 1px dotted #666;
	background: #F6F6F6;
	width: 50em;
}

#astuce h3 {
	font: 1.1em "Trebuchet MS", helvetica, sans-serif;
	font-weight: bold; 
	text-indent: 1.5em;
	color: #000;
}

et voici le formulaire en question :

<form action="actus_script_ajout.php" method="post" ENCTYPE="multipart/form-data">


<!--<div id="titreForm">Ajouter une actualit&eacute;</div>-->

<div id="corpForm">
<fieldset>
<legend>Actualit&eacute;</legend>
<br />

<p>
<label for="date" class="oblig">* Date de publication</label>
<input type="text" name="date" size="10" value="<?php echo $new_date ?>" />
</p>

<p>
<label for="titre" class="oblig">* Titre</label>
<textarea name="titre" cols="40" rows="2"><?php echo stripslashes($new_titre); ?></textarea>
</p>

<p>
<label for="chapeau" class="oblig">* Chapeau</label>
<textarea name="chapeau" cols="40" rows="4"><?php echo stripslashes($new_chapeau); ?></textarea>
</p>

<p>
<label for="contenu" class="oblig">* Contenu</label>
<textarea name="contenu" cols="40" rows="10"><?php echo stripslashes($new_contenu); ?></textarea>
</p>

<p>
<label for="lien">Lien</label>
<input type="text" name="lien" size="40" value="<?php echo $new_lien ?>" />
</p>

</fieldset>
<br />


<fieldset>
<legend>Joindre une image</legend>
<br />
<p>
<input type="hidden" name="MAX_FILE_SIZE" value="150000" />
<input type="file" name="mon_fichier" size="40" />
</p>
</fieldset>

</div>

<div id="piedForm">
<input type="submit" value="Enregistrer" />
</div>

</form>

l'un(e) de vous aurait-il une idée pour corriger ce problème ?

merci
Modifié par Melody Nelson (10 May 2006 - 06:12)

Nico3333fr

10 May 2006 à 18:05

Je ne suis pas sûr de mon coup, mais il me semble que l'utilisation des float sur les label occasionne le problème sur Firefox.

Je te propose déjà de rajouter un clear:both; dans :

#corpForm label {
....
clear:both;
}

ça indiquera que ton label remet correctement le flux "à la ligne".

J'ai bien essayé plusieurs choses avec le code que tu as donné, mais je ne peux pas en dire plus je n'obtiens pas ce que tu as, essaie ça et montre ce que ça donne.

Melody Nelson

10 May 2006 à 20:40

en l'ajoutant à #corpForm label, aucun changement...

j'ai essayé de l'ajouter ici aussi :

#corpForm p {
	padding: .2em 0;
	margin: 0 0 .2em 0;
	clear: both;
}

#corpForm label {
	float: left;
	width: 25%;
	text-align: right;
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;
	clear: both;
}

et cette fois, il y a du changement mais pas tel que je l'espérais :

http://img92.imageshack.us/img92/9449/image12vk.th.png

j'comprends pas d'où vient ma boulette...

Nico3333fr

11 May 2006 à 06:37

Tu aurais pas cette page web en ligne ou on peut faire des essais ? ça serait plus pratique.

Melody Nelson

12 May 2006 à 02:35

si, c'est pas le même formulaire mais le problème est le même (heureusement d'ailleurs !)

donc voilà un formulaire et la feuille de styles

Sujet clos