Site Spip sur 3 colonnes

**ZamZam340** · 09/10/2008, 09h50

Bonjour,

je monte un site sous SPIP, et je voudrais avoir une présentation sur trois colonne : sommaire | contenu | breves (ou agenda)

je précise que chaque colonne doit faire la hauteur totale de la page (je ne veux pas de sommaire ou de brèves dans un coin).

voici le code de ma page /squelettes/sommaire.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
 
<body class="page_sommaire">
 <div id="page">
 
  <INCLURE{fond=inc-entete}> <!-- bannière du site : OK --> 
 
  <div id="hierarchie"><:accueil_site:></div>  <!-- fil d ariane : OK -->
 
  <div id="conteneur">
    <div id="navigation">  <!-- sommaire à gauche -->
	<INCLURE{fond=inc-rubriques}>
    </div>
 
    <div id="contenu">
	<h1 class="invisible">#NOM_SITE_SPIP</h1>
	<!-- contenu de la page sommaire -->
 
	<br class="nettoyeur" />
    </div> <!-- fin contenu -->
 
    <div id="encart"> <!--- menu brèves à droite --->
      <B_breves>
	<div class="breves">
	  <h2 class="menu-titre"><:dernieres_breves:></h2>
	    <ul>
		<BOUCLE_breves(BREVES) {par date}{inverse} {0,5}>
			<li>[(#DATE|affdate_court) &ndash; ] <a href="#URL_BREVE">#TITRE</a>
			</li>
		</BOUCLE_breves>
	    </ul>
	</div> <!-- fin breves -->
      </B_breves>
    </div> <!-- fin encart -->
   </div><!-- fin conteneur -->
 
   <INCLURE{fond=inc-pied}{skel=#SQUELETTE}>
 
 </div><!-- fin page -->
</body>

voici un bout de mon fichier /squelettes/habillage.css :

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
#page {
	width: 80%;
	text-align: justify;
	margin-left: auto;
	margin-right: auto;
	padding: 1%;
	background: #FECC05; /*couleur orange safran*/
}
 
#conteneur { width: 100%; }
 
#conteneur #navigation {
	float: left;
	width: 15%;
	text-align: center;
	padding: 2%;
}
 
#conteneur #contenu {
	width: 68%;
	background: #FFFFA6; /*fond couleur sable*/
	padding: 2%;
}
 
#conteneur #encart {
	float: right;
	width: 15%;
	text-align: left;
	padding: 2%;
}

Le résultat est assez mauvais aujourd'hui :
-IE 6 : le sommaire et le contenu sont bien placés, le menu de droite est situé à droite, mais tout en bas sous la partie contenu
- Firefox 3 : c'est pire, la page de contenu "déborde" à gauche, c'est à dire que le fond 'couleur sable' du contenu recouvre le fond du sommaire ; et la mise en page du contenu est déformé (un chapeau, beaucoup d'espace, le reste de l'article qui commence à la fin du sommaire). Le menu de droite est situé à droite, mais tout en bas sous la partie contenu

Quelqu'un aurait une idée svp ?