Probleme avec la balise textarea....

Résolu/Fermé

lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019 - 30 déc. 2015 à 15:38
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019 - 19 janv. 2016 à 11:03

Bonjour à tous,

J'ai concocté depuis quelques jours ceci et aucune solution n'a été trouvée, c'est pourquoi je viens vers vous en demandant votres aides.

Je suis en train de créer un site dont il'y a une page pour emploi qui permet aux utilisateur de deposer une offre/demande, deposer de CV, consulter les CV en ligne,consulter les offres....

J'ai besoin d'inserer plusieurs champ textarea sur le formulaire de depot de CV et c'est là le problème, quand j'ai mis 4 champs textarea et plus, la mise en forme de la page bouge quand on clique sur un lien(comme rédimention automatique des margin)...

Ci bas mes script, c'est un peu plus long mais vous pouvez l'avoir besoin pour diagnostiquer le probleme.

Je vous remercie beaucoup.

<div class='bodiv'>
<div class="pageEm">
<div class="menuEm">
<div class="menuEm1"><a href="?k=publier-un-emploi">Annoncer un emploi</a></div>
<div class="menuEm2"><a href="?k=deposer-cv">Deposer votre CV</a></div>
<div class="menuEm3"><a href="#">Liste des CV</a></div>
</div>
<div class="bordEm">
<?php

if(isset($_GET['k'])){
$gets=$_GET['k'];
if($gets=='publier-un-emploi'){
?>
<div class="typeEm">Type de l'annonce:</div>
<input type="radio" name="typeEmploi" id="Offre" value="Offre" checked/><label>Offre</label>
<input type="radio" name="typeEmploi" id="Demande" value="Demande"/><label>Demande</label><br/>

<div class="CategEmp">Type d'affaire:</div>
<?php
$requete = $con_db->prepare("SELECT * FROM categorieem ORDER BY nom");
$requete->execute();
?>
<select class="" name="categorie">
<?php while($resultat=$requete->fetch(PDO::FETCH_OBJ)){?>
<option><?php echo $resultat->nom; ?></option> <?php }
?>
</select><br/>
<div class="CategEmp">Titre du poste:</div><input type="text"/><br/>
<div class="CategEmp">Entreprise:</div><input type="text"/><br/>
<div class="CategEmp">Lieu du travail:</div><input type="text"/><br/>
<div class="rubriqEmp">Description et mission</div><textarea></textarea><br/>
<div class="rubriqEmp">Profil exigés</div><textarea></textarea><br/>
<div class="rubriqEmp">Informations complémentaires</div><textarea></textarea><br/>

<input type="checkbox" name="ouvertCom" id="Demande"/><label>Laisser être ouvert aux commentaires</label><br/>
<input type="checkbox" name="conditionGe" id="Demande" required/><label>J'accepte les <a href='#'>condition générales</a> pour la publication</label><br/>
<?php
}elseif($gets=='apercu-de-l-offre'){

}elseif($gets=='deposer-cv'){ ?>
<div class="consignForm">Veuillez remplir les formulaires ci-après:</div>
<span class="champOblig">Les champ marqués par * sont obligatoires</span><br/>
<input class="" type="text" name="nomCv" placeholder="Nom*" required/><br/>
<input class="" type="text" name="prenomCv" placeholder="Prénoms*" required/><br/>
<input class="" type="date" name="dateNaiss" placeholder="Né(e) le (JJ/MM/AAAA)*" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" title="jour/Mois/Année" required/><br/>
<input class="" type="text" name="addrCv" placeholder="Adresse*"/><br/>
<input class="" type="text" name="paysCv" placeholder="Votres Pays*"/><br/>
<input class="" type="text" name="telCv" placeholder="N° tél sans espace*" pattern="([0-9])+(?:-?\d){6,}" title="Au mois 7 chiffres et sans espace" required/><br/>
<input class="" type="email" name="emailCv" placeholder="Email*"/><br/>


<div class="">
<?php
$requete12 = $con_db->prepare("SELECT * FROM categorieem ORDER BY nom");
$requete12->execute();

while($resultat12=$requete12->fetch(PDO::FETCH_OBJ)){ ?>
<input type="checkbox" name = "choixCateg[]" value="<?php echo $resultat12->nom; ?>"/><span><?php echo $resultat12->nom; ?></span><br/>

<?php } ?>

</div>

<div class="rubriqEmp">Diplômes acquis et formations suivies*</div><textarea></textarea><br/>
<div class="rubriqEmp">Expériences professionnelles*</div><textarea></textarea><br/>
<div class="rubriqEmp">Informatiques et langues étrangères</div><textarea></textarea><br/>

<div class="fileUpload">
<span class="custom-span">
<img id="uploadPreview1" src="images/img_bouton/photo.gif">
</span>
<p class="custom-para">Ajouter une photo</p>
<input id="uploadImage1" type="file" class="upload" name="image1" onchange="PreviewImage(1);"/>
</div>

<div class=""><input type="submit" name="subDepotCv" value="Enregistrer"/></div>
<?php
}elseif($gets=='liste-cv'){
echo "";
}elseif($gets=='cv-de'){
echo "";
}else{
echo "";
}
}
?>
</div>
</div>

</div>

Merci de votre precieux soutien.

Cordialement.
Rodin.

A voir également:

Probleme avec la balise textarea....
Balise br ✓ - Forum Webmastering
Balise <br> avec l'attribut class ✓ - Forum CSS
Au moins une balise d'emplacement de données est introuvable - Forum InDesign
Balise espace html - Astuces et Solutions
Javascript affiche "<br />" ✓ - Forum Programmation

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
30 déc. 2015 à 16:00

Salut,

Si j'ai bien compris il s'agit d'un problème de mise en forme html/css, rien à voir avec le php ?
Si oui, il faudrait plutôt nous poster le code html généré de ta page sans le code php (simplement en récupérant le code source de la page depuis ton navigateur) et surtout le code css associé.

Bonne journée,

lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
31 déc. 2015 à 08:23

Merci beaucoup Pitet,

Je poste ci après donc mes code sources, il y a deux pages HTML et le CSS en fin.
Ces pages ne sont pas encore formatée completement parce que au debut j'ai dejà construit la structure et la mise en forme complète mais vue le problème sus-cité j'ai decidé de les reconstruire, j'ai commencé avec les pages qu'il faut inserer plusieurs TEXTAREA et voilà le probleme reapparait!!

Merci encore de votre soutien et bonne fin d'année à tous.

Page 01 (publier-un-emploi):
<!DOCTYPE html>

<html>
<head>
<title>emplois</title>
<link rel="stylesheet" href="styles/tete.css" type="text/css"/>
<link rel="stylesheet" href="styles/emploi.css" type="text/css"/>
</head>

<body>
<div class='bodiv'>
<div class="pageEm">
<div class="menuEm">
<div class="menuEm1"><a href="?k=publier-un-emploi">Annoncer un emploi</a></div>
<div class="menuEm2"><a href="?k=deposer-cv">Deposer votre CV</a></div>
<div class="menuEm3"><a href="#">Liste des CV</a></div>
</div>
<div class="bordEm">
<div class="typeEm">Type de l'annonce:</div>
<input type="radio" name="typeEmploi" id="Offre" value="Offre" checked/><label>Offre</label>
<input type="radio" name="typeEmploi" id="Demande" value="Demande"/><label>Demande</label><br/>

<div class="CategEmp">Type d'affaire:</div>
<select class="" name="categorie">
<option>Animateur</option> <option>Gestion</option> <option>Mecanique</option> <option>Plomberie</option> </select><br/>
<div class="CategEmp">Titre du poste:</div><input type="text"/><br/>
<div class="CategEmp">Entreprise:</div><input type="text"/><br/>
<div class="CategEmp">Lieu du travail:</div><input type="text"/><br/>
<div class="rubriqEmp">Description et mission</div><textarea></textarea><br/>
<div class="rubriqEmp">Profil exigés</div><textarea></textarea><br/>
<div class="rubriqEmp">Informations complémentaires</div><textarea></textarea><br/>

<input type="checkbox" name="ouvertCom" id="Demande"/><label>Laisser être ouvert aux commentaires</label><br/>
<input type="checkbox" name="conditionGe" id="Demande" required/><label>J'accepte les <a href='#'>condition générales</a> pour la publication</label><br/>
</div>
</div>

</div>
</body>
</html>

Page 2 (deposer-cv):
<!DOCTYPE html>

<html>
<head>
<title>emplois</title>
<link rel="stylesheet" href="styles/tete.css" type="text/css"/>
<link rel="stylesheet" href="styles/emploi.css" type="text/css"/>
</head>

<body>
<div class='bodiv'>
<div class="pageEm">
<div class="menuEm">
<div class="menuEm1"><a href="?k=publier-un-emploi">Annoncer un emploi</a></div>
<div class="menuEm2"><a href="?k=deposer-cv">Deposer votre CV</a></div>
<div class="menuEm3"><a href="#">Liste des CV</a></div>
</div>
<div class="bordEm">
<div class="consignForm">Veuillez remplir les formulaires ci-après:</div>
<span class="champOblig">Les champ marqués par * sont obligatoires</span><br/>
<input class="" type="text" name="nomCv" placeholder="Nom*" required/><br/>
<input class="" type="text" name="prenomCv" placeholder="Prénoms*" required/><br/>
<input class="" type="date" name="dateNaiss" placeholder="Né(e) le (JJ/MM/AAAA)*" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" title="jour/Mois/Année" required/><br/>
<input class="" type="text" name="addrCv" placeholder="Adresse*"/><br/>
<input class="" type="text" name="paysCv" placeholder="Votres Pays*"/><br/>
<input class="" type="text" name="telCv" placeholder="N° tél sans espace*" pattern="([0-9])+(?:-?\d){6,}" title="Au mois 7 chiffres et sans espace" required/><br/>
<input class="" type="email" name="emailCv" placeholder="Email*"/><br/>


<div class="">
<input type="checkbox" name = "choixCateg[]" value="Animateur"/><span>Animateur</span><br/>

<input type="checkbox" name = "choixCateg[]" value="Gestion"/><span>Gestion</span><br/>

<input type="checkbox" name = "choixCateg[]" value="Mecanique"/><span>Mecanique</span><br/>

<input type="checkbox" name = "choixCateg[]" value="Plomberie"/><span>Plomberie</span><br/>

</div>

<div class="rubriqEmp">Diplômes acquis et formations suivies*</div><textarea></textarea><br/>
<div class="rubriqEmp">Expériences professionnelles*</div><textarea></textarea><br/>
<div class="rubriqEmp">Informatiques et langues étrangères</div><textarea></textarea><br/>
<div class="rubriqEmp">Expériences professionnelles*</div><textarea></textarea><br/>

<div class="fileUpload">
<span class="custom-span">
<img id="uploadPreview1" src="images/img_bouton/photo.gif">
</span>
<p class="custom-para">Ajouter une photo</p>
<input id="uploadImage1" type="file" class="upload" name="image1" onchange="PreviewImage(1);"/>
</div>

<div class=""><input type="submit" name="subDepotCv" value="Enregistrer"/></div>
</div>
</div>

</div>
</body>
</html>

Le CSS:
.bodiv{
width: 29cm;
background: ;
margin-left: auto;
margin-right: auto;
}
.pageEm{
width:750px;
background:#eaeaea;
margin: 0 auto;
}
.menuEm a{
text-decoration:none;
color:#FFF;
}
.menuEm1,.menuEm2,.menuEm3{
border-radius:5px 5px 0px 0px;
height:20px;
display:inline-block;
line-height:20px;
padding:3px 8px 3px 8px;
}
.menuEm1{
background:#E44600 ;
}
.menuEm2{
background:#F88D2D ;
}
.menuEm3{
background:#E6B91E;
display:inline-block;
}
.typeEm{
display:inline-block;
}
.CategEmp{
display:inline-block;
}

.consignForm{
margin-top:20px;
margin-bottom:-5px;
font-size:20px;
font-weight:bold;
}
.champOblig{
color:gray;
font-style:italic;
font-size:14px;
}

Cordialement.

Rodin

lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
4 janv. 2016 à 11:42

Al'aide s'il vous plait!

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
4 janv. 2016 à 11:53

Je n'ai pas bien compris ton problème, peux tu nous donner un peu plus de précision stp ?
Dans l'idéal si tu peux nous montrer (via un screen ou autre) le résultat que tu souhaites et la résultat que tu obtiens, il sera plus facile de comprendre et de t'aider.

lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
Modifié par lerod83 le 4/01/2016 à 16:16

Bonne année 2016!

Merci pour votre retour Pitet,

J'ai amélioré un peu le script à poster ici mais j'aimerais expliquer d'abord avant les copier en bas. Veuillez m'excusez pour mon français, j'en suis très débutant, je vais essayez quand même de vous expliquer au fond.

Je veux ajouter plusieurs balise textarea sur un formulaire et voici ce qui se passe quand je le fait:

a) 1er cas: : jusqu' à trois (03) textarea ajoutées, il n'y a pas de problème,

b) 2em cas: : quatre (04) textarea au plus:la mise en forme ou plus précisement les margin-left et/ou margin-right de la page changent. Je ne sais pas précisement mais c'est l'un d'eux ou les deux ensembles.

Comme j'ai dit en haut, j'ai amélioré les codes html et css afin que vous puissiez travailler sur eux, voici une une petite guide: ne tenez plus comptes les codes sus-postés. Ensuite, créer 02 pages html en les renommant successivement "page1.html" et "page2.html", créer aussi un troisiement fichier pour le CSS, nommez le " PageStyle.css".

NB: Il y a un menu avec trois (03) bouton dans chaque page, cliquez les pour basculer d'une page à une autre, en faisant cette action vous remarquerez que le conteneur de chaque page(ayant un même style) ne s'allignent pas.

Mettez les dans un même dossier et remplir chaque page avec les codes suivants:

pour la page1.html:
<!DOCTYPE html>

<html>
<head>
<title>er</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles/tete.css" type="text/css"/>
<link rel="stylesheet" href="PageStyle.css" type="text/css"/>
</head>

<body>
<div class='bodiv'>

<div class="menuEm">
<div class="menuEm1"><a href="page1.html">page1</a></div>
<div class="menuEm2"><a href="page2.html">page2</a></div>
<div class="menuEm3"><a href="#">page3</a></div>
</div>
<div class="bordEm">
<div class="">Veuillez remplir les formulaires ci-après:</div><br/>
<form>
<input type="text" name="nomCv" placeholder="Nom*" required/><br/>
<input type="text" name="prenomCv" placeholder="Prénoms*" required/><br/>
<input type="date" name="dateNaiss" placeholder="Né(e) le (JJ/MM/AAAA)*" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" title="jour/Mois/Année" required/><br/>
<input type="text" name="addrCv" placeholder="Adresse*"/><br/>
<input type="text" name="paysCv" placeholder="Votres Pays*"/><br/>
<input type="text" name="telCv" placeholder="N° tél sans espace*" pattern="([0-9])+(?:-?\d){6,}" title="Au mois 7 chiffres et sans espace" required/><br/>
<input type="email" name="emailCv" placeholder="Email*"/><br/>


<div class="">
<input type="checkbox" name = "choixCateg[]" value="Anim1"/><span>Anim 1</span><br/>
<input type="checkbox" name = "choixCateg[]" value="Anim2"/><span>Anim 2</span><br/>
<input type="checkbox" name = "choixCateg[]" value="Anim3"/><span>Anim 3</span><br/>
<input type="checkbox" name = "choixCateg[]" value="Anim4"/><span>Anim 4</span><br/>

</div>

<div>infos1</div><textarea></textarea><br/>
<div>infos2</div><textarea></textarea><br/>
<div>infos3</div><textarea></textarea><br/>
<div>infos4</div><textarea></textarea><br/>
<div>infos5</div><textarea></textarea><br/>
<div>infos6</div><textarea></textarea><br/>
<div>infos7</div><textarea></textarea><br/>
<div>infos8</div><textarea></textarea><br/>

<div class="">
<input type="file" name="image1"/>
</div><br/>

<div class=""><input type="submit" name="" value="Enregistrer"/></div>
</form>
</div>

</div>
</body>
</html>

pour la page2.html
<!DOCTYPE html>

<html>
<head>
<title>em</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles/tete.css" type="text/css"/>
<link rel="stylesheet" href="PageStyle.css" type="text/css"/>
</head>

<body>
<div class='bodiv'>

<div class="menuEm">
<div class="menuEm1"><a href="page1.html">page1</a></div>
<div class="menuEm2"><a href="page2.html">page2</a></div>
<div class="menuEm3"><a href="#">page3</a></div>
</div>
<div class="bordEm">
<form>
<div class="CategEmp">Catégorie:</div>
<select class="" name="categorie">
<option>Anim 1</option>
<option>Anim 2</option>
<option>Anim 3</option>
<option>Anim 4</option>
</select><br/>
<div class="CategEmp">Nom:</div><input type="text"/><br/>
<div class="CategEmp">Zone:</div><input type="text"/><br/>
<div class="CategEmp">Lieu:</div><input type="text"/><br/>
<div class="rubriqEmp">Description</div><textarea></textarea><br/>
<div class="rubriqEmp">Définition</div><textarea></textarea><br/>
<div class="rubriqEmp">Autres informations</div><textarea></textarea><br/><br/>

<div class=""><input type="submit" name="" value="Enregistrer"/></div>
</form>
</div>

</div>
</body>

</html>

et pour la feuille de style PageStyle.css:

.bodiv{
width: 1000px;
background: #CCCCCC;
margin-left: auto;
margin-right: auto;
padding-left:20px;
}

.menuEm a{
text-decoration:none;
color:#FFF;
}
.menuEm1,.menuEm2,.menuEm3{
height:20px;
display:inline-block;
line-height:20px;
padding:3px 8px 3px 8px;
}
.menuEm1{
background:#E44600 ;
}
.menuEm2{
background:#F88D2D ;
}
.menuEm3{
background:#E6B91E;
display:inline-block;
}

Finalement, Je tiens à vous remericer beaucoup Pitet et à tous qui contribuent sur cette discussion pour votres précieuses aides, c'est très très très important pour moi.

Cordialement.

Rodin

Réponse 2 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 4/01/2016 à 16:33

La largeur du conteneur .bodiv sont bien identiques sur tes 2 pages.

La seule différence d'affichage peut provenir de la barre de défilement verticale (scroll).
En effet selon la hauteur de ton écran, le formulaire de la page 1 étant trop grand pour tenir complètement sur la page, le navigateur affiche la barre de défilement permettant de voir le bas de la page.
En affichant cette barre, la largeur de la page est donc légèrement différente ce qui correspond à la différence d'alignement observée. Ceci est tout à fait normal.

lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
19 janv. 2016 à 11:03

Merci beaucoup Pitet.

Je me demande pourquoi n'ai je pas cette reflexion? :)

Bonne continuation et encore merci .

Discussions similaires

la balise <br> ou <br />

Balise </br>

Faire sauter 2 lignes avec br (CSS)

balise <br> HTML