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 :
A priori, c'est tout bête, pas de problème pour inclure un template...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 <table> <tr> <td>menu gauche</td> <td>forum droit</td> </tr> </table>
Non mon problème : c'est que le forum droit à tendance à souffrir d'un décalage. Un petit screen pour explique :
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 :
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.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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"> <!-- MENU PHILAUTARCHIE : Inclusion du forum dans une table plus générale --> <table width="100%"> <tr> <td style="width:20%; margin-left:1%;"><!-- INCLUDE menu.html --></td> <td style="position:absolute; top:155px; left:230px; width:80%; margin-right:1%;"><!-- Reste du forum --> <!-- MENU PHILAUTARCHIE --> <!-- IF S_DISPLAY_SEARCH --> <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> <!-- IF S_USER_LOGGED_IN --> <span style="float: right;"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span> <!-- ENDIF --> </p> <!-- ENDIF --> ...
MENU.HTML
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 Sommaire 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 !
Partager