[CSS]Mise en page de 3 colonnes

**calimero82** · 10/06/2005, 08h48

bonjour,
je souhaiterais créer un emise en page de 3 colonnes à l'aide des css.
J'ai donné une taille fixe au colonne de droite et de gauche qui continnent menu et news; par contre, j'aimerais que la colonne du milieu ayant le contenu de la page se redimensionne en fonction de la résolution (dc s'adapte).
Ms j'obtiens un bug d'affichage sous firefix et ie: en fait la contenu de ma page est représenté ainsi : j'ai un bandeau qui contient le titre de la rubrique et en dessous le texte.
le bandeau de titre possède 2 images de coin arrondi.
Et dc le bug d'affichage est le suivant :
1. j'ai mon coin gauche qui s'affiche correctement
2. j'ai mon bandeau qui prend uniquement la taille du mot "accueil"
3. j'ai mon coin droit qui s'affiche correctement

Suis-je claire??
Voici ma feuille de style :

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
 
     #colgauche
        {
        position: absolute;
        left:10px;
        width:200px;
        }
 
      #coldroite
        {
       position: absolute;
        right:10px;
        width:200px;
        }
 
      #colcentrale
        {
        margin-left: 212px;
        margin-right:212px;
        voice-family: "\"}\"";
        voice-family: inherit;
        margin-left: 214px;
        margin-right:214px;
        }

voici ma page web à l'endroit du bug :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
		<!-- Contenu -->			
		<div id="colcentrale">
			<table border="0" cellspacing="0" cellpadding="0">
			  <tr class="bleuFonce"> 
				<td><img src="../../images/miseEnPage/barreBleuCoinL.jpg"></td>
				<td class="bleuFonceTitre"><font class="grosTitreBlanc">Accueil</font></td>
				<td><img src="../../images/miseEnPage/barreBleuCoinR.jpg"></td>
			  </tr>
			  <tr> 
				<td colspan="3">&nbsp;</td>
			   </tr>
			 </table>
		</div>

Merci d'avance pour vos explications et votre aide.

**hunter** · 10/06/2005, 08h55

hum y a déjà un truc bizar au css tu défini 2 fois les marges ... mais sinon je vois pas donne aussi le code des 2 autres colonne ...

**calimero82** · 10/06/2005, 09h02

en fait, j'ai définit deux fois les marges pour la colonne central car ie et ff ne calcule par les width de la mm manière. Ms je vais supprimer ceci.

voici les autres colonnes, ds la première il y'a un menu en javascript pour afficher l'arborescence du menu.

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
 
  <div id="colgauche"> 
    <!-- Menu -->
    <table border="0" cellspacing="0" cellpadding="0">
      <tr> 
        <td><img src="../../images/miseEnPage/coinBleuL.jpg" border="0"></td>
        <td class="bleuFonceTitre" width="180"><font class="grosTitreBlanc">Menu</font></td>
        <td><img src="../../images/miseEnPage/coinBleuR.jpg" border="0"></td>
      </tr>
      <tr class="bleuClair"> 
        <td colspan="3"> 
          <!-- Menu dynamique -->
          <SCRIPT>
									//tableau comprenant les grandes parties
									var titre = new Array();
									titre[0] = "Exploitation"; titre[1] = "Environnement";  titre[2] = "Déchets"; titre[3] = "PAE";
									titre[4] = "Sécurité"; titre[5] = "Logistique"; titre[6] = "Télécharger Instruction";
 
									// Voici la méthode qui sera appelé lors d'un click sur un fichier
									// doit obligatoirement prendre l'index puis le texte du noeud en paramétre
									function OnClickFichier( index, texte )
									{
										alert( "click sur le fichier : " + texte )
									}
									// Celle-là sera appelée lors d'un click sur un dossier
									function OnClickDossier( index, texte )
									{
										treeView.Noeuds( index ).ChangerExpand( ! treeView.Noeuds( index ).isExpand )
									}
									// Instancie la treeView en lui indiquant les styles du contour et de la racine
									treeView = new TreeView( "BordTreeView", "Images/Réseau.gif", "Réseau", "Racine", "RacineOver", "" )
									for( var indicePoste = 0; indicePoste < 7; indicePoste ++ )
									{
										// Ajoute un noeud
										var poste = treeView.Add( "../../images/menu/Dossier.gif", titre[indicePoste], "Poste", "PosteOver", "OnClickDossier" )
										switch( indicePoste )
										{
										case 0 :
												poste.Add( "../../images/menu/Fichier.gif", "Consignes", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Planning", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Incidents", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Instruction", "Noeuds", "NoeudsOver", "OnClickFichier" )
											break
										case 1 :
												poste.Add( "../../images/menu/Fichier.gif", "SME", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Diagnostic", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Revue de Direction", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Indicateurs", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Veille Réglemenataire", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Archives", "Noeuds", "NoeudsOver", "OnClickFichier" )
 
											break
										case 2 :
												poste.Add( "../../images/menu/Fichier.gif", "Pourquoi trier?", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Coûts recyclage", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Suivi", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Statistique", "Noeuds", "NoeudsOver", "OnClickFichier" )
 
											break
										case 3 :
												poste.Add( "../../images/menu/Fichier.gif", "Visualiser", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Planning", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Créer", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Rechercher", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Synthèse", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Archive", "Noeuds", "NoeudsOver", "OnClickFichier" )
 
											break
										case 4 :
												poste.Add( "../../images/menu/Fichier.gif", "Formation", "Noeuds", "NoeudsOver", "OnClickFichier" )
										case 6 :
												poste.Add( "../../images/menu/Fichier.gif", "Consignes", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Procédures", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Situation d'urgence", "Noeuds", "NoeudsOver", "OnClickFichier" )
												poste.Add( "../../images/menu/Fichier.gif", "Autres fiches", "Noeuds", "NoeudsOver", "OnClickFichier" )
											break
										}
									}
									// Lance la création de la treeView
									treeView.Start()
									for( var indicePoste = 0; indicePoste < 7; indicePoste ++ )
										treeView.Noeuds( "0_" + indicePoste ).ChangerExpand( false )
								</SCRIPT> 
			</td>
      </tr>
    </table>
  </div>
		<!-- fin Menu -->
 
		<!-- Consigne + news actu-environnement -->
  <div id="coldroite"> 
    <table border="0" cellspacing="0" cellpadding="0">
      <tr> 
        <td><img src="../../images/miseEnPage/coinBleuL.jpg" border="0"></td>
        <td class="bleuFonceTitre" width="180"><font class="grosTitreBlanc">Consignes</font></td>
        <td><img src="../../images/miseEnPage/coinBleuR.jpg" border="0"></td>
      </tr>
      <tr class="bleuClair"> 
        <td colspan="3">&nbsp;</td>
      </tr>
	  <tr><td>&nbsp;</td></tr> <!-- espace entre les deux tableaux -->
	  <tr>
        <td class="orangeFonce"><img src="../../images/miseEnPage/coinOrangeR2.jpg" border="0"></td>
        <td class="orangeFonceTitre" ><font class="grosTitreBleu">News Environnement</font></td>
        <td><img src="../../images/miseEnPage/coinOrangeR.jpg" border="0"></td>
      </tr>
      <tr class="orangeClair"> 
        <td colspan="3" align="center">
			<script language="javascript">
			// identifiant de la news
			var idnews = 1808;
			// nombre d'articles à afficher
			var nbItemsMax = 4;
			// 1 pour ne pas afficher l'entête, 0 pour l'afficher
			var nohead = 1; //1
			// couleur de fond de l entete (ne pas mettre le "#")
			// mettre null pour la transparence
			var colorHeader = "999999"; //999999
			// couleur de fond de l article (ne pas mettre le "#")
			// mettre null pour la transparence
			var colorArticle = null;
			// 1 pour ne pas afficher la description, 0 pour l'afficher
			var nodesc = 0;
			// 1 pour ne pas afficher la date, 0 pour l'afficher
			var nodate= 1;
			// largeur de la section
			var width = 180;
			// longueur du titre (null pour laisser la longueur normale du titre, sinon un chiffre pour tronquer)
			var titre_size = 80;
			var urlstylesheet = "../css/global.css";
			// pour aller plus loin et revoir le rendu des polices...
			// il suffit de s'inspirer de la feuille de style suivante
			// >> http://www.lamoooche.fr/rss.css
			<!-- bloc permettant d'afficher les news -->
			document.write('<s'+'cript language="JavaScript" type="text/javascript" SRC="http://www.lamoooche.fr/jscript/shownews2.php?idnews='+idnews
			+ '&nbItemsMax=' + nbItemsMax
			+ '&nohead=' + nohead
			+ '&nodesc=' + nodesc
			+ '&nodate=' + nodate
			+ '&titre_size=' + titre_size
			+ '&colorHeader=' + colorHeader
			+ '&colorArticle=' + colorArticle
			+ '&width=' + width
			+'"></sc'+'ript>');
			</script>
 
 
 
		</td>
      </tr>
    </table>
  </div>
		<!-- fin consignes et news -->
 
		<!-- Contenu -->			
		<div id="colcentrale">
			<table width="600" border="0" cellspacing="0" cellpadding="0">
			  <tr class="bleuFonce"> 
				<td><img src="../../images/miseEnPage/barreBleuCoinL.jpg"></td>
				<td class="bleuFonceTitre"><font class="grosTitreBlanc">Accueil</font></td>
				<td><img src="../../images/miseEnPage/barreBleuCoinR.jpg"></td>
			  </tr>
			  <tr> 
				<td colspan="3">&nbsp;</td>
			   </tr>
			 </table>
		</div>
		<!-- fin contenu -->

**hunter** · 10/06/2005, 09h09

niveau css il y a aucun problème ça doit venir de ton 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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#colgauche
        {
        position: absolute;
        left:10px;
        width:200px;
		border:1px solid #FF0000;
        }
 
      #coldroite
        {
       position: absolute;
        right:10px;
        width:200px;
		border:1px solid #FF0000;
        }
 
      #colcentrale
        {
        margin-left: 212px;
        margin-right:212px;
        voice-family: "\"}\"";
        voice-family: inherit;
		border:1px solid #FF0000;
        } 
</style>
 
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<div id="colgauche">Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche<br>Gauche</div>
<div id="coldroite">Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br>Droite<br></div>
<div id="colcentrale">Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br>Centre<br></div>
</body>
</html>

**calimero82** · 10/06/2005, 09h27

tu as effectivement raison, le pb provenait de mon code, je ne sais pourquoi ms il refuse l'affiche de mon tableau avec titre de partie et image des coin.

:

:

pour contourner ce pb, j'ai fait ceci :

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
      #colcentrale
        {
        margin-left: 212px;
        margin-right:212px;
		text-align:left;
        voice-family: "\"}\"";
        voice-family: inherit;
      border:1px solid #FF0000;
        }
 
      #colcentraleTitre
        {
		 background-color:#170887;
		 font-family: Tahoma;
		font-size: 12px ; 
		font-weight:bold ;
		color : #FFFFFF;
		text-align:center;
		height:25px;
        margin-left: 212px;
        margin-right:212px;
        voice-family: "\"}\"";
        voice-family: inherit;
      border:1px solid #FF0000;
        }

par contre où je suis bien embetée c'est ds la colcentrale, essaye d'y mettre un très longue ligne et tu verras que le contenu déborde sur la col de droite.
ms merci pour tes indications.

**hunter** · 10/06/2005, 09h47

de rein juste un petit

et c'est parfait

**calimero82** · 10/06/2005, 09h51

désolée hunter, ms il y'a juste un petit souci pour la colonne centrale :
si le contenu est trop grand -> il déborde sur la colonne de droite et mm en faisant un tablea, cela déborde aussi

:

:

connais tu la raison, car là je suis à court d'idée.
merci d'avance.

**koala64** · 10/06/2005, 23h54

Salut,

bah tu n'as pas définis de largeur pour ton conteneur central donc il n'a aucune raison de s'arrêter quand tu écris, même s'il y a des marges... En fait, le width est nécessaire...

[CSS]Mise en page de 3 colonnes

Tableau en CSS

Discussions similaires

Partager

Partager