28220 sujets

CSS et mise en forme, CSS3

Pb de pied de page et de conteneur

Bonjour,

Voila quelques jours que j'epluche les tutoriaux, les forums, les FAQ, malgré un sujet trés commun jamais je n'est trouvé une solution corrigant complétment mon probléme. J'en revient donc à vous appeler Ô grands manitoux de la saintes balises.

Shéma du site:
upload/2159-plan.gif

Mon probléme:
Je veux que le pied de page soit toujours collé en bas du navigateur et que le site s'étende sur toute la hauteur du navigateur peut importe la quantité de contenu. Pour l'instant mon site s'étal correctement sur toute la hauteur du navigateur, mais le pied de page ne se colle pas au bas du navigateur tant qu'il n'y a pas assé de contenu pour couvrir la hauteur du navigateur.

Illustration :

Pied de page quand peu de contenu (foireux):
upload/2159-1.gif

Pied de page quand contenu suffisant (pas de pb):
upload/2159-2.gif

Résumé de mon code html :

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="conteneur">
<div id="top"></div>
<div id="gauche">Mon menu</div>
<div id="contenu"></div>
<div id="bottom"></div>
</div>
</html>

Remarque: si je met mon bottom en dehors du conteneur alors j'ai un blanc entr ele conteneur et le bottom Smiley fache .

Mon code CSS :

html,body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-image: url('images/fond.jpg');
	background-repeat:repeat-x;
	background-attachment:scroll;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 11px;
	}
	
DIV#conteneur {
	min-height: 100%;
	height: 100%;
	width: 773px;
	background-image: url('images/fond_conteneur.jpg');
	background-repeat: repeat-y;
	height: auto;
	}
	
DIV#top {
	width: 773px;
	height: 184px;
	position: absolute;
	left: 0;
	top: 0;
	}

DIV#gauche {
	height: 100%;
	width: 190px;
	float: left;
	}

Div#contenu {
	width: 562px;
	padding-left: 5px;
	padding-top: 184px;
	margin-left: 190px;
	}

DIV#bottom {
	width: 773px;
	position: relative;
	bottom: 0 !important;
	}

Remarque: Ayant essayé moulte tutos (à base de clear:, de position, de javascript, de min-height...), certaines balises sont surement inutiles ou inadaptés Smiley decu , je sens que je touche bientôt à la solution mais il manquee encore ce petit truc Smiley cligne .

Donc voila, etant en fin de stage le temps m'est compté Smiley bawling j'ai besoin de vous pour trouver la solution a ce pied de page qui veut pas coller au bas du navigateur.

Merci à tous,
Modifié par Bazunga (14 Jun 2005 - 09:27)
Salut,
je suis un débutant mais bon, je vais essayer de t'aider quand même.

essaye en sortant ton pied de page de son conteneur et en le mettant en position absolue...avec un margin-bottom:0;
Je pense que ça devrait marcher, mais je n'ai sans doute pas tout compris !

@ + et bon courrage !
Merci graph de ta proposition, mais malheureusement sa ne fonctionne pas, En effet le pied de page se met bien en bas du navigateur mais cache le texte du contenu.

Illustration:

Comme je disais le pied de page se met en bas du navigateur mais il le fait aussi quand il faut pas Smiley decu .
upload/2159-3.gif

Mais ...
upload/2159-4.gif

Smiley biggol
Ah, zut, j'ai fait une modif : il y a une autre discussion peut-être plus adaptée puisque mon problème était d'avoir mon fond à 100% de mon contenu même si celui-ci dépasse de l'écran (quand on dit 100 %, on parle de l'écran)

Mais je t'ai rajouté l'article de pompage, spécifique au bas de page.

Good luck !
Smiley cligne
l'article de pompage c'est le dernier que j'ai lu avant de faire ma demande sur le forum, je l'ai suivit completement mais si on regarde bien les exemples qu'il propose jamais le conteneur ne s'etend sur toute la page Smiley ohwell c'est se que je souhaite Smiley ohwell . L'article de raphael aussi je l'ai lu mais soit je m'y prend mal soit ben je c pas Smiley smile
Modifié par Bazunga (14 Jun 2005 - 08:20)
Cette solution trouvée dans ton post :

#conteneur {
height: auto !important;
height: 100%;
min-height:100%;
...
}

Ne marche pas pour moi, elle ne change rien du tout j'ai toujours le même probléme Smiley decu .

Maide ! Help !
Modifié par Bazunga (14 Jun 2005 - 09:18)
Tiens, mais j'y pense :

a écrit :
Le bloc est placé par rapport à son parent s'il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n'est positionné, il se réfère à la page entière (balise body en HTML, html en XHTML).


Tu as essayé en positionnant ton élément conteneur ?

Un petit article :

http://blog.alsacreations.com/2004/06/04/15-rendez-moi-ma-position-absolue
Modifié par Vero (14 Jun 2005 - 09:21)
Bonjour vero,

oui j'avais déja essayé, je vient de réessayer en position absolute, puis relative. Mais rien y fait le probléme demeur ! Smiley sweatdrop .
Et si je positionne le conteneur, alors IE étend trop le site, en effet même quand il y a peut de texte dans le contenu, alors le pied de page se trouve trop bas, plus concretement IE comprend qu'il faut afficher 100% de la hauteur + la hauteur du pied de page et non 100% tout compris.


j'aimerai uper les pages, mais je suis obliger d'utiliser un portail trés sécurisé et trés contrôlé Smiley bawling .
Modifié par Bazunga (14 Jun 2005 - 09:25)
ui mais je l'ai pas mis dans mon résumé de code, le voici,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ma super page qui foire</title>
<meta http-equiv="Content-Type"	content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>


Ce n'est pas trop ma tasse de thé les Doctypes j'ai un peu de mal Smiley sweatdrop , le probléme demeure peut etre là. Une question, mon pied de page dois-je le positionner ou non ? Smiley confus
Modifié par Bazunga (14 Jun 2005 - 10:04)
Sujet clos
Aller à