Un petit problème de Cellule.

Bonjour,

J'aimerais construire un tableau simple à 3 cellules.
Pour cela j'ai joint une image pour mieux me faire comprendre :




Pour réaliser ce tableau, voilà "l'horrible" code que j'ai utilisé.

<table width="500" height="1" border="1">
  <tr>
    <td><img src="image.jpg" width="286" height="400" /></td>
    <td>
    
    <table width="100%" height="100%" border="1">
      <tr>
        <td bgcolor="#408999"></td>
      </tr>
      <tr>
        <td height="1" bgcolor="#9a1208">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus faucibus varius. In hac habitasse platea dictumst.</td>
      </tr>
    </table>
    
    </td>
  </tr>
</table>

- il y a une <table> incluse dans une autre <table>
(un peu too much pour un petit code comme ça !)

- il y a également deux "forçages" de <height>, avec :
height = "1" pour le tableau ainsi que pour la cellule rouge.
Ces hauteurs ne veulent rien dire en soi, mais si je ne les mets pas,
ça ne fonctionne plus.

Ma question est la suivante :
N'y aurait-t-il pas un code plus simple et plus sain au niveau sémantique ?

Merci.

Quelques pistes:

1. Un tableau avec deux cellules, avec la deuxième en vertical-align:bottom (et pour le bloc rouge, un simple DIV ou P).
2. Même chose qu'en (1), mais en utilisant des éléments HTML sémantiquement neutres (donc DIV a priori) et du display:table-cell en CSS (support à partir d'IE8).
3. Il y a peut-être un coup à jouer avec display:inline-block aussi (support à partir d'IE8, on peut obtenir un rendu similaire dans IE7 avec du hasLayout mais le rendu risque d'être trop différent pour que ça soit gérable ici).

Histoire de jouer à l'optimisation, si la largeur de l'image et du bloc total est fixe, on pourrait faire cela avec un html de la sorte:

<div id="my-content">
  <img …blablabla… />
  <div class="description">
    …bla bla…
  </div>
<div>

ainsi:

#my-content {
  width: 640px;
  position: relative;
  background: blue url('fake-column.png') repeat-y;
}
#my-content .description {
  width: 200px;
  position: absolute;
  background-color: red;
  bottom: 0;
  right: 0;
}

avec l'astuce des fausses-colonnes !

Tout d'abord merci à vous (fvsch et kustolovic) pour vos réponses.
Vos différentes solutions marchent parfaitement, cependant j'ai absolument besoin de la cellule bleue. J'avais ommis de préciser cela dans un souci de clarté, et pour ne pas surcharger le sujet de mon topic.

En fait, je voudrais placer un <div> qui fera 100% de la hauteur de la cellule bleue.

Je joins une image pour être tout a fait clair.

Bonjour,

Quelle compatibilité navigateur souhaites-tu atteindre, enfin quels sont les navigateurs à supporter dans ton projet ?

Quel contenu y aura-t-il dans cette cellule bleue, en haut à droite ? Une image de fond ou autre graphisme décoratif ? Du texte ? Autre ?
Est-ce que le texte à droite peut représenter, en proportion, plus de la moitié de la hauteur de la photo à gauche ou bien est-ce que c'est toujours beaucoup plus court ?
Modifié par Felipe (02 Jun 2012 - 10:22)

Bonjour Felipe,

   • Pour la compatibilité, ce sont les "grands classiques":
Firefox, Safari, Chrome, Opera et quand à Explorer, à partir de 8, ça ira.

   • La cellule bleue contiendra uniquement deux <div> de hauteur 100% de cette cellule (ces <div> auront un design en "background-image"). Sinon, c'est tout pour cette cellule bleue. Pas de <img>, pas de texte.

   • Le texte à droite (la cellule rouge), pourra représenter plus de la moitié de la hauteur de l'image de gauche. Jusqu'à 90% de cette hauteur dans certains cas. Si le contenu de cette cellule rouge devient trop important, il y aura un "overflow:scroll".

href a écrit :
En fait, je voudrais placer un <div> qui fera 100% de la hauteur de la cellule bleue.

J'ai envie de dire pourquoi pas, c'est peut-être un besoin réel et justifié.
Mais quand je lis ce genre de phrase je ne peux pas m'empêcher de lire, en paraphrasant: «je voudrais [appliquer une solution technique particulière à un problème de design] [dans un contexte qui est déjà une solution technique particulière à un problème de design]». Et du coup je me demande toujours: et si ces solutions choisies sont juste mauvaises? et si on pouvait faire plus simple?

Donc: quel est le design visé au juste?

OK, je montre un exemple concret de design.
En fait il s'agit de faire un musée avec des oeuvres photographiques.

L' histoire des <div> à 100% de hauteur, correspond aux câbles qui vont soutenir le contenu d'information de chaque oeuvre.

Je joins 2 images, pour être tout à fait clair.

Oups...petite erreur de manip'.
Voici les images

Salut,

Pour tes cables, pas besoin d'un div a 100% de ta cellule, si elle s'ajuste automatiquement grâce a le contenu du dessous, une background-images avec un repeat-y et le tour est joué

En tout cas, je surkiffe ton design
Modifié par JJK801 (08 Jun 2012 - 17:02)

Un simple background repeat-y sur la colonne de droite et tu as tes cables, pas besoin d'avoir encore un block avec une hauteur de 100%.

Lol cela fonctionne en effet avec la solution que j'ai proposé plus haut, où j'avais déjà mis un background-repeat: repeat-y.
Modifié par kustolovic (08 Jun 2012 - 17:40)

JJK801 a écrit :
Salut,

Pour tes cables, pas besoin d'un div a 100% de ta cellule, si elle s'ajuste automatiquement grâce a le contenu du dessous, une background-images avec un repeat-y et le tour est joué

Justement..! Le problème est que cette cellule ne s'ajuste pas automatiquement.
Ok pour le "background-image" plutôt qu'un <div>, mais dans tous les cas, il faudrait que cette cellule (la cellule bleue de l'exemple au début du topic) soit "collée" à la cellule rouge.

Que le bas de la bleue colle au haut de la rouge.
En fait, comme dans tableau normal..!

J'ai fait un code pour ça (cf. le haut du topic), qui fonctionne, certes, mais qui, sémantiquement est parfaitement épouvantable

Je cherche une solution simple, pour la hauteur de cette cellule bleue.

Eh, non...! Pas si cette cellule est en bas de tableau.

Je vais poser mon problème plus simplement :


Voilà le code d'un tableau à 3 cellules :
(important : la hauteur du tableau dépend de la hauteur de l'image de gauche)

<table width="500" border="1">
  <tr>
    <td rowspan="2"><img src="image.jpg" width="286" height="400"></td>
    <td bgcolor="#408999">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#9a1208">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus faucibus varius. In hac habitasse platea dictumst.</td>
  </tr>
</table>

Avec ce genre de code très simple, j'obtiens ceci :





Comment faire pour obtenir cela :



C'est-à dire que la cellule rouge "colle" à son contenu
et que la cellule bleue remplisse le restant du haut.

salut, à bien vous comprendre, vous utilisé la balise table pour faire un alignement automatique, comme dans les anciennes versions d'il y a quelques années.

Ce ne serait pas plus judicieux de tout faire avec des balises div ?

height: 1px sur ta cellule du bas...
Modifié par 6l20 (14 Jun 2012 - 09:57)

Je constate que Kustolovic a donné une solution différente, avec uniquement des div que je trouve tout à fait correcte.
De plus, cette solution respecte les standards du web que ce forum tente d'appliquer.

Et là, on est partie sur une solution avec un table qui n'est plus standard pour faire du positionnement. Solution que l'on faisait jadis.
Je me pose simplement la question de ce choix.
Est-ce parce que HREF ne sait pas faire autrement ?

*Cf réponse de Florent plus loin
Modifié par 6l20 (14 Jun 2012 - 10:00)

Pour adapter ta cellule à la taille du texte, tu lui mets une hauteur de 1px.

C'est sûr que si une solution CSS peut remplacer ta table ce serait l'idéal, mais ton design est tellement intéressant, je pense qu'il ne faut pas le sacrifier juste à cause d'un tableau de 3 cellules...

* Passage de la Mère Denis.
* @JJK801 & tournikoti : Merci d'éviter les commentaires désobligeants, les attaques personnelles et hors sujet.
* Tant que j'y suis, on s'applique sur l'orthographe
Modifié par 6l20 (14 Jun 2012 - 10:11)

Hélas non, JJK801,
Ça ne fonctionne pas...

Le coup de mettre un "height: 1px" fonctionne très bien dans le cas d'une seule colonne avec deux cellules, comme sur l'exemple ci-dessous :




Mais dans mon cas précis de tableau à trois cellules, ça ne marche pas.
Je pense que c'est le "rowspan" qui est en cause.