[RESOLU] Ne pas utiliser les <table>

[ZeBrian]

Oyez oyez amis inpactiens

Je vois de plus en plus souvent, sur les forums, des développeurs qui prônent la mise à mort de la balise <table> pour la mise en page... J'ai une question pour eux, que j'aimerais régler rien que pour leur faire plaisir

Voilà la page concernée : http://iziupload.info/upload/vu4igkv5p0.html

J'aimerais pouvoir encadrer la partie rouge (redimensionnable en largeur et en hauteur) par les parties noires et grises tout en gardant une interface flexible. En réalité, à la place du noir et du gris, ce seront des dégradés pour mettre en avant la partie rouge. Il m'est donc impossible de juste utiliser un <div> contenant une couleur ou une image de fond, sachant que la largeur est variable (du moins il me semble). Avec des <table>, le problème est réglé d'office mais avec un code moche... Avec des <div> et des "float", j'ai d'une part un problème d'affichage sous IE qui sépare les colonnes d'un espace vide (sûrement réglable par les css) et d'autre part un problème sur tous les navigateurs : je ne trouve pas comment fixer la hauteur des colonnes grises à la même hauteur que la partie rouge !

Vous voyez le problème ?

Merci d'avance !

Problème résolu :

Il ne fallait pas mettre les <div> les unes à la suite des autres mais les imbriquer !

Ce qui donne : http://iziupload.info/upload/afvgzyfhw4.html

Merci !

[Baldurien]

En gros tu veux des bordures customisés.

Quelque chose de ce genre :

<div class="border-top-left">
 <div class="border-top-right">  
<div class="border-bottom-left">
  <div class="border-bottom-right">  
	<div class="border-top">
	  <div class="border-bottom">

	  </div>
	</div>
  </div>
</div>
 </div>
</div>

Ensuite il faut jouer sur les tailles et les fonds.

border-top-left va avoir un fond non répété positionné en (0, 0)

border-top va avoir un espacement de X px sur le haut avant le contenu, et faire le remplissage de la bordure sur le haut.

Etc.

J'ai pas mis le gauche/droite par manque de temps.

Tu remarqueras que oui c'est lourd. Mais que tu ne mélange (clairement) pas le côté sémantique et structurelle du code.

[playstation.2.fg]

En effet, il faut "imbriquer" les div plutôt que de les mettres les uns à coté des autres comme tu le fais dans ton code. Et c'est la div où ton texte sera affiché qui définira la hauteur voulue (et non celles d'au dessus, comme tu fais).

[ZeBrian]

Merci pour vos réponses je vais essayer !

Vive l'inpactitude

Edit : Parfait ça marche ! Même sans tout hiérarchiser, car j'ai laissé les 3 parties verticales les unes à la suite des autres pour simplifier le code...