bonjour à vous tous 

Je veux mettre en page un petit morceau de HTML mais y'a longtemps que je n'ai plus touché au css et html et je n'y arrive pas.

voila ce que je veux faire : 

voici mon code :

<br/>
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px; float: left; "> Nom :</div> 	
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px;float: right;">  No de passeport : </div> 
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px; float :left;" > Name : [your-name] </div>    
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px;"> Passport number  : </div>  
<br/>
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px; float: left; "> Prenom :</div> 	
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px;float: right;">  Année d'affiliation : </div> 
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px; float :left;" > First Name : [your-name] </div>    
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px;"> Affiliation year: </div>  
<br/>
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px; float: left; "> Adresse :</div> 	
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px;float: right;">  Sexe : </div> 
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px; float :left;" > Adress : [your-name] </div>    
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px;"> Sex: </div>  
<br/>
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px; float: left;"> Ville:</div> 	
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px;float: right;">  Date de naissance : </div> 
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px; float :left;" > City : [your-name] </div>    
<div style = "border: 5px solid black;font-size: 15px; height :20px; width:250px;"> Date of birth: </div>  

et voila ce que j'obtiens :

comme vous le voyez , je n'arrive pas a avoir la case par exemple passport number sous la case No de passeport !!

et idem pour les autres .

Pouvez vous me dire ou je fait une erreur ? (le morceau de code va dans un éditeur wordpress , c pour cela que les styles sont avec le html ..pour l'instant )

merci 

bonne soirée

-
Edité par jeromeespere 5 juin 2018 à 5:45:46

A vrai dire beaucoup ne coderons pas comme toi, et forcément utiliserons une façon plus simple de mettre en page.

Soit sous forme de tableau, ou en utilisant les flex-box, avec une page css pour que le code soit plus lisible car pour le coup ça fait un peu mal aux yeux.

Voici un bout de code sans css et qui répond à ta première image :

<table>
            <tr>
              <td>Nom :</td>
              <td></td>
              <td>No de password :</td>
            </tr>

            <tr>
              <td>Name : </td>
              <td>______________________________________________</td>
              <td>Password number :</td>
            </tr>

            <tr>
              <td>Prénom :</td>
              <td></td>
              <td>Année d'affiliation :</td>
            </tr>

            <tr>
              <td>First Name: </td>
              <td>______________________________________________</td>
              <td>Affiliation year :</td>
            </tr>

            
          </table>

Ceci est un exemple sous forme de tableau par exemple, j'ai du chercher un petit peu pour répondre à tes attentes.

Essaye juste en copiant pour voir le résultat, sans css.

Pour le cours : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-tableaux-1

-
Edité par N.Parvedy 5 juin 2018 à 6:40:51

Bonjour,

Pour commencer surtout pas de mise en page en tableau. Cette façon de faire est dépréciée et ne répond plus à aucune norme depuis le milieu des années 90...

Ensuite le code de l'auteur du sujet est bon. Par bon j'entends qu'il fait exactement ce qu'il est censé faire : des mots avec des cadres autour. Le vrai problème est plutôt que ce n'est pas ce que tu veux faire.

La bonne façon de procéder est de faire un formulaire : les textes doivent être des labels et les cases à remplir des input (type text, number ou date selon les cas) ou des checkboxes (pour le sexe notamment).

Plis d'informations dans le cours : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-formulaires-8

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

merci 

je n'ai pas besoin de faire un formulaire , je n'ai besoin que de la présentation . C'est pour créer un pdf après l'envoie d'un formulaire !

ben je vais regarder les tableau ca a l'air assez simple pour ce que je veux faire 

merci à vous