28111 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement d'objet HTML dans un header de site

Bonjour,

Le header de mon site dont l'image est jointe est mis page par un tableau, ce qui je pense n'est pas très conforme, a moins d'un avis contraire de votre part.

<header> 
  <table class="debut">
    <tr> 
      <td><?php include("../image/aleatoire.inc.php");?></td>
      <td><div class="titre"><a href="../entree.php?page=entree">ChronoGénéaLogie<br/>
          de Viviane EVRARD &amp; Patrick MARA</a></div></td>
      <td> <?php include("../compaf/menu/menu_header.inc.php");?> </td>
    </tr>
  </table>
</header>


table.debut {
width: 100%;
}


J'ai essayé avec des 
<span>
et des boîtes en 
display: inline-block;
mais sans résultat.

Je crois que le problème vient de l'image à gauche du header, en fait c'est une image aléatoire choisie dans un dossier par un code HTML.
Les cellules du milieu est de droite contiennent du texte.

Comment présenter ce header comme l'image jointe sans faire appel à un tableau ?

A force d'être cloué dans un problème on devient aveugle.

Merci pour votre aide
Modérateur
Bonjour,


Je crois qu'au moment de joindre l'image, après avoir cliqué sur "Envoyer" tu as oublié de cliquer sur le bouton "Valider et insérer" Smiley lol

Sinon, sans le visuel, une mise en page par un tableau c'est un peu old-school et rigide mais rien d'illégal la dedans (normalement).

Si tu veux passer à une structure plus récente et comme tu n'a qu'une seule ligne, utilise plutôt un positionnement en flex ( https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html ) avec des div.

<header class="header"> 
      <div><?php include("../image/aleatoire.inc.php");?></div>
      <div class="titre"><a href="../entree.php?page=entree">ChronoGénéaLogie<br/>
          de Viviane EVRARD &amp; Patrick MARA</a></div>
      <div> <?php include("../compaf/menu/menu_header.inc.php");?> </div>
</header>



.header {
      display: flex;
}
.header div {
      flex: 1 1;
}

https://jsfiddle.net/6c3dwys7/

Pour la taille des 3 bloc dedans il nous manque l'image ou un peu plus de description (est-e que le coté gauche prend seulement la taille de l'image ou pas du tout, est-ce que le milieu prend une taille spéciale etc etc...)

Bonne soirée
Modifié par _laurent (07 Jan 2020 - 21:57)
Meilleure solution
Bonjour,

Désolé pour le raté sur l'image qui devait être jointe.
Je ne connaissais pas le concept Flexbox, après prise d'informations, je l'ai appliqué et cela fonctionne bien.
Merci pour votre aide.

Bien cordialement.
Sujet clos
Aller à