Apparence lors du formulaire

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Apparence lors du formulaire

Message par laurent Dr le Lun 2 Mar 2015 - 12:40

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis la création du formulaire
Lien du forum : http://balou.forumgratuit.ch

Description du problème

Bonjour programmeur

Un petit problème d'apparence depuis que j'ai créer un formulaire
Voila en vue normal :


Voila quand j'affiche le formulaire :


Le code la mise en page du formulaire, je pense que cela vient de la :
Code:
<style>
form {
    /* Pour le centrer dans la page */
    margin: 0 auto;
    width: 555px;
    /* Pour voir les limites du formulaire */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}
 
form div + div {
    margin-top: 1em;
}
 
label {
    /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
    display: inline-block;
    text-align: left;
  font-family: Arial;
  font-weight: bold;
}
  #chars label {
    font-size:0.7em;
    font-weight:normal;
  }

input[type="text"], textarea {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
      Par défaut, textarea utilise une police à espacement constant */
    font: 1em arial;
 
    /* Pour donner la même dimension à tous les champs textuels */
    width: 550px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 
    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}

input:focus, textarea:focus {
    /* Afin de rehausser les éléments actifs */
    border-color: #000;
}
 
textarea {
    /* Pour aligner correctement les champs multilignes et leurs étiquettes */
    vertical-align: top;
 
    /* Pour donner assez d'espace pour entrer du texte */
    height: 5em;
}
</style> 

il y a aussi ce problème :


j'ai rentré ce code dans le nom du forum :
Code:
<a href="http://balou.forumgratuit.ch/h1-formulaire">Formulaire d'inscription</a>

et cela change le style du nom du forum

Merci de me trouver une solution a mes deux problèmes.

Laurent


Dernière édition par laurent Dr le Mar 3 Mar 2015 - 7:55, édité 1 fois

laurent Dr
*

Masculin
Messages : 44
Inscrit(e) le : 14/01/2015

http://balou.forumgratuit.ch
laurent Dr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence lors du formulaire

Message par TheDirector le Lun 2 Mar 2015 - 13:41

Bonjour,
Pour ce qui est du premier problème, je pense qu'il vient de là :
Code:
input[type="text"], textarea {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
      Par défaut, textarea utilise une police à espacement constant */
    font: 1em arial;
 
    /* Pour donner la même dimension à tous les champs textuels */
    width: 550px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 
    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}

Je pense que :
Code:
input[type="text"], textarea

est déjà utilisé par le widget de la barre de recherche google ainsi que le widget "recherche informations joueurs". Plutôt que d'utiliser ce fameux
Code:
input[type="text"], textarea
dans votre CSS, essayez plutôt d'entrer des id et des class dans votre formulaire afin de jouer avec eux dans votre CSS. Ça aura pour but de ne plus modifier vos widgets. Attention tout de même à prendre des id et des class qui n'existe pas encore sur votre forum !

Pour ce qui est de votre deuxième soucis, remplacez :

Code:
<a href="http://balou.forumgratuit.ch/h1-formulaire">Formulaire d'inscription</a>

par :

Code:
<a href="http://balou.forumgratuit.ch/h1-formulaire" id="lien_form">Formulaire d'inscription</a>

Et ajoutez dans votre CSS :

Code:
#lien_forum {
text-decoration: none;
font-style: none;
}

Dites moi ce que ça donne Wink

Cordialement

TheDirector
*****

Masculin
Messages : 639
Inscrit(e) le : 08/05/2012

http://contrehomophobes.pro-forum.fr/
TheDirector a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence lors du formulaire

Message par laurent Dr le Lun 2 Mar 2015 - 14:35

Bonjour et merci pour ta réponse

je ne suis pas un fin programmeur et donc je te demanderais un peut plus de précision si tu le veux bien

tu parles de id et de class pour le premier problème peut tu me donner un exemple pour que je l'applique sur le programme du formulaire
Pour le problème 2 ou puis je trouver le css pour mettre le code

Merci pour ta patience

Laurent D

laurent Dr
*

Masculin
Messages : 44
Inscrit(e) le : 14/01/2015

http://balou.forumgratuit.ch
laurent Dr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence lors du formulaire

Message par TheDirector le Lun 2 Mar 2015 - 15:05

Aucun soucis, tout d'abord avez vous toujours le problème ? Parce que moi je ne vois plus le problème de mon côté ^^

TheDirector
*****

Masculin
Messages : 639
Inscrit(e) le : 08/05/2012

http://contrehomophobes.pro-forum.fr/
TheDirector a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence lors du formulaire

Message par laurent Dr le Lun 2 Mar 2015 - 17:09

re

oui pour voir les problèmes, il faut aller dans le forum "recrutement" puis "formulaire d'inscription"


laurent Dr
*

Masculin
Messages : 44
Inscrit(e) le : 14/01/2015

http://balou.forumgratuit.ch
laurent Dr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence lors du formulaire

Message par Alzufen le Lun 2 Mar 2015 - 18:25

Bonsoir,

Je m'incruste mais pour le premier soucis, on peut avoir une autre solution très simple aussi...

Effectivement, le code demande donc de modifier les différentes balises "input" "form" et tout le tralala, ses balises sont aussi utilisé dans les widgets et à bien d'autre endroit du forum d'ailleurs. Du coup, pour faire en sorte que ça ne touche que le "tronc" ou le corps de page, on va juste demander à que ses balises soient contenu dans l'id du corps de page.

Suffit donc de remplacer ça :

Code:
<style>
form {
    /* Pour le centrer dans la page */
    margin: 0 auto;
    width: 555px;
    /* Pour voir les limites du formulaire */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}
 
form div + div {
    margin-top: 1em;
}
 
label {
    /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
    display: inline-block;
    text-align: left;
  font-family: Arial;
  font-weight: bold;
}
  #chars label {
    font-size:0.7em;
    font-weight:normal;
  }
 
input[type="text"], textarea {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
      Par défaut, textarea utilise une police à espacement constant */
    font: 1em arial;
 
    /* Pour donner la même dimension à tous les champs textuels */
    width: 550px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 
    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}
 
input:focus, textarea:focus {
    /* Afin de rehausser les éléments actifs */
    border-color: #000;
}
 
textarea {
    /* Pour aligner correctement les champs multilignes et leurs étiquettes */
    vertical-align: top;
 
    /* Pour donner assez d'espace pour entrer du texte */
    height: 5em;
}
</style>

Par ça :

Code:
<style>
#main form {
    /* Pour le centrer dans la page */
    margin: 0 auto;
    width: 555px;
    /* Pour voir les limites du formulaire */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}
 
#main form div + div {
    margin-top: 1em;
}

#main label {
    /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
    display: inline-block;
    text-align: left;
  font-family: Arial;
  font-weight: bold;
}
  #chars label {
    font-size:0.7em;
    font-weight:normal;
  }
 
#main input[type="text"], #main textarea {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
      Par défaut, textarea utilise une police à espacement constant */
    font: 1em arial;
 
    /* Pour donner la même dimension à tous les champs textuels */
    width: 550px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 
    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}
 
#main input:focus, #main textarea:focus {
    /* Afin de rehausser les éléments actifs */
    border-color: #000;
}
 
#main textarea {
    /* Pour aligner correctement les champs multilignes et leurs étiquettes */
    vertical-align: top;
 
    /* Pour donner assez d'espace pour entrer du texte */
    height: 5em;
}
</style>

Pour expliquer, je demande à que les balises se trouvent dans l'id "main", l'id "main" est contenu dans une div qui entoure le corps de page, le css ajouté va donc influencer que sur le corps de page et pas sur le reste (donc pas sur les widgets qui eux sont sous la balise div ayant pour id "left" ou "right" en fonction de leur position)

Sinon, pour le deuxième problème, au lieu d'ajouter une id qui lui sera propre, pourquoi ne pas prendre la class des autres titres ? Donc au lieu de mettre :

Code:
<a href="http://balou.forumgratuit.ch/h1-formulaire">Formulaire d'inscription</a>

Mettre :

Code:
<a href="http://balou.forumgratuit.ch/h1-formulaire" class="maintitle">Formulaire d'inscription</a>

"maintitle" étant la class utilisé pour les titres des catégories, comme par exemple "Conditions d'admission" ça copiera donc les effets appliqués dessus Wink

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence lors du formulaire

Message par laurent Dr le Lun 2 Mar 2015 - 20:18

Merci pour ta réponse

résultat :
problème 1 résolu
Problème 2 pas résolu

Laurent D



laurent Dr
*

Masculin
Messages : 44
Inscrit(e) le : 14/01/2015

http://balou.forumgratuit.ch
laurent Dr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence lors du formulaire

Message par Alzufen le Lun 2 Mar 2015 - 20:33

Je suis pas réveillé moi sérieux, faut vraiment que je dors plus et me couche plus tôt je fais des erreurs idiotes XD

C'est pas "maintitle" mais "forumtitle" sous PHPBB Wink

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence lors du formulaire

Message par laurent Dr le Mar 3 Mar 2015 - 7:55

Bonjour Alzufen et TheDirector

Merci pour votre aide c'est tout bon génial !!!!

Laurent D

laurent Dr
*

Masculin
Messages : 44
Inscrit(e) le : 14/01/2015

http://balou.forumgratuit.ch
laurent Dr a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum