Jump to content

[RESOLU] Ne pas utiliser les <table>


Recommended Posts

Oyez oyez amis inpactiens :transpi:

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 :-D

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 ? :D

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 !

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Merci pour vos réponses je vais essayer !

Vive l'inpactitude :chinois:

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...

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...