menu flottant à gauche et un pied de page

**leto02** · 25/09/2009, 12h53

Bonjour,

Je travail actuellement sur le site suivant (conçu à la base avec joomla)
http://www.atemimontdor.com

Dans l'ensemble tout va bien. mais lorsque je teste mon affichage sur d'autre navigateur que ie7 je rencontre le probléme suivant :
Mon pied de pages(div pied) ne se calle pas sur la colonne la plus longue de mon site mais uniquement sur le contenus des articles, ce qui est génant quand l'article est plus cours que le menu à gauche...
je supose que cela vient de l'utilisation d'un float:left sur ma div gauche.
J'ai essayer de trouver une solution, et pour l'instant j'ai echoué, si vous avez des sugestions je suis preneur.

voici la structure de mon template :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<body>
	<div id="conteneur">
		<div id="top">
			<div class="cadre"><jdoc:include type="modules" name="top" /></div>
		</div>
		<div id="gauche"> <jdoc:include type="modules" name="left" style="rounded" /></div>
		<div id="principale"><jdoc:include type="component" /></div>
		<div id="pied">
			<div class="cadre"><jdoc:include type="modules" name="syndicate" /></div>
		</div>
	</div>
</body>

vous pourez trouver mon css ci joints.

Merci d'avance

**Ethyde** · 25/09/2009, 13h04

Envoyé par leto02

je supose que cela vient de l'utilisation d'un float:left sur ma div gauche.

Oui c'est bien ça : la solution consiste à mettre ton tableau de contenu principale en float:left aussi tel que :

Code :

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

1
2
3
4
5
6
7
8
div.principale {
  float:left;
  width:760px;
  font-size : 0.95em ;
  padding-top: 15px ;
  margin-left : 30 % ;
}

il te faudra ensuite recaller les marge et les hauteurs au niveau du head et rajouter un clear:left; à la div du pied tel que :

Code :

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

1
2
3
4
5
6
div#pied {
  clear:left;	
  background : url(../images/fond_bandeau_inf.gif) bottom repeat-x ;
  height : 118px ; width : 92% ; padding-right : 8% ;
}

En passant les tableau ne servent pas a faire de la mise en page de site web mais à mettre des données tabulaires !

**leto02** · 25/09/2009, 13h44

Tout d'abord merci beaucoup pour ta solution, ça fonctionne, j'ignorer l'usager de clear,

Par contre pour ta remarque sur les tableau je ne comprend pas bien, je pensais qu'en utilisant des div pour ma structure j'évité justement d'utiliser des tableaux...

Merci encore

**Ethyde** · 25/09/2009, 18h28

Envoyé par leto02

Tout d'abord merci beaucoup pour ta solution, ça fonctionne, j'ignorer l'usager de clear,

De rien !

Envoyé par leto02

Par contre pour ta remarque sur les tableau je ne comprend pas bien, je pensais qu'en utilisant des div pour ma structure j'évité justement d'utiliser des tableaux...

Alors juste un mot en passant sur le sujet :

Effectivement tu as une div#principale mais celle-ci contient une table qui structure le contenu, celui -ci n'étant pas de type tabulaire il y a donc erreur dans l'usage du tableau

menu flottant à gauche et un pied de page

CSS

Vue hybride

Discussions similaires

Partager

Partager