Table, CSS, blanc

**Silent** · 26/09/2006, 12h10

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 :

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>

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 :

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 :

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>

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 :

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 !

**trotters213** · 26/09/2006, 12h23

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

**Silent** · 26/09/2006, 12h27

Envoyé par trotters213

ç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 ?

**trotters213** · 26/09/2006, 12h30

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

**Silent** · 26/09/2006, 12h35

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.

**trotters213** · 26/09/2006, 14h03

et en définissant une hauteur à ton tableau ?

Table, CSS, blanc

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager