28172 sujets

CSS et mise en forme, CSS3

Peut-on faire mieux ?

Bonjour tout le monde...

Voilà un formulaire qui globalement peut satisfaire mais dont l'alignement n'est pas parfait, 2 pixels par ci, 5 pixels par là selon les navigateurs... D'où mon titre. Auriez-vous des conseils afin que ce soit plus mieux bien Smiley smile !


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
body {background-color:#333;}
input {width: 100%; height: 25px;}     
textarea {width: 100%; height: 100px; overflow:auto;} 
select {width: 100%; height: 25px;} 
.texte {width: 400px; height: 360px; text-align: justify;} 
.intertexte {margin-bottom: 15px;} 
.valider {width: 290px; float:left;} 
.effacer {width: 95px; float:right;} 
</style>
</head>

<body>
<div class="texte"> 
<form action="x.php" method="post" name="x" id="x" > 
<label for="pays"><select name="pays" id="pays" class="intertexte">
<optgroup label="Europe">
<option value="fr" selected="selected">France</option>
<option value="it">Italie</option></optgroup>
<optgroup label="Asie">
<option value="ch">Chine</option></optgroup>
</select></label>
<label for="nom"><input class="intertexte" name="nom" id="nom" type="text" value="Nom" /></label>
<label for="prenom"><input class="intertexte" name="prenom" id="prenom" type="text" value="Prénom" /></label>
<label for="telephone"><input class="intertexte" name="telephone" id="telephone" type="text" value="Téléphone" /></label>
<label for="courriel"><input class="intertexte" name="courriel" id="courriel" type="text" value="Courriel" /></label> 
<label for="message"><textarea class="intertexte" name="message" id="message" />Message</textarea></label> 
<label for="valider"><input class="valider" type="submit" name="valider" id="valider" value="Valider" /></label> 
<label for="effacer"><input class="effacer" type="reset" name="effacer" id="effacer" value="Effacer" /></label> 
</form> 
</div> 
</body>
</html>
</body>
</html>


Merci d'avance de votre avis !
Modifié par webmc (28 Jul 2010 - 00:21)
Hello,

Dans un premier temps tu devrai surtout ajouter des labels pour chacun de tes inputs. Tu devra sans doute d'ailleur mettre le label et son input dans un <div> pour les regrouper.

Ensuite, pour les problèmes d'alignement, je n'ai pas testé ton code mais j'aurais tendance à dire que ce n'est pas grave s'il n'est pas correctement aligné identiquement sur tous les navigateurs. Ce n'est pas grave en soit à la base, ça l'est encore moins pour des éléments de formulaire qui ne réagissent pas réellement aux CSS comme les autres éléments.
Merci Tymlis,

Voilà, j'ai ajouté les labels mais à part alourdir le code, ça sert à quoi Smiley lol ?
Au début, j'avais mis des <div> à chaque input, textarea, select mais je n'ai pas vu de différence... donc dans ces cas là, j'allège.

Si tu as 5 minutes, j'ai refait un code prêt pour le copier/coller afin d'avoir un aperçu rapide. Ce qui me dérange, c'est le retrait du select en haut et du bouton "effacer" en bas.

De plus, lorsque je veux utiliser "text-indent" ou "padding-left" pour décoller le texte des bords, là aussi, l'interprétation des navigateurs est loin d'être similaire et je ne sais pas comment procéder pour arriver à un résultat homogène ?

Pour info, j'utilise : IE8, Opéra9, Safari5, Firefox3.6 et Chrome

@suivre...
Sujet clos
Aller à