Taille de tableau dynamique

Bonjour à tous, j'essaye de faire un truc assez compliqué. En réalité ca marche trés bien sous firefox. Par contre IE s'emmele les pinceaux a cause du rowspan d'aprés ce que j'ai lu.

Voila le résultat que j'essaye d'obtenir:




Si qq'un peut me donner le modele pour ce genre d'emboitement, parceque la je seche.

p..... de IE.....
Modifié par Igor (10 Jul 2007 - 09:56)

Salut,

Vu la capture d'écran que tu montre, aucune nécessité d'utiliser un tableau.

Sinon, vu que ce n'est pas dans l'esprit du forum de faire le travail des autres, il serait bien que tu nous montre une page en ligne ou l'intégralité de ton code html et css pour que nous puissions te guider et t'aider à le faire par toi même.

Actuellement ce qui marche sous firefox et pas sous ie:

    <table cellpadding="0" cellspacing="0" width="<?=$taille ?>">
      <tr>
        <td class="bloc_g1"> </td>
        <td class="bloc_g2" style="width:<?=$tailled ?>px;"> </td>
        <td class="bloc_g3"> </td>
        <td class="bloc_g4" style="width:<?=$tailled ?>px;"> </td>
        <td class="bloc_g5"> </td>
      </tr>
      <tr>
        <td class="bloc_g6"> </td>
        <td class="bloc_g7" rowspan="3" colspan="3">
           Texte ici
        </td>
        <td class="bloc_g8"> </td>
      </tr>
      <tr>
        <td class="bloc_g9"> </td>
        <td class="bloc_g10"> </td>
      </tr>
      <tr>
        <td class="bloc_g11"> </td>
        <td class="bloc_g12"> </td>
      </tr>
      <tr>
        <td class="bloc_g13"> </td>
        <td class="bloc_g14" style="width:<?=$tailled ?>px;"> </td>
        <td class="bloc_g15"> </td>
        <td class="bloc_g16" style="width:<?=$tailled ?>px;"> </td>
        <td class="bloc_g17"> </td>
      </tr>
    </table>

$tailled etant le width diviser par 2.

les styles:

.bloc_g1 {background: url(../STRUCTURE/bloc_central_gauche.png) no-repeat 0 0;width:40px;height:40px;}
.bloc_g2 {background: url(../imagedyn.php?x=2&y=40&xpos=40&ypos=0&img=STRUCTURE/bloc_central_gauche.png);font-size:1px;}
.bloc_g3 {background: url(../STRUCTURE/bloc_central_gauche.png) no-repeat -113px 0;width:150px;}
.bloc_g4 {background: url(../imagedyn.php?x=2&y=40&xpos=40&ypos=0&img=STRUCTURE/bloc_central_gauche.png);font-size:1px;}
.bloc_g5 {background: url(../STRUCTURE/bloc_central_gauche.png) no-repeat -336px 0;width:40px;}

.bloc_g6 {background: url(../imagedyn.php?x=40&y=2&xpos=0&ypos=40&img=STRUCTURE/bloc_central_gauche.png);width:40px;}
.bloc_g7 {background-color:#4e4e4e;vertical-align:top;font-size:10px;font-family:Verdana;color:#CCCCCC;}
.bloc_g8 {background: url(../imagedyn.php?x=40&y=2&xpos=336&ypos=40&img=STRUCTURE/bloc_central_gauche.png);width:40px;}

.bloc_g9 {background: url(../STRUCTURE/bloc_central_gauche.png) no-repeat 0 -57px;width:40px;height:42px;}
.bloc_g10 {background: url(../STRUCTURE/bloc_central_gauche.png) no-repeat -336px -55px;width:40px;height:42px;}

.bloc_g11 {background: url(../imagedyn.php?x=40&y=2&xpos=0&ypos=126&img=STRUCTURE/bloc_central_gauche.png);width:40px;}
.bloc_g12 {background: url(../imagedyn.php?x=40&y=2&xpos=336&ypos=98&img=STRUCTURE/bloc_central_gauche.png);width:40px;}

.bloc_g13 {background: url(../STRUCTURE/bloc_central_gauche.png) no-repeat 0 -126px;width:40px;height:30px;}
.bloc_g14 {background: url(../imagedyn.php?x=2&y=40&xpos=40&ypos=126&img=STRUCTURE/bloc_central_gauche.png);font-size:1px;}
.bloc_g15 {background: url(../STRUCTURE/bloc_central_gauche.png) no-repeat -113px -126px;width:150px;}
.bloc_g16 {background: url(../imagedyn.php?x=2&y=40&xpos=40&ypos=126&img=STRUCTURE/bloc_central_gauche.png);font-size:1px;}
.bloc_g17 {background: url(../STRUCTURE/bloc_central_gauche.png) no-repeat -336px -126px;width:40px;}

Personnellement je vois pas comment le faire avec des div et faire en sorte que seul ceux en rouge ce redimentione.

<modération>Merci d'éviter d'employer 3 mots grossiers tous les trois mots.</modération>
Modifié par Mikachu (10 Jul 2007 - 09:42)

Salut,

Aurais tu une page en ligne qui simplifierait VRAIMENT la tâche pour t'aider, car entre les bouts de codes contenant des valeurs dont on ignore la teneur, code ou les styles sont denses et illisibles, une capture d'écran peu explicite et des explications assez maigre j'ai pense que tu risque de rester longtemps sans réponse.

Bonjour,

Et aussi : est-ce que l'image correspond vraiment au design à réaliser, ou bien s'agit-il d'une version simplifiée qui zappe peut-être quelques nuances de mise en page? Et comment cela doit-il se comporter précisément lors de l'agrandissement de la zone de contenu?

En l'état, c'est effectivement assez vague.

Je sais pas si ça peut vous aidez plus:

ici

J'ai simplifier un peu le code pour enlever les images de background et j'ai mit des couleurs à la place.

Si vous passez sous firefox vous verrez que tout va bien, seul les zones rouges se redimensionne. Par contre sous ie ça ne marche pas.

Florent V. a écrit :
Bonjour,

Et aussi : est-ce que l'image correspond vraiment au design à réaliser, ou bien s'agit-il d'une version simplifiée qui zappe peut-être quelques nuances de mise en page? Et comment cela doit-il se comporter précisément lors de l'agrandissement de la zone de contenu?

En l'état, c'est effectivement assez vague.

Non c'est le code tel qu'il doit être. Lorsque le contenu grossit ou diminue, seules les zones rouges doivent diminuer ou augmenter afin de s'adapter. Les zones bleus doivent garder leur taille. Elles existeront donc tjs même si le contenu est vide.

Vous noterez que je triche déja pour gérer la largeur je passe par des variables php. Sinon problème de redimentionnement également.

Si tu travailles avec une largeur fixe en pixels, utiliser un tableau me semble tout à fait superflu.

Tu pourrais avoir un code HTML comme suit:

<div id="conteneur"><div id="conteneur-bis"><div id="conteneur-ter">
	<div id="contenu">...</div>
</div></div></div><!-- fin de div#conteneur -->

Couleur de fond et image de fond centrée verticalement pour #conteneur (on dessine la couleur de fond rouge et les zones bleues du milieu), image de fond non répétée et alignée en haut pour #conteneur-bis («bordure» du haut), image de fond non répétée et alignée en bas pour #conteneur-ter («bordure» du bas). Le bloc gris correspond à div#contenu, que l'on pourra placer ainsi grâce à des marges, et auquel on pourra donner une hauteur minimale (min-height) si besoin.

En largeur fluide... là ça devient plus prise de tête. Le design que tu montres, avec juste des couleurs de fond, peut se gérer facilement. Mais le vrai design sera peut-être plus compliqué à mettre en place (d'où ma question de tout à l'heure: à quoi cela doit-il ressembler in fine?).

En fait les zones bleu (donc les coins et les parties centrales) sont des images de taille fixe à afficher en permanence.

Les zones rouges sont également des images, mais qui se répètent à l'infinie selon le besoin.

Concernant les largeur, en fait le problème est qu'il est à moitié fixe et à moitié fluide.

A savoir, je lui passe la largeur en paramètre (d'ou les variables en php), par contre la hauteur elle, doit s'adapter au contenu.

Wells83 a écrit :
A savoir, je lui passe la largeur en paramètre (d'ou les variables en php), par contre la hauteur elle, doit s'adapter au contenu.

Si tu as un nombre prédéterminé et pas trop important de largeurs possibles, c'est jouable.

Sinon, pour une largeur fluide... garde un tableau, mais fais plutôt un tableau à 9 cellules (contenu dans la cellule centrale. Tu places les coins (pas de problème pour ça), et pour chacun des quatre bords tu as:
- une image de fond (rouge);
- une image dans le code HTML (et si c'est de la déco pure, ne pas oublier de mettre un attribut alt vide: <img src="..." alt="">), image centrée horizontalement (td {text-align: center;}) ou verticalement (td {vertical-align: middle;}.

Avec un tableau à 9 cellules, et sans colspan/rowspan dans tous les sens, ça devrait être très gérable avec tous les navigateurs.

Heu je comprend pas trop ce que tu veux dire par 9 cellules.

Ce n'est pas la largeur qui varie. Elle est fixe. c'est la hauteur qui elle s'adapte qui pose problème.