Discussion :

[jeremdu94]

Bonjour,

Je viens de débuter le CSS, je code en Xhtml 1.0 et CSS 2.1.

J'ai commencé a faire des pages tests pour un peu mieux maîtriser les bases mais j'ai un problème avec mon pied de page.

Il se met en haut au dessus de tout mes autres blocs.

J'ai un logo une bannière à sa gauche, puis un menu et un contenu.
Ces blocs sont en position: absolute; car ca me semblait plus simple pour commencer.

Mon pied de page est un bloc aussi et j'arrive à le mettre ou je veux si je le met en position: absolute; et avec top et des marges auto pour le centrer.

Sauf que, mon j'ai mis à mon contenu une min-height pour que si son contenu dépasse la hauteur minimale ca agrandisse tout seul mon bloc contenu.
Mais du coup, je ne peux plus placer mon pied de page en "dur" il faut qu'il ce mette tout seul après la fin du bloc de contenu et là, je ne sais pas faire..

J'ai essayer la solution de mettre mon bloc de contenu en dur et lui mettre un overflow: auto; mais je n'aime pas trop.

Voici un extrait du xhtml:

Code :

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

1
2
3
4
5
6
7
8
 
<div id="corps">
Blabla [...] blabla
avec tellement de blabla que ca doit dépasser mon min-height
</div>
<div id="pied_de_page">
Mon nom, ma vie...
</div>

Avec ce 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
 
body 
{
	background-image: url("../images/fond.jpg");
	background-repeat: repeat-x;
	background-color: #D3D3D3;
	font:12px "Trebuchet MS", Arial, Verdana;
	margin: auto;
	margin-top: 20px; 
	margin-bottom: 20px;   
	width: 800px;
}
[...]
#corps
{
	width:600px;
	min-height: 400px;
	margin-left:190px;
	margin-top: 195px;
	position: absolute;
	border: 1px solid #00FF00;
 
}
#pied_de_page
{
	width: 680px;
	height: 15px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
       border: 1px solid #0000FF;
}

J'ai mis des bordures pour mieux voir mes blocs comme je débute j'ai un peu de mal parfois à bien les voir.

Voilà, je ne vois pas comment faire pour que le positionnement de mon bloc de pied de page dépende du bloc

Merci si vous voulez bien m'aider
Cdlt

[Candygirl]

Ces blocs sont en position: absolute; car ca me semblait plus simple pour commencer.

Ton problème provient de là Un bloc positionné en abolute est retiré du flux et donc ton pied de page se positionne sans en tenir compte, soit tout en haut de ta page.

Retire le position absolute de ton #corps (qui ne sert à rien dans ton cas) et ton pied de page viendra logiquement à la suite.

[Macmillenium]

Bonsoir,

Ces blocs sont en position: absolute; car ca me semblait plus simple pour commencer.

Non je ne pense pas, le positionnement absolute est très pratique dans certains cas (menu dynamique, positionner des blocs les un au dessus des autres, déplacer des éléments) mais limité (et surtout difficile a gérer quand on débute) pour toute une mise en page (d'où le problème de ton footer).
Je te conseille plutôt le float et le positionnement relative au moins il y a toujours moyen de conserver la position de l'élément positionné par rapport aux autres éléments dans le flux naturel.

[jeremdu94]

Bonsoir,

Merci de vos réponses!

Alors j'ai passé mon #corps en

Code :

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

1
2
3
 
position: relative;
float:right;

Et j'ai ce que je voulais. Mais mon logo, ma bannière et mon menu sont toujours en position: absolute; et donc il ne sont pas dans body, il n'y a que le pied de page et le corps qui agrandissent mon body en fait.
Et je voulais savoir si c'était bon ou pas?
Actuellement j'ai le résultat que je voulais mais je ne sais pas si c'est fait comme il faut?

En fait des les tutos on me disait souvent que le position: absolute était plus simple que le relative, c'est pour ca que je mettais concentré dessus et j'avais mis le relative de côté pour le moment

Je vais aller tester mon code sous ie maintenant, si ca se trouve il ne fonctionnera pas du tout et il faudra tout recommencer...

Merci beaucoup pour l'aide rapide et efficace!

Cdlt