Table, CSS, blanc

Table, CSS, blanc

Bonjour !

Alors voilà, j'ai un petit problème. En local (donc je peux pas vous pointer vers les fichiers), j'essaye d'intégrer proprement un tableau à gauche d'un forum phpbb. phpbb étant majoritairement en "table", j'ai pas eu de scrupule à faire une table plus large qui regroupe à gauche le menu, et à droite le forum. En d'autre termes :
Code:

1 2 3 4 5 6 <table> <tr> <td>menu gauche</td> <td>forum droit</td> </tr> </table>
A priori, c'est tout bête, pas de problème pour inclure un template...

Non mon problème : c'est que le forum droit à tendance à souffrir d'un décalage. Un petit screen pour explique :

http://img47.imageshack.us/img47/6862/youpi2tv5.png

Vous voyez en haut, vers le "view unanswered posts", ben y'a du blanc. Blanc qui augmente à mesure que j'augmente l'espacement entre les différents blocs du menu gauche. Bref, j'ai l'impression que les <br/> et margin-bottom du menu gauche font bouger le forum à droite.

Ma propre solution est toute bête, mettre le forum droit en position absolute. Ce qui donne si je simplifie le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <style> .css_1_gauche table { background-color: #F5F5F5; width: 180px; border: 1px solid black; margin-bottom: 4%; } .css_1_gauche th { color: white; background-color: #993333; width: 180px; height: 25px; border-bottom: 1px solid black; text-align: center; vertical-align: middle; font-size: 10pt; font-weight: bold; } .css_1_gauche td { width: 180px; height: 25px; text-align: left; vertical-align: middle; font-size: 8pt; } . css_2_droit { position:absolute; top:155px; left:230px; width:80%; margin-right:1%; } </style> <html> <table> <tr> <td class="css_1_gauche">menu gauche</td> <td class="css_2_droit">forum droit</td> </tr> </table> </html>
Alors, ça marche très bien avec Firefox, pas mal avec IE... Mais bon, je trouve pas ça très propre de passer par un position absolute pour le forum droit. D'autant plus que pour les redimensions automatiques du forum (image etc...), et bien ça envoie un peu les trucs en l'air.

Bref: y'aurai pas plus simple pour éviter ce retrait vide ?

Voici pour les plus courageux les portions exactes de codes :

OVERALL_HEADER.HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ... <div id="wrapcentre">  <table width="100%"> <tr> <td style="width:20%; margin-left:1%;"></td> <td style="position:absolute; top:155px; left:230px; width:80%; margin-right:1%;">   <p class="searchbar"> <span style="float: left;"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></span>  <span style="float: right;"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span>  </p>  ...
MENU.HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <style> .menu_philautarchie table { background-color: #F5F5F5; width: 180px; border: 1px solid black; margin-bottom: 4%; } .menu_philautarchie th { color: white; background-color: #993333; width: 180px; height: 25px; border-bottom: 1px solid black; text-align: center; vertical-align: middle; font-size: 10pt; font-weight: bold; } .menu_philautarchie td { width: 180px; height: 25px; text-align: left; vertical-align: middle; font-size: 8pt; } </style> <div class="menu_philautarchie">  <table> <th>Philautarchie</th> <tr><td> <A HREF="http://philautarchie.net/viewtopic.php?t=127" title="Histoire d'une appellation non-contrôlée...">Philautarchie ?</a></td></tr> <tr><td> <A HREF="http://philautarchie.net/viewtopic.php?t=109" title="La volonté et le refus de philautarchie">La Politique</a></td></tr> <tr><td> <A HREF="http://philautarchie.net/viewtopic.php?t=112" title="On va te couper la tête">La Charte</a></td></tr> <tr><td> <A HREF="http://philautarchie.net/viewtopic.php?t=192" title="Les dernières mise à jour et innovations">Carnet de bord</a></td></tr> <tr><td> <A HREF="http://philautarchie.net/viewtopic.php?t=1098" title="Syndiquer les données interatives du forums, échanges, réponses aux débats... ">Flux RSS (Infos)</a></td></tr> <tr><td> <A HREF="http://philautarchie.net/Cloud.htm" title="Voir notre nuage de tags">Nuage de tags</a></td></tr> </table> ...
Voilà ^^. Alors bien sûr, c'est pas un conseil phpbb, mais d'un conseil HTML / CSS dont j'ai besoin.

Merci d'avance !

:salut:
ça ne viendrait pas de ça margin-bottom: 4%; puisque tu dis que ça augmente au fur et mesure ?

Citation:

Envoyé par trotters213

:salut:
ça ne viendrait pas de ça margin-bottom: 4%; puisque tu dis que ça augmente au fur et mesure ?

Si si ! Enfin c'est ce que je crois !

Mais du coup, je fais comment comme pour espacer mes tableaux dans le menu gauche ?

et bien donne une valeur fixe en pixel plutôt qu'une valeur en %.

Citation:

Envoyé par trotters213

et bien donne une valeur fixe en pixel plutôt qu'une valeur en %.

Ça fait la même chose.

J'ai aussi essayer de mettre à la fin du menu gauche un margin-bottom: -(tous les margin-bottom), par exemple margin-bottom: -60px histoire de bouffer tous les margin-bottom. Ça marche sous firefox mais pas sous IE.

PS: en tout cas, merci de t'intéresser à mon problème.

et en définissant une hauteur à ton tableau ?

A tout hasard, essaye ça :

Code:

<td valign="top" style="position:absolute; top:155px; left:230px; width:80%; margin-right:1%;">

Citation:

Envoyé par BisounoursJos

A tout hasard, essaye ça :

Code:

<td valign="top" style="position:absolute; top:155px; left:230px; width:80%; margin-right:1%;">

P'tain mais ouais ça marche... Comme je suis quiche. Du coup, même plus besoin de position, mais tout simplement :

Code:

<td valign="top">

Comme quoi... le truc tout bête.

Merci !