Alignement des éléments incorrect

Sujet résolu

16 avril 2018 à 13:37:03

Bonjour tout le monde 😀

je viens vers vous, car j'ai un petit soucis de mise en page, lorsque je clique sur le bouton pour pouvoir imprimer la page HTML en cours les balises "p" en haut à droite sont pas comme je souhaiterai. Le texte est en dessous exemple :

"Nom

et Prénom" alors que je souhaiterai que ce soit comme ceci : "Nom et Prénom" sur une même ligne ainsi de suite.

De plus le mot date et trop proche de la droite je ne sais pas trop comment faire si vous avez des pistes merci.

Voici mon code : https://jsfiddle.net/c1a9skwj/7/

HTML :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Titre de la page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <img src="depannage.jpg" alt=""/>
    <table>
      <tr>
        <th>NOMS et Prénoms :</th>
        <td id="date"><strong>Date :</strong></td>
      </tr>
      <tr>
        <th>Nom de la rue :</th>
      </tr>
      <tr>
        <th>Code de postal :</th>
      </tr>
      <tr>
        <th>Tél Perso :</th>
      </tr>
      <tr>
        <th>Tél Mobile:</th>
      </tr>
    </table>
    <table>
      <caption><strong>Titre du tableau</strong></caption>
      <tr>
        <td>Cellule_1</td>
        <td>Celluele_2</td>
      </tr>
      <tr>
        <td>Cellule_3</td>
        <td>Celluele_4</td>
      </tr>
      <tr>
        <td>Cellule_5</td>
        <td>Celluele_6</td>
      </tr>
      <tr>
        <td>Cellule_7</td>
        <td>Celluele_8</td>
      </tr>
      <tr>
        <td>Cellule_9</td>
        <td>Celluele_10</td>
      </tr>
      <tr>
        <td>Cellule_11</td>
        <td>Celluele_12</td>
      </tr>
      <tr>
        <td>Cellule_13</td>
        <td>Celluele_14</td>
      </tr>
      <tr>
        <td>Cellule_15</td>
        <td>Celluele_16</td>
      </tr>
      <tr>
        <td>Cellule_17</td>
        <td>Celluele_18</td>
      </tr>
      <tr>
        <td>Cellule_19</td>
        <td>Celluele_20</td>
      </tr>
      <tr>
        <td>Cellule_21</td>
        <td>Celluele_22</td>
      </tr>
      <tr>
        <td>Cellule_23</td>
        <td>Celluele_24</td>
      </tr>
    </table>
      <br>
      <p>Le matériel et les éléments fourni par l'intervenant resteront ça propriétée tant que la facture n'aura pas été payée.</p>
      <br>
      <p>Lu et Approuvé</p>
      <br>
      <p>Signature :</p>
			<br>
			<p>Cliquez sur le bouton pour imprimer la page en cours.</p>

			<button onclick="myFunction()">Imprimer cette page</button>

			<script>
				function myFunction() {
    		window.print();
				}
			</script>
  </body>

CSS :

img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#date{
  border: none;
  text-align: right;
}

.haut{
  border: 1px solid blue;
  text-align: center;
}

.table{
  font-family: arial, sans-serif;
  border: 2px solid black;
  border-radius: 5px;
}

td{
  border: 1px solid black;
  width: 800px;
  height: 30px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

Merci pour votre aide.

-
Edité par NoobActu 16 avril 2018 à 16:59:47

Lamecarlate

16 avril 2018 à 13:42:22

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

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.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

NoobActu

16 avril 2018 à 15:54:18

Une idée ?

philiga

16 avril 2018 à 16:34:13

Bonjour,

Normal, tu as mis des th et non des td pour ces éléments et tu ne leur as pas imposé de largeur en css.

(Et tu n'as pas annoncé de <thead>)

Ils ont donc la largeur de leur contenu textuel minimal (mot par mot).

Il faudrait aussi ajouter des cellules pour les réponses, non?

Cela faciliterait le repositionnement de ton élément #date dans la 3ème colonne de cellules.

-
Edité par philiga 16 avril 2018 à 16:34:27

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Lamecarlate

16 avril 2018 à 16:35:06

On est sur le forum HTML/CSS, il est évident qu'on va parler de ces deux langages, et de mise en page. Merci de mettre un titre descriptif du problème.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

NoobActu

16 avril 2018 à 17:44:46

philiga a écrit:

Bonjour,

Normal, tu as mis des th et non des td pour ces éléments et tu ne leur as pas imposé de largeur en css.

(Et tu n'as pas annoncé de <thead>)

Ils ont donc la largeur de leur contenu textuel minimal (mot par mot).

Il faudrait aussi ajouter des cellules pour les réponses, non?

Cela faciliterait le repositionnement de ton élément #date dans la 3ème colonne de cellules.

-
Edité par philiga il y a environ 1 heure

Merci d'avoir pris le temps de me répondre je vais essayé.

philiga

16 avril 2018 à 17:59:20

Cela dit, pour ton 1er tableau, les bonnes pratiques recommandent de ne pas utiliser de tableau pour faire de la mise en page, ce que tu fais ici.

En outre, si je ne m'abuse, c'est un formulaire que tu crées ; le bon codage à adopter est donc plutôt:

<form action="#" method="post">
    <div>
         <label for="nom">NOM:</label>
         <input type="text" name="nom" id="nom" value="" tabindex="1" />
         <label for="prenom">Prénom:</label>
         <input type="text" name="prenom" id="prenom" value="" tabindex="2" />
<!--...etc -->
    </div>
</form>

-
Edité par philiga 16 avril 2018 à 18:12:18

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

NoobActu

16 avril 2018 à 18:21:46

philiga a écrit:

Cela dit, pour ton 1er tableau, les bonnes pratiques recommandent de ne pas utiliser de tableau pour faire de la mise en page, ce que tu fais ici.

En outre, si je ne m'abuse, c'est un formulaire que tu crées ; le bon codage à adopter est donc plutôt:
<form action="#" method="post">
    <div>
         <label for="name">NOM:</label>
         <input type="text" name="NOM" id="nom" value="" tabindex="1" />
         <label for="name">Prénom:</label>
         <input type="text" name="Prénom" id="prenom" value="" tabindex="2" />
...etc
    </div>
</form>
-
Edité par philiga il y a 3 minutes

Salut,

merci pour ton aide en faite j'essaye de faire une Fiche client quand il m'apporte son matériel je rentre les informations dans mon logiciel que je suis actuellement entrain de coder, pour qu'ensuite il puisse me charger une feuille au format html dans le navigateur avec toutes les données du client et pouvoir l'imprimer avec en haut l'entête de mon entreprise tu vois ce que je veux dire ?

AliasDmc

16 avril 2018 à 18:39:08

Bonjour philiga,

https://codepen.io/Zonecss/pen/ZxgRyo

Découvrez les Css avec la zonecss.fr

NoobActu

16 avril 2018 à 18:48:59

AliasDmc a écrit:

Bonjour philiga,

https://codepen.io/Zonecss/pen/ZxgRyo

Salut AliasDmc !

Parfait ! Exactement ça ! Je vais passé une bonne soirée grâce à vous ^^ 🤓

- Je fonce tout de suite comprendre mes erreurs.

MERCI !