Bonjour à tous,
Voilà, je débute dans le css, et j'espère que vous allez pouvoir m'aider.
J'ai un formulaire qui me sert à récupérer un fichier pour différentes manipulations après.
J'ai donc décidé de tout faire avec CSS pour être "dans les règles"
Mes problèmes :
1- Je n'arrive pas à mettre en forme le champ avec le bouton "parcourir" de la même manière que les champs input classiques.
=> en fait je voudrais que le champ soit aussi long que les autres input et que le bouton soit un peu décalé sur la droite...
2- Je n'arrive pas à centrer mon formulaire sur ma page alors que j'ai pourtant créé un calque "global" centré qui contient tout le reste.
3- accessoirement, pourquoi mon textarea ne veut pas prendre la même taille que les input alors que sa largeur est bien identique dans la feuille de style ?
Voici mon code.
Formulaire :
Feuille CSS :
Merci d'avance pour vos réponses et/ou conseils.
Voilà, je débute dans le css, et j'espère que vous allez pouvoir m'aider.
J'ai un formulaire qui me sert à récupérer un fichier pour différentes manipulations après.
J'ai donc décidé de tout faire avec CSS pour être "dans les règles"
Mes problèmes :
1- Je n'arrive pas à mettre en forme le champ avec le bouton "parcourir" de la même manière que les champs input classiques.
=> en fait je voudrais que le champ soit aussi long que les autres input et que le bouton soit un peu décalé sur la droite...
2- Je n'arrive pas à centrer mon formulaire sur ma page alors que j'ai pourtant créé un calque "global" centré qui contient tout le reste.
3- accessoirement, pourquoi mon textarea ne veut pas prendre la même taille que les input alors que sa largeur est bien identique dans la feuille de style ?
Voici mon code.
Formulaire :
<html>
<head>
<link rel="stylesheet" href="./fusion.css" type="text/css" media="screen" />
</head>
<body>
<div id="calque_global">
<form name="fusion" id="fusion" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data" method='POST'>
<div id="corps_formulaire">
<fieldset id="infos">
<legend>Informations sur les images</legend>
<br />
<p>
<label for="fichier">Image de base : </label>
<input type="file" name="image" id="image" maxlength="50" class="upload" />
</p>
<p>
<label for="texte">Texte à incruster : </label>
<input type="text" name="txt_incrust" id="txt_incrust" maxlength="50" class="saisie" />
</p>
<p>
<label for="commentaire">Commentaire à incruster : </label>
<textarea name="com_incrust" id="com_incrust"></textarea>
</p>
</fieldset>
<br />
<fieldset id="affichage">
<legend>Présentation visuelle</legend>
<br />
<p>
<label for="grd_police">Taille de la police : </label>
<input type="text" name="grd_police" id="grd_police" maxlength="2" class="saisie" />
</p>
<p>
<input type="radio" name="police" id="police1" value="arial" />
<label for="police1">Arial</label>
<br />
<input type="radio" name="police" id="police2" value="verdana" checked="checked" />
<label for="police2">Verdana</label>
<br />
<input type="radio" name="police" id="police3" value="JurassicPark" />
<label for="police3">JurassicParc</label>
</p>
</fieldset>
</div>
<div id="boutons">
<input type="submit" name="valider" id="valider" value="Commencer" />
</div>
</form>
</div>
</body>
</html>
Feuille CSS :
/*** Mise en forme de la page ***/
body {
text-align: left;
color: #000;
background-color: #fff;
margin: 1em;
padding: 0;
font-size: .8em; /* 100% */
font-family: arial, sans-serif;
}
/*** Mise en forme du formulaire ***/
/*** Calque qui contient les autres pour le centrage sur la page ***/
#calque_global {
border: none;
margin: 0;
padding: 0;
text-align: center;
}
/*** Formulaire ***/
#fusion {
border: none;
margin: 0;
padding: 0;
width: 40em; /*** Largeur du formulaire ***/
}
/*** Mise en forme du pied de formulaire (bouton) ***/
#boutons {
font: bold 1.1em arial, hevetica, sans-serif;
text-align: right;
margin: 0;
padding: .5em;
}
/*** Mise en fome du corps du formulaire (bordure, couleur du fond...) ***/
#corps_formulaire {
border: 1px solid black;
color: black;
background: #efefef;
margin: 0;
padding: 1em;
}
/*** Mise en forme des cadres du formulaire ***/
#corps_formulaire fieldset {
margin: 0;
font-style: normal;
padding: 0 1em 1em;
}
/*** Mise en forme des étiquettes et champs du calque "infos" (le premier) ***/
#corps_formulaire fieldset#infos label {
float: left;
width: 35%;
text-align: right;
margin: 0;
padding: 0 .5em 0 0;
}
/*** Mise en forme des légendes des cadres ***/
#corps_formulaire legend {
font-weight: bold;
color: black;
background: transparent;
}
/*** Mise en forme des lignes du formulaire ***/
#corps_formulaire p {
padding: .2em 0;
margin: 0 0 .2em 0;
}
/*** Mise en forme des champs input classiques (=classe saisie) ***/
#corps_formulaire input.saisie {
width: 14em;
}
/*** Mise en forme du champ input type=FILE (=classe upload) ***/
#corps_formulaire input.upload {
text-align: right;
}
/*** Mise en forme du textarea ***/
#corps_formulaire textarea {
width: 14em;
height: 6em;
}
Merci d'avance pour vos réponses et/ou conseils.
