Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Problème alignement formulaire

Dernière réponse le 25 mar 2007 à 12:02:53 poky, le 24 mar 2007 à 01:43:12

Signaler ce message aux modérateurs

Bonsoir,

J'ai un petit souci avec un formulaire qui ne veut pas s'aligner... Le vilain.
Voici le lien vers la page concernée.
http://legarrit.free.fr/reservation.ph
Et voici le code de la feuille de style du formulaire.
Je compte sur votre aide précieuse et félicitations pour ce forum.

p.titre {
background:#FFFFCC;
color:purple;
padding:.2em .3em;
font-size:1.2em;
border:2px outset purple;
position:relative;
margin-bottom:-1em;
width:10em;
margin-left:1em;
margin-top:1em;
}

fieldset {
border:none;
margin-bottom:1em;
width:24em;
padding-top:1.5em;
}

/* fieldset coordonnees */
fieldset#coordonnees {
background:#FFFFCC;
border:outset purple;
}

#coordonnees label {
position:absolute;
font-size:90%;
padding-top:.2em;
left:20px;
}

#coordonnees input {
margin-left:9em;
line-height:1.4em;
margin-bottom:.2em;
}

/* fieldset message */
fieldset#message {
background:#FFFFCC;
border:outset purple;
}

#civilite {
font-size:90%;
}

#civilite input {
margin-left:9em;
}

#civilite input + input {
margin-left:1em;
}

/* zone de texte du message */
textarea {
font:.8em "Tahoma";
width:29em;
padding:.2em;
}

/* les boutons submit et reset */
input[type="submit"], input[type="reset"] {
background:#FFFFCC;
font:1.2em "Tahoma";
color:#345071;
}

p#buttons {
text-align:center;
}

Cordlt
CN

Configuration: Windows XP
Internet Explorer 7.0

Meilleures réponses pour « Problème alignement formulaire » dans :

[CSS] alignement label/input (Résolu) Voir

Problème alignement horizontal liste + form (Résolu) Voir

Aligner des boutons de formulaires différents (Résolu) Voir

[Webmaster] Un formulaire de contact pour votre site VoirCe formulaire permet d'avoir une page pour être contacté sur son site, sans utiliser de logiciel de messagerie. La personne qui vous contacte indique son adresse, l'objet du message et son message (évidemment). Le code est une version...

Javascript - Effacer un champ de formulaire lors du clic (focus) Voir

Formulaires en ligne - Les champs de saisie VoirQuelles données saisir ? Comment dois-je saisir l'information L'organisation des champs de saisie Séparer les champs de saisie L'organisation des champs et des titres La longueur des champs Quelles données saisir ? Sur la plupart des...

Alignement label et textarea (Résolu) Voir

Formulaire PHP, centré et aligné. Voir

Aligner les elements d un formulaire Voir

Télécharger Formula Vibration Feedback Wheel Voir

Les formulaires HTML VoirIntérêt d'un formulaire Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internaute, à la manière des coupons-réponse présents dans certains...

Servlets - Gestion des formulaires VoirIntroduction aux formulaires Les servlets rendent très simple la récupération de données envoyées par l'intermédiaire de formulaires HTML, c'est-à-dire une interface graphique permettant à l'utilisateur de saisir des données. Grâce à la balise...

Bases de données - Utilisation de formulaires VoirUtilisation de formulaires Afin d'exploiter les bases de données, il faut fournir une interface à l'utilisateur lui permettant de visualiser des données en fonction de certains critères. Pour cela il existe un outil : les formulaires. Un formulaire...

Posez votre question Répondre

Gihef, le 24 mar 2007 à 09:35:25

Bonjour,

Le positionnement en absolute sort les éléments du flux.
Et comme tu positionnes pas mal de tes éléments en absolute, certains, qui restent dans le flux, restent aussi en dehors des absolute.

Je te propose une modification simple. :
— donne une id à ton formulaire

<form method="post" action="traitement.php" id="reserver">

— ajoute cette id dans la feuille de styles

form#reserver {
  position : relative;
  }

Ça devrait ramener le texte près des <input> (si c'est bien de ça qu'il s'agit).

Ton menu pourrait être fait autrement.
L'utilisation de <ul><li> le rendrait plus lisible et plus facile à gérer.
En utilisant cette technique, il pourrait ressembler à ça.

Pendant que j'y suis, je me permets quelques remarques.
Il manque une <body> juste après la </head>
Certains <p> ne sont pas fermés.
Tu proposes des polices qui ne seront pas présentes sur tous les systèmes qui visiteront tes pages. Choisis-en des plus courantes, propose des alternatives et des génériques. Celles dont les noms comportent des espaces doivent être écrites entre " " ("Monotype Corsiva").
Je n'ai pas pu voir toutes les polices que tu souhaites, mais l'alternative à Bookman Old Style (serif) devrait être autre chose qu'Arial (sans-serif).
On a envie de cliquer sur la petite animation pour t'envoyer un courriel. Inclus-la dans la <a>.
Tu peux éviter le texte défilant dans la barre d'état sans que ça gêne. Au contraire, ça nous permettrait de savoir sur quoi on clique (-;

+ Au cas où tu l'aurais perdu, je t'en donne un : “p” (http://legarrit.free.fr/reservation.ph) (-;

Email ou e-mail ?

Pour info., “tu utilises quelle éditeurs ?”

Répondre à Gihef

poky, le 24 mar 2007 à 10:24:57

Alos là, merci, merci Gihef, tant de bons conseils, je demandais juste un truc et tu me donnes pleins de tuyaux, c'est vraiment sympa.
Alors, pour commencer, j'utilise NotePad, moi qui était toute contente de ma trouvaille si ça se trouve, il est nul.
Ensuite, je viens d'appliquer le id reserver, c'est bon pour le texte rapatrié dans le cadre, mais par contre, les cases sont toujours décalées.
Pour les autres astuces, je verrais après, chaque chose en son temps.
J'ai pas trop compris pour les polices, ce que je dois utiliser ou pas et surtout le menu avec <ul> et <li>, je vois pas ce que ça change.
MErci encore
CN

Répondre à poky

Gihef, le 24 mar 2007 à 11:13:47

Alors, essaye ça :

#coordonnees label {
position:absolute;
font-size:90%;
padding-top:.2em;
left:15px;
}
#coordonnees input {
margin-left:11em;
line-height:1.4em;
margin-bottom:.2em;
}

Pour le menu, c'est plutôt recommandé. Et ça se voit facilement.
Ton code HTML :

<br><a href="index.php"><img src="images/soleil.jpg" width="30" height="30" hspace=5 vspace=5 border="0" align="middle" alt=""><b><font face="monotype corsiva" size="4">Accueil</font></b></a>
<br><a href="iris.php"><img src="images/soleil.jpg" width="30" height="30" hspace=5 vspace=5 border="0" align="middle" alt=""><b><font face="monotype corsiva" size="4">Le gîte</font></b></a>
<br><a href="tarifs.php"><img src="images/soleil.jpg" width="30" height="30" hspace=5 vspace=5 border="0" align="middle" alt=""><b><font face="monotype corsiva" size="4">Tarifs</font></b></a>
<br><a href="reservation.php"><img src="images/soleil.jpg" width="30" height="30" hspace=5 vspace=5 border="0" align="middle" alt=""><b><font face="monotype corsiva" size="4">Réservation</font></b></a>
<br><a href="plan.php"><img src="images/soleil.jpg" width="30" height="30" hspace=5 vspace=5 border="0" align="middle" alt=""><b><font face="monotype corsiva" size="4">Plan d'accès</font></b></a>
<br><a href="liens.php"><img src="images/soleil.jpg" width="30" height="30" hspace=5 vspace=5 border="0" align="middle" alt=""><b><font face="monotype corsiva" size="4">Liens</font></b></a>
<br><a href="refere.htm"><img src="images/soleil.jpg" width="30" height="30" hspace=5 vspace=5 border="0" align="middle" alt=""><b><font face="monotype corsiva" size="4">Référencement</font></b></a>

Le mien :

<ul>
  <li><a href="index.php">Accueil</a></li>
  <li><a href="iris.php">Le gîte</a></li>
  <li><a href="tarifs.php">Tarifs</a></li>
  <li><a href="reservation.php">Réservation</a></li>
  <li><a href="plan.php">Plan d'accès</a></li>
  <li><a href="liens.php">Liens</a></li>
  <li><a href="refere.htm">Référencement</a></li>
</ul>

Ton code CSS :

Le mien :

#left ul {
  list-style-type : none;
  text-align : left;
  }
#left li {
  margin-top : 5px;
  margin-left : -40px;
  padding-left : 25px;
  line-height : 20px;
  list-style-type : none;
  }
#left li a {
  font-family : "Monotype Corsiva", "Apple Chancery", cursive;
  font-size : 14px;
  margin-left : -25px;
  padding-left : 25px;
  color : purple;
  background : url(http://cjoint.com/data/dyioD5lkva_soleilmenu.jpg) no-repeat 0 0;
  }
#left li a:hover {
  margin-left : -25px;
  padding-left : 25px;
  color : #ffffcc;
  background-position : 0 -16px;
  }

+ J'ai oublié.
Tu affiches le chardon en “width="144" height="154"” (qui devrait plutôt être height="108") or, elle fait 1024x768 et pèse 424 ko. Tu peux nous éviter de télécharger tout ça en la réduisant avant. En 144x108, elle ne pèse plus que 12 ko. On voit aussi le Nikon SQ…

Essaye ça : http://notepad-plus.sourceforge.net/fr/site.htm
ou ça : http://www.framasoft.net/article2917.html

Répondre à Gihef

Gihef, le 24 mar 2007 à 11:37:38

Pour les polices, indique celles qui te plaisent, mais fais des essais* avec d'autres que tu proposeras comme alternatives.

Par exemple, dans tes CCS on trouvera :

font-family: Tahoma, Arial, Helvetica, sans-serif;
font-family: "Bookman Old Style", Georgia, Times, “Times New Roman", serif;
font-family: "Monotype Corsiva", "Apple Chancery", cursive;

* Utilise chaque police une à une et vois ce que ça donne dans tes pages.

Répondre à Gihef

poky, le 24 mar 2007 à 14:22:54

Ah Gihef, au secours !!!!!!!!!!!!!!
J'ai voulu changer les font-family comme tu m'avais indiqué et voilà le résultat ! http://legarrit.free.fr
J'ai dû faire une erreur.
Voici le code de style.css
body {
width:100%;
margin:auto;
min-width:600px;
max-width:2000px;
padding: 0;
font-family: Tahoma, Arial, Helvetica, sans-serif;
color: purple;
background-color: #FFFFCC;
}
a {
text-decoration: none;
font-weight: bold;
color: purple;
outline: none;
}
a:visited {
color: purple;
}
a:active {
color: purple;
}
a:hover {
color: #ffffcc;
text-decoration: underline;
}
.ahem {
display: none;
}
strong, b {
font-weight: bold;
}

h1 {
font-size: 24px;
line-height: 44px;
font-weight: bold;
font-family: "Monotype Corsiva", "Apple Chancery", cursive;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 18px;
line-height: 40px;
font-weight: bold;
font-family: Tahoma, Arial, Helvetica, sans-serif;
margin-top: 0;
margin-bottom: 0;
}
h3 {
text-align: left;
font-size: 12px;
line-height: 22px;
font-weight: bold;
font-family: Tahoma, Arial, Helvetica, sans-serif;
margin-top: 0;
margin-bottom: 0;
}
h4 {
text-align : center;
font-size: 14px;
line-height: 26px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h5 {
text-align: justify;
font-weight: bold;
font-size: 12px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h6 {
font-size: 11px ;
font-weight: bold;
line-height: 18px;
margin-top: 0;
margin-bottom: 0;
}

img {
border: 0px none;
}
.nowrap {
white-space: nowrap;
font-size: 10px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;

}
.tiny {
font-size: 9px;
font-family: "Bookman Old Style", Georgia, Times, “Times New Roman", serif;
margin-top: 15px;
margin-bottom: 5px;
}
#top {
text-align: center;
margin: 5px 20px 30px;
padding: 0;
border: 2px solid purple;
background: #CC99CC;
height: 100px;
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
#top1 {
margin: 100px 150px 10px 200px;
padding: 10px;
border: 2px solid purple;
background: #CC99CC;
height: 100px;
font-family: "Bookman Old Style", Georgia, Times, “Times New Roman", serif;
color : purple;
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
#footer {
text-align: center;
margin: 20px 150px 30px 200px;
padding: 0;
border: 2px solid purple;
background: #CC99CC;
height: 100px;
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
html>body #top {
height: 70px;
}
#left {
position: absolute;
top: 100px;
left: 10px;
margin: 10px;
padding: 10px;
border: 2px solid purple;
background:#CC99CC;
font-family: Tahoma, Arial, Helvetica, sans-serif;
color : purple;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width: 150px;
}
html>body #left {
width: 150px;
}
#middle {
text-align: justify;
margin: 10px 150px 15px 200px;
padding: 10px;
border: 2px solid purple;
background: #CC99CC;
}
#right {
position: absolute;
top: 100px;
right: 0px;
margin: 10px;
padding: 10px;
border: 2px solid purple;
background: #CC99CC;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #right {
width: 110px;
}
pre {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}
.mauve {border-style:solid;
border-width:2px;
border-color:purple;
background-color:#E3DDFF;
}

.center {
text-align : center ;
}

Je m'absente cet AM, mais ça m'ennuierait de laisser ce site tout le WE dans cet état.
Merci
CN

Répondre à poky

Gihef, le 24 mar 2007 à 16:38:36

Quel est le problème ?
Décris.

Répondre à Gihef

poky, le 25 mar 2007 à 11:56:21

Bonjour Gihef, et tout le monde,

Je viens de retrouver un site normal en faisant des essais.
Apparemment c'était la police qui gênait, ligne font-family: "Bookman Old Style", Times, “Times New Roman", serif;
En mettant "Bookman Old Style", ça marche.
MYSTERE !!!
Par contre pour le formulaire mes cases sont toujours décalées après avoir changé comme tu me l'avais indiqué les valeurs de
:#coordonnees label {
position:absolute;
font-size:90%;
padding-top:.2em;
left:15px;
}
#coordonnees input {
margin-left:11em;
line-height:1.4em;
margin-bottom:.2em;
}
Je te redonne la feuille de style du formulaire

form#reserver {
position : relative;
}

p.titre {
background:#FFFFCC;
color:purple;
padding:.2em .3em;
font-size:1.2em;
border:2px outset purple;
position:relative;
margin-bottom:-1em;
width:10em;
margin-left:1em;
margin-top:1em;
}

fieldset {
border:none;
margin-bottom:1em;
width:24em;
padding-top:1.5em;
}

/* fieldset coordonnees */
fieldset#coordonnees {
background:#FFFFCC;
border:outset purple;
}

#coordonnees label {
position:absolute;
font-size:90%;
padding-top:.2em;
left:15px;
}

#coordonnees input {
margin-left:11em;
line-height:1.4em;
margin-bottom:.2em;
}

/* fieldset message */
fieldset#message {
background:#FFFFCC;
border:outset purple;
}

#civilite {
font-size:90%;
}

#civilite input {
margin-left:9em;
}

#civilite input + input {
margin-left:1em;
}

/* zone de texte du message */
textarea {
font:.8em "Tahoma";
width:29em;
padding:.2em;
}

/* les boutons submit et reset */
input[type="submit"], input[type="reset"] {
background:#FFFFCC;
font:1.2em "Tahoma";
color:#345071;
}

p#buttons {
text-align:center;
}

Merci beaucoup
CN

Répondre à poky

poky, le 25 mar 2007 à 11:57:32

Un autre message avec ma feuille de style .

body {
width:100%;
margin:auto;
min-width:600px;
max-width:2000px;
padding: 0;
font-family: verdana;
color: purple;
background-color: #FFFFCC;
}
a {
text-decoration: none;
font-weight: bold;
color: purple;
outline: none;
}
a:visited {
color: purple;
}
a:active {
color: purple;
}
a:hover {
color: #ffffcc;
text-decoration: underline;
}
.ahem {
display: none;
}
strong, b {
font-weight: bold;
}

h1 {
font-size: 24px;
line-height: 44px;
font-weight: bold;
font-family: "Monotype Corsiva";
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 18px;
line-height: 40px;
font-weight: bold;
font-family: Tahoma;
margin-top: 0;
margin-bottom: 0;
}
h3 {
text-align: left;
font-size: 12px;
line-height: 22px;
font-weight: bold;
font-family: Tahoma;
margin-top: 0;
margin-bottom: 0;
}
h4 {
text-align : center;
font-size: 14px;
line-height: 26px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h5 {
text-align: justify;
font-weight: bold;
font-size: 12px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h6 {
font-size: 11px ;
font-weight: bold;
line-height: 18px;
margin-top: 0;
margin-bottom: 0;
}

img {
border: 0px none;
}
.nowrap {
white-space: nowrap;
font-size: 10px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;

}
.tiny {
font-size: 9px;
font-family: verdana;
margin-top: 15px;
margin-bottom: 5px;
}
#top {
text-align: center;
margin: 5px 20px 30px;
padding: 0;
border: 2px solid purple;
background: #CC99CC;
height: 100px;
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
#top1 {
margin: 100px 150px 10px 200px;
padding: 10px;
border: 2px solid purple;
background: #CC99CC;
height: 100px;
font-family: verdana;
color : purple;
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
#footer {
text-align: center;
margin: 20px 150px 30px 200px;
padding: 0;
border: 2px solid purple;
background: #CC99CC;
height: 100px;
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
html>body #top {
height: 70px;
}
#left {
position: absolute;
top: 100px;
left: 10px;
margin: 10px;
padding: 10px;
border: 2px solid purple;
background:#CC99CC;
font-family: tahoma;
color : purple;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width: 150px;
}
html>body #left {
width: 150px;
}
#middle {
text-align: justify;
margin: 10px 150px 15px 200px;
padding: 10px;
border: 2px solid purple;
background: #CC99CC;
}
#right {
position: absolute;
top: 100px;
right: 0px;
margin: 10px;
padding: 10px;
border: 2px solid purple;
background: #CC99CC;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #right {
width: 110px;
}
pre {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}
.mauve {border-style:solid;
border-width:2px;
border-color:purple;
background-color:#E3DDFF;
}

.center {
text-align : center ;
}

Merci
CN

Répondre à poky

poky, le 25 mar 2007 à 12:02:53

Ah tiens en changeant ceci ça fonctionne mais je ne sais pas si c'est tellement académique du -2em.
#coordonnees input {
margin-left:-2em;
line-height:1.4em;
margin-bottom:.2em;
}
Pendant qu'on y est, comment agrandir un peu le cadre jaune, c'est peut-être petit et comment faire pour rapatrier aussi le cadre du message.
Voici le lien http://legarrit.free.fr/reservation.php/
Merci beaucoup.
CN

Répondre à poky

Posez votre question Répondre