[css]pb pied de page

**calimero82** · 10/06/2005, 14h00

bonjour à tous,
décidemment la mise en page avec des css me posent bien des pbs.
Maintenant j'ai mon pied de page qui s'affiche avec le contenu de la page entre mes colonnes droite et gauche. Je ne sais quoi faire pourtant je sais que mes css sont bonnes le pb viendrait de mon code html.
Auriez vous une idée car là j'en suis à cours.

voici mes 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
     #colgauche
        {
        position: absolute;
        left:5px;
        width:200px;
        }
 
      #coldroite
        {
       position: absolute;
        right:5px;
        width:170px;
        }
 
      #colcentrale
        {
        margin-left: 209px;
        margin-right:179px;
 
        }
 
      #colcentraleTitre
        {
		 background-color:#170887;
		 font-family: Tahoma;
		 font-size: 12px ; 
		 font-weight:bold ;
		 color : #FFFFFF;
		 text-align:center;
		 height:25px;
		 margin-left: 209px;
         margin-right:209px;
        }
 
.contenu{
		text-align:left;
		font-family: Arial;
		font-size: 14px;}
 
 
div#footer {
    clear: both;
    background-color:#170887;
	margin-left: 5px;
    margin-right:5px;
	margin-bottom:5px;
}

et ma page web :

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
 
<body>	
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td align="left" valign="middle"> <!-- logo -> retour vers accueil -->
					<a href="entete.php" title="Retour Accueil"><img src="../../images/logoIntraprod.jpg" width="100" alt="Logo Intraprod" border="0"></a>
				</td>
				<td width="">&nbsp;</td><!-- Inscrit le nom de l'utilisateur connecté-->
				<td align="right">
					<table border="0" cellspacing="0" cellpadding="0"> <!-- services -->
....
					</table>
				</td> 
			</tr>
		</table>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr class="orangeFonce"><!-- fil d'Ariane et test si déconnexion -->
				<td class="ariane" align="left">Vous êtes ici:</td>
				<td class="deconnexion" align="right">Se déconnecter >></td>
			</tr>
		</table>
 
		<br>
 
 
 
  <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>
	....
	</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
			... news de chez lamoooche
			</script>
		</td>
      </tr>
    </table>
  </div>
		<!-- fin consignes et news -->
 
		<!-- Contenu -->			
		<!--<div id="colcentrale">
			<table border="0" cellspacing="0" cellpadding="0">
			  <tr> 
				<td><img src="../../images/miseEnPage/coinBleuL.jpg"></td>
				<td class="bleuFonceTitre"><font class="grosTitreBlanc">Accueil</font></td>
				<td><img src="../../images/miseEnPage/coinBleuR.jpg" border="0"></td>
			  </tr>
			  <tr class="bleuClair"> 
				<td colspan="3"></td>
			   </tr>
			 </table>
		</div>-->
		<!-- fin contenu -->	
		<!-- Contenu -->
		<div id="colcentraleTitre">Accueil</div>			
		<div id="colcentrale">
			<table width="600">
				<tr>
					<td class="contenu">test font test font test font test font test font test font test font test font test font test font test font test font 
					test font test font test font  v  test font test font test font test font test font test font test font test font test font test font test font test font</td>
				</tr>
			</table>
		</div>
		<!-- fin contenu -->	
 
		<!-- pied de page -->
		<div id="footer">
			<table width="100%" border="0" cellpadding="0" cellspacing="0">
				<tr class="petitTitreBlanc" align="left">
					<td><img src="../../images/miseEnPage/petitLogo.jpg"></td>
					<td>Webmaster : <br>Nombre de visisteurs :</td>
				</tr>
			</table>
		</div>

un grand merci d'avance pour tt personne pouvant m'aider sinon, je retourne à la mise en forme avec tableau

**Huntress** · 10/06/2005, 15h39

Je vais peut être poser une question bête, mais tu as pris le (bon) parti de te mettre aux CSS, et ce avec une structure en <div>... alors pourquoi mettre des tableaux dans tes <div> ? Aurais-tu du mal à t'en détacher ?

Je viens de refondre un site entièrement, parce que j'en ai refait le design. Les CSS peuvent être durs à mettre en place, mais une fois que c'est fait... C'EST FAIT

Alors ne tente pas le diable en retournant sur une mise en page en tableaux.

Donc un conseil ?
Laisse tes div, retire tes tableaux (quand c'est pour une question de mise en page), et apprends à maîtriser le FLUX ! (le positionnement quoi :p)

**koala64** · 10/06/2005, 15h45

Salut,

Envoyé par calimero82

...sinon, je retourne à la mise en forme avec tableau

effectivement, t'y est déjà...

Juste comme çà, peux-tu mettre par écrit ce que tu souhaites et comment çà doit être disposé?

**calimero82** · 10/06/2005, 16h12

en effet, j'ai fait un mélange des deux

alors voici ce que j'aimerais faire:
1. mettre une netête qui prndaris tt la page : totalement à gauche le logo et totalement afficher une liste d'images qui serait des liens vers des services (exacetment comme le site de yahoo.fr et de free.fr
2.mettre juste en dessous un bandeau qui prendrais tt la page et à l'intérieur de ce bandeau mettre totalement à gauche le fil d'ariane et totalement à droite la possibilité à l'utilisateur de se conncter ou déconnecter

3 sous l'entete, mette à gauche un menu. Ms j'ai utilisé un tableau car j'utilise des images avec coin arrondie pour créer un petit bandeau ds lequel j'écris "Menu". J'aimeraius que la taille du menu sois fixe

4. à droite j'ai une colonne qui contient des services, news ... de taille fixe également

5. le contenu du milieu j'aimerai qu'il s'auto-dimensionne en fonction de la taille de la page dc c'est taille de la page - taille menu-taille service

6. et un bas de page qui occupe tt la largeur de la page.

je pense que ce qui m'a mis dedans c'est mes images de mise en forme et c'est pour ça que j'utilise des tables pour les placer.

voilà en espérant avoir été clair.

**Huntress** · 10/06/2005, 16h17

Je te conseille dans un premier temps d'oublier ces coins arrondis, et les tableaux par la même occasion.

Donc ce que tu souhaites réaliser s'appelle du fluide 3 colonnes. Ce qu'il faut avec les CSS c'est ne pas allez trop vite en ce qui concerne les positionnements.

Donc le mieux serait de faire un truc à part pour que tu puisses bien voir comme ça fonctionne donc tu te prends une p'tite page HTML vierge et un p'tit fichier CSS vierge lui aussi, et tu te lances doucement sans mettre le moindre contenu, essaye juste dans un premier temps de positionner tes boites (en afichant les border bien entendu... c'est plus pratique).

> oublis pas le DOCTYPE, ça peut tout changer !

**calimero82** · 10/06/2005, 16h22

ok merci du conseil , dc je vais reprendre depuis le début.
Sinon, j'avais déjà trouver des sources mais je crois qu'à cause de mes tableaux, ça ne marchais plus.

tant pis pour mes petit coin arrondi

sinon en quoi le doctype peut tt changer???

: