28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Le Footer ne veut pas rester en bas

Bonjour !

J'ai voulu créer un thème pour mon site sous PostNuke en me basant sur ce tutoriel

J'ai donc fait mon theme avec le code suivant :

<body>
	<div id="global">
		<div id="header">
		</div>
		<div id="center">
			<div id="content">
            	<!--[$maincontent]-->
			</div>
			<div id="sidebar">
				<!--[blockposition name=sidebar]-->
			</div>
		</div>
		<div id="footer">
			<p><!--[nocache]--><!--[pagerendertime]--><!--[/nocache]-->
			<!--[nocache]--><!--[sqldebug]--><!--[/nocache]--></p>
		</div>
	</div>
</body>


et avec le CSS suivant
html, body {
	margin: 0;
	padding: 0;
}
#global {
	min-height: 100%;
	width: 980px;
	margin: 0 auto;
	position: relative;
}
#footer {
	position: absolute;
	width: 980px;
	bottom: 0;
}
#center {
	padding-bottom: 110px;
	overflow: auto;
}
#sidebar {
	float: right;
	width: 180px;
	padding: 0 29px 0 0;
}
#content {
	float: left;
	width: 730px;
}


ainsi que ce CSS pour les hack IE

#global {
	height: 100%;
	position: static;
 	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/body.png", sizingMethod="scale");
}
#content {
	display: inline;
}
#center {
	overflow: visible;
	height: 1%;
}
body {
	position: relative;
}



Seulement, quand j'affiche mon site sous IE ou FF le footer ne reste pas collé en bas.

Après lecture de nombreux topic, j'ai pensé modifier mon CS principale comme ca

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}


Ca fonctionne parfaitement sous FF, le footer reste bien toujours collé en bas meme si la page est plus courte et également sous IE mais seulement maintenant, sous IE, si la page est longue que la hauteur de la fenetre, le footer reste fixé en bas de la fenetre !
C'est à dire que si la page est plus longue que la taille du navigateur, le footer passe par dessus le texte et "reste collé" donc impossible de descendre ! Les scroll bar ne s'affichent pas, comme si le reste du texte qui est sencé être en dessous du footer avait été "avalé".

Donc après plusieurs heures de recherches sans réel succés, je me tourne vers vous qui je l'espère pourrez m'aider...


Merci d'avance Smiley smile
Modifié par Starguezer (14 Dec 2007 - 20:04)
Hello Smiley smile

Le code que tu as posté me semble correcte, j'avais pris note de ces éléments pour obtenir un design qui occupe toute la largeur du design, avec pied de page collé en bas :

html, body {
height: 100%; }

div#global {
min-height: 100%;
position: relative; }

div#center {
padding-bottom: XXpx; }
	
#center { /* Pour IE6, via CC */
overflow: visible;
height: 1%; }

div#footer {
position: absolute;
bottom:0; }

Il va falloir une page en ligne pour t'aider d'avantage, tu as surement fait une erreur de frappe ou autre inattention Smiley langue
Modifié par BeliG (14 Dec 2007 - 16:53)
Je t'ai envoyé un lien par MP

Finalement je met le lien ici pour ceux qui voudraient m'aider.
* lien supprimé *

(je le supprimerai quand ca sera résolu car le site n'est pas sencé être ligne.)

Merci
Modifié par Starguezer (14 Dec 2007 - 20:04)
Merci, je regarde Smiley cligne

Wow, c'est quoi ça ? Smiley eek 
</div><br><br><br><br></div>
Un padding ou un margin, ça aurait fait plus propre non ? Smiley langue

De plus, il y a 18 erreurs à la validation, et un avertissement bizarre sur la déclaration de type de document (doctype). Pour ceux qui lisent le post, voici son DTD :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

J'y connais pas grand chose, mais assez pour constater qu'il ne figure pas sur le tutoriel Les DTD HTML4.01 et XHTML1.0 : comment choisir ? d'Alsacreations.
Modifié par BeliG (14 Dec 2007 - 17:59)
lol ouai c'est vrai que c'est pas joli du tout mais j'ai mit ca vite fait car les textes ne sont pas définitifs et seront plus long après donc j'aurai plus besoin de compler les trous avec des <br /> pour empécher que les blocs se chevauchent.

Voilà pourquoi Smiley smile
Sinon je viens de tester avec un contenu plus long et je n'ai aucun problème, le footer est collé au bas de la page et rien ne semble "avalé" Smiley sweatdrop

Avec quelle version d'IE ça bug ?
En effet, ca fonctionne bien quand je ne met pas
html, body {
	height: 100%;
}


dans le CSS de base.
Par contre, le footer n'est pas collé en bas si le contenu est trop court.

En gros :
* avec html, body {height: 100%;} :
- FF : nikel, footer collé en bas
- IE : footer reste en bas du navigateur, donc le texte est "avalé"

* sans html, body {height: 100%;} :
- FF : le footer reste en bas du texte donc si le texte est trop court, il ne reste pas collé en bas
- IE : pareil que FF


EDIT : afin que tu puisses comparer, je viens de rajouter html, body {height: 100%;} à mon CSS principale. Regarde la différence entre IE et FF
Modifié par Starguezer (14 Dec 2007 - 20:04)
Bon, j'ai pas IE6 (%#^* Vista), mais IE7 bug à cause de ta feuille de style spéciale IE :

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="http://jonathanmeiss.ovh.org/joel/themes/JoelLeducv1/style/ie.css"/>
<![endif]-->

Et plus précisemment à cause de ça :
#global {
height: 100%;
position: static;}

Si j'enlève, plus de problème Smiley langue

Le test [if IE] implique TOUTES les versions d'IE, or le correctif position:static "censé" régler les problèmes de transparence, ainsi que le height:100% ne s'adressent qu'à IE6 (et versions inférieures).

Je te conseil de faire une feuille spéciale ie6 (et <), et une autre pour ie7 s'il y a besoin.

De plus, pour avoir mis le nez dans ton code, j'peux te dire que c'est une vraie boucherie Smiley lol A l'avenir essaye de faire des efforts de rédaction et retiens que trop de <div> tue la <div>. Ca par exemple, ça sert à rien :

<div class="classe1">
     <div class="classe2">
          Bla bla prout [...]
     </div>
</div>

Soit tu regroupes tes styles :
<div class="classe_unique">
     Bla bla prout [...]
</div>

Soit tu associes 2 classes à ta <div> :
<div class="classe1 classe2">
     Bla bla prout [...]
</div>

Ensuite, t'as l'air d'avoir du mal à gérer les espaces, à plusieurs reprises je suis tombé sur des <p></p>, <br><br><br><br>, à quoi ça sert d'attendre d'avoir plus de contenu pour coder correctement ?

Pour finir, j'ai pas non plus aimé :
- <div class="pn-sub" style="text-align: center;"> : ton style, mets-le dans ton CSS, en plus t'as fait une classe rien que pour lui, non ?
- media="print,projection,screen,print" Smiley sweatdrop
- tes chemins trop longs avec en plus des espaces : ConsultantsRestauration.com%20%20%20Consultants%20en%20Restauration_fichiers/

C'est à peu près tout ce dont je me souviens Smiley langue

Voilà, en espèrant que tu feras attention à mes remarques, je te souhaite bon courage pour la suite Smiley cligne
Modifié par BeliG (14 Dec 2007 - 19:51)
Ouaouuuu ca fonctionne !
J'ai mit la feuille de style uniquement pour IE6 et inférieur et ca fonctionne à merveille, merci beaucoup !!!

Pour la boucherie, ca ne m'étonne pas trop :s
C'est la première fois où je fais un site entièrement en CSS (sans tableau) car je découvre un peu la puissance des feuilles de style...

J'ai corrigé quelque erreurs et j'ai pris note des autres mais je pense que c'est dû au fait que je veuille ajouter mes styles en plus de ceux automatiquement généré par mon CMS...

Merci beaucoup de ton aide et du temps que tu as passé à chercher mes erreurs !!! Smiley biggrin Smiley biggrin Smiley biggrin
Sujet clos
Aller à