Bonjour, je rencontre un petit problème de superposition si ma div est pas remplis :

https://jsfiddle.net/Serg78/cg3rdnha/

J'aimerai que même si dans la div il y a rien, il y a pas de superposition par exempe si j'ai un champs "Manger bien :" qui est vide alors il m'affiche " Manger bien : " avec rien à coté.

J'utilisais les tableaux avant pour faire ça, mais je me suis rendu compte que c'étais pas la bonne solution, donc je le fais avec les div.

11 réponses


Genki
Réponse acceptée

Rajoute ça dans ton css, sur le td

td {
/* ce qu'il y a déjà */
  vertical-align: top;
}

Pourquoi pas un tableau? Là ça fait beaucoup de div à mon goût... Même sans tableau j'aurais plutôt fait 4 div, une englobant tout, une pour le titre et les deux autres pour les deux colonnes.

Serg77
Auteur

Je préfère ne pas prendre de tableau et le faire avec des divs, j'aimerai faire évolué mon code plus facilement avec des divs.

Non mais non, tu peux juste pas faire "ça", en disant je veux pas de tableau. Visuellement ce que tu essayes de faire c'est UN TABLEAU.
Tu vas pas réinventer la roue, tu pourras tout autant faire évoluer ton code avec un tableau. La c'est dégueulasse comme code, vraiment.
J'ai fait en 10s ce que tu galères depuis tout à l'heure :

HTML

Aurore Bal
  <table>
    <tbody>
      <tr>
        <td>Age :</td>
        <td>13 ans</td>
      </tr>
      <tr>
        <td>Ville natale :</td>
        <td>dqsdd</td>
      </tr>
      <tr>
        <td>Situation familiale :</td>
        <td>Célibataire</td>
      </tr>
      <tr>
        <td>Langues :</td>
        <td>Turque</td>
      </tr>
      <tr>
        <td>Sexe :</td>
        <td>Masculin</td>
      </tr>
      <tr>
        <td>Mange bien :</td>
        <td></td>
      </tr>
      <tr>
        <td>Mange pas :</td>
        <td></td>
      </tr>
      <tr>
        <td>Autres services :</td>
        <td></td>
      </tr>
    </tbody>
  </table>

CSS :

table{
  border-collapse: collapse;
}

table>tbody>tr>td:first-child {
  color: #808080;
  width:250px;
  font-size: 15px;
}

table>tbody>tr>td:last-child {
  color: #45668f;
  font-size: 15px;
}

Rendu : https://jsfiddle.net/cg3rdnha/32/

Serg77
Auteur

Mais je suis conscient que avec les tableaux mon problème peut se rédoudre, mais le problème c'est ça => https://jsfiddle.net/Serg78/msqtmLu0/

Le gros décallage des informations à cause du tableau, j'aimerai que les elements soit alligné au même endroit. C'est pour ça que je voulais faire sans tableau, pour résoudre ce problème qui me fait chier un peu.

Qu'est ce qui t'empêche de le faire ? Règle les espaces entre les cellules, définit une taille minimum de cellule, y a plein de solutions à ta porté

Serg77
Auteur

Je sais pas le faire en css avec les tableaux si mon tableau doit être aligné comme le tableau du haut.

Le problème se trouve peut-être là justement, prendre une solution de facilité parce qu'on ignore qu'il y a plus simple sous prétexte "qu'on ne sait pas faire", c'est pas la meilleure solution.

Et je crois que tu as suffisamment de tutos sur internet pour texpliquer ça, c'est vraiment pas le plus compliqué.
C'est bien beau de vouloir pondre un site, mais si tu te reposes sur le code que les autres te font parce que tu veux pas apprendres les bases, tu t'en sortiras pas :/

Je veux bien t'aider, mais, il faut que tu y mettes du tiens aussi

Serg77
Auteur

Je vais essayé de le faire en css avec le tableau, mais ça va être galère.

Serg77
Auteur

En clair, un truc comme ça ? => https://jsfiddle.net/Serg78/5ow467oL/

Normalement c'est OK là je pense, mais j'arrive pas fixé l'element de gauche en haut (par exemple pour "activité".

Bonjour,
avec quelques fioritures ( responsive, background-color, hover...) pour faire joli :)

https://jsfiddle.net/canfrere/0v73ct1e/4/

Cela devrait résoudre ton problème avec des div, mais au niveau sémantique html il est effectivement plus opportun d'utiliser un tableau, c'est fait pour ça, afficher des données : https://jsfiddle.net/canfrere/6r3u2j6s/4/