Tout mettre à gauche [résolu]

Bonsoir,

Je suis en train d'essayer de transformer un code qu'il y avait pour un formulaire de postage de commentaire. Sur celui-ci les éléments étaient "centrés", ou plutôt étaient séparés comme en deux colonnes : les labels à gauche et les champs à remplir à droite de ces derniers. "Se souvenir de moi" et le bouton "Prévisualiser" étaient dans la "colonne" de droite.

Seuls restent centrés les deux derniers éléments :
"Se souvenir de moi"
Le bouton "Prévisualiser"

En fait la case de "Se souvenir de moi" se place dans les 50% gauche et "Se souvenir de moi" dans les 50% droit de la ligne sur laquelle ces deux éléments sont placés.

Le bouton "Prévisualiser" fait de même : sa largeur est de 50% de la ligne (ce qui est bien trop : je veux un classique bouton qui fasse à peu près la taille que prend le texte).

Voici le code html

<form action="http://www.yazerty.net/post/2007/03/19/Arc-en-ciel-de-carottes#pr" method="post" id="comment-form">
      <h2>Ajouter un commentaire</h2>

      <fieldset>
        <p class="field"><label for="c_name">Nom ou pseudo&nbsp;:</label><br>
        <input name="c_name" id="c_name" size="30" maxlength="255" value="Yazerty" type="text">
        </p>
        
        <p class="field"><label for="c_mail">Adresse email&nbsp;:</label><br>
        <input name="c_mail" id="c_mail" size="30" maxlength="255" value="yazerty@yazerty.net" type="text">
        </p>

        
        <p class="field"><label for="c_site">Site web        (facultatif)&nbsp;:</label><br>
        <input name="c_site" id="c_site" size="30" maxlength="255" value="http://www.yazerty.net/" type="text">
        </p>
        
        <p style="display: none;"><input name="f_mail" size="30" maxlength="255" value="" type="text"></p>
        
        <p class="field"><label for="c_content">Commentaire&nbsp;:</label><br>
        <textarea name="c_content" id="c_content" cols="35" rows="7"></textarea>

        </p>
      </fieldset>
      
      <p class="form-help">Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.</p>
      
      <fieldset>	
        <p><input id="c_remember" name="c_remember" checked="checked" type="checkbox">
        <label for="c_remember">Se souvenir de moi sur ce blog</label>
        </p>
        <p><input class="preview" name="preview" value="prévisualiser" type="submit">

	</p>
      </fieldset>
    </form>

Et le CSS qui correspond à ce code :

/* Forms
-------------------------------------------------------- */
#comment-form { padding-top: 10px; }

#comment-form h2 {
	border: 1px solid #E8E8E8;
	border-width: 1px 0;
	background: #FBFBFB;
	padding: 5px;
	margin: 20px 0 8px 0;
	font-size: 1.2em;
}

#comment-form fieldset p { padding: 5px 0; }
#comment-form p.form-help { font-style: italic; }
#comment-form p.field label {
	font-weight: bold;
	padding: 0 4px 4px 0;
}
#comment-form input {
	font: 1em Arial,sans-serif;
	color: #005D99;
	border: 1px solid #CDCDCD;
	padding: 1px 2px;
	font-size: 1em;	
	width: 50%;
}

#comment-form textarea {
	font: 1em Arial,sans-serif;
	color: #005D99;
	border: 1px solid #CDCDCD;
	padding: 1px 2px;
	font-size: 1em;	
	width: 100%;
}

#comment-form input#c_remember {
	width: auto;
	border: 0;
	margin: 0 5px 0 140px;
}
#comment-form input.preview { margin-left: 134px; }
#comment-form input.preview, #comment-form input.submit {
	width: auto;
	color: #005D99;
	background: #FFF;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	border: 1px solid #FFF;
}
#comment-form input.preview:hover, #comment-form input.submit:hover { background: #005D99; color: #FFF; border: 1px solid #005D99; }

J'y ai passé du temps, mais je ne comprends pas ce qui cloche dans le code, pourquoi ça produit ce comportement.

Pourriez-vous me donner un petit coup de pouce pour tout remettre à gauche s'il vous plait :- ?
Modifié par Yazerty (19 Mar 2007 - 19:35)

Salut,

Essayes

#comment-form input#c_remember {
	width: auto;
	border: 0;
}

#comment-form input.preview { margin-left: 134px; }

#comment-form input.preview, #comment-form input.submit {

	width: auto;
	color: #005D99;
	background: #FFF;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0;	
}

Merci ghost ça marche nickel maintenant !!

J'ai même supprimé

#comment-form input.preview { margin-left: 134px; }