1. #1
    Membre à l'essai
    Homme Profil pro
    Recherche d'emploi
    Inscrit en
    janvier 2014
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Recherche d'emploi
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2014
    Messages : 34
    Points : 14
    Points
    14

    Par défaut Mise en forme d'un formulaire

    Bonjour
    je creer un formulaire qui n'est pas fini et qui a besoin de beaucoup de travail encore mais la n'est pas le probleme

    le probleme est que je voudrais faire une mise en forme en css3 et eviter d'utiliser des table html
    sauf que je bloque carrement et je suis totalement perdu
    si quelqu'un peut me donné un coup de main se serait vraiment sympa

    A gauche la mise en forme que j'aimerais obtenir --- A droite le formulaire qui j'ai fait actuellement

    Nom : 23213315_1705398199494290_1636344440213281360_o.jpg
Affichages : 30
Taille : 114,5 Ko

    si quelqu'un peut m'aider, me donné des conseils, me dire quelle balise utilisé etc je veux bien
    Ps: j'ai deja effectuer des recherches sur google et les tutoriels j'en est bouffé mais si je vient sur le forum c'est que les tutos etc m'ont bien entendu pas apporter de reponse ou que je n'est pas compris d'ou ma demande d'aide

    Code source ( html & css )
    https://codepen.io/asp2p/pen/RjWjqx

    je vous remercie par avance

  2. #2
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 175
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 175
    Points : 2 615
    Points
    2 615
    Billets dans le blog
    1

    Par défaut

    Bonjour,

    juste pour dire que ça doit dépendre du navigateur car avec IE11 comme Firefox53, j'obtiens (avec le codepen) :

    Nom : Capture.JPG
Affichages : 24
Taille : 49,4 Ko

    ce qui est très proche de ce que tu souhaites.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  3. #3
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 403
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 403
    Points : 20 780
    Points
    20 780
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #4
    Membre à l'essai
    Homme Profil pro
    Recherche d'emploi
    Inscrit en
    janvier 2014
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Recherche d'emploi
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2014
    Messages : 34
    Points : 14
    Points
    14

    Par défaut

    Citation Envoyé par laurentSc Voir le message
    Bonjour,
    juste pour dire que ça doit dépendre du navigateur car avec IE11 comme Firefox53, j'obtiens (avec le codepen) :
    ce qui est très proche de ce que tu souhaites.
    J'admet avoir essayer qu'avec google chrome

    Citation Envoyé par jreaux62 Voir le message
    Bonjour,
    "formulaire CSS"
    j'ai déja vu l'adresse que vous m'avez donnez
    mais comme expliquer dans mon premier poste j'arrive pas a comprendre et sa parle pas forcement du meme placement que je souhaite
    en fait sa parle de comment stylisé le formulaire hors que moi je recherche plus la mise en page

  5. #5
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 373
    Points : 478
    Points
    478

    Par défaut

    et sa parle pas forcement ... en fait sa parle de comment ...
    Depuis le temps que je vois ça dans les forums, je ne peux m'empêcher de rappeler que lorsque SA peut se dire CELA c'est que ça s'écrit ÇA!

    Désolé! mais j'ai pas pu me retenir

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 403
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 403
    Points : 20 780
    Points
    20 780

    Par défaut

    Bonjour,

    le lien que j'ai donné montre comment écrire un code HTML sémantiquement correct.
    Commence déjà par ça.

    Le CSS viendra après.


    Cela dit... un formulaire moche reste un formulaire moche...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 952
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 952
    Points : 25 538
    Points
    25 538

    Par défaut

    Bonjour,
    ce que je constate est que la structure HTML de ton exemple ne te permet pas d'obtenir simplement ce que tu cherche à faire.

    Tes deux éléments <div class="element"> devraient à minima se suivre dans ton code et ne pas être séparés par ton élément <div class="admin_text">.
    En modifiant ta structure il te sera plus facile d'obtenir ce que tu cherches à faire, si je m'en réfère aux images fournies.


    Citation Envoyé par jreaux62
    Cela dit... un formulaire moche reste un formulaire moche...
    qu'est ce que la mocheté ?

  8. #8
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 403
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 403
    Points : 20 780
    Points
    20 780

    Par défaut

    Citation Envoyé par NoSmoking Voir le message
    qu'est ce que la mocheté ?
    En l’occurrence ou dans l'absolu ?

    En l’occurrence, au delà de l'esthétique, il faut considérer la lisibilité et l'ergonomie.
    (j'ai bon ? )

    Dans l'absolu... c'est très subjectif.

    “La beauté est dans l'oeil de celui qui regarde.”

    "Beauty lies in the eye of the beholder"

    Oscar Wilde (?)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. Mise en forme d'un formulaire.
    Par Julieta dans le forum IHM
    Réponses: 1
    Dernier message: 24/04/2007, 18h27
  2. Astuces de mise en forme d'un formulaire.
    Par Julieta dans le forum IHM
    Réponses: 1
    Dernier message: 06/04/2007, 15h19
  3. Mise en forme d'un formulaire PHP
    Par gregius dans le forum Formulaires
    Réponses: 4
    Dernier message: 08/08/2006, 19h31
  4. mise en forme des sous formulaires
    Par T'chab dans le forum Access
    Réponses: 2
    Dernier message: 11/05/2006, 10h25
  5. [QuickForm] Mise en forme d'un formulaire
    Par Norabfr dans le forum HTML_quickform
    Réponses: 6
    Dernier message: 30/12/2005, 14h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo