Problème alignement formulaire [Résolu/Fermé]

Signaler
-
 poky -
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

9 réponses

Messages postés
5122
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
22 novembre 2020
2 739
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 ?”
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
Messages postés
5122
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
22 novembre 2020
2 739
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 : https://notepad-plus-plus.org/
ou ça : https://framalibre.org
Messages postés
5122
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
22 novembre 2020
2 739
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.
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
Messages postés
5122
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
22 novembre 2020
2 739
Quel est le problème ?
Décris.
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
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
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