[Résolu] Casse-tête pour caler un footer

Question

johnmalko

31 Dec 2006 à 18:30

Bonjour à tous,

J'ai récemment mis à jour le design de mon blog :http://www.ledepot.info

Mon souci se situe au niveau du footer (pour l'instant il n'y en a pas). Je désire en effet ajouter en bas de page un footer graphique contenu dans un div.

Quelque chose du genre :

#footer{
width: XXXpx;
position: absolute;
background : url(img/footer.png) no-repeat top;
}

Le problème est que je ne maîtrise la quantité de contenu qui s'affiche dans les pages.

Si je conditionne le calage de mon footer à la quantité de contenu affiché dans la page, il arrive, dans le cas où le contenu central n'est pas très long, que le footer vienne mordre sur ma colonne de droite (colonne contenant le moteur de recherche, les catégories et les liens). A l'inverse si je décide de conditionner le calage de mon footer sur la hauteur de ma colonne de droite, il arrive que le contenu central déborde sur la hauteur de cette colonne de droite... Dans les 2 cas, le résultat est le même : le footer n'est pas placé correctement. Smiley confus

Bref, je galère et je tourne en rond et je sollicite vos lumières.

PS : bonne année à tous !
Modifié par johnmalko (03 Jan 2007 - 22:41)

Skippy1

1 Jan 2007 à 17:22

Bonjour,

As-tu essayé :

#footer{
[b]clear:both;[/b]
width: XXXpx;
position: absolute;
background : url(img/footer.png) no-repeat top;
}

la boîte générée va se déplacer sous chacune des boîtes flottantes qui la précède

A+

johnmalko

1 Jan 2007 à 17:26

Skippy1 a écrit :
Bonjour,

As-tu essayé :
#footer{
[b]clear:both;[/b]
width: XXXpx;
position: absolute;
background : url(img/footer.png) no-repeat top;
}
la boîte générée va se déplacer sous chacune des boîtes flottantes qui la précède

A+

Merci, je ne connaissais pas cette possibilité et j'essaye donc ça de suite et je te tiens au courant... Smiley biggrin

johnmalko

1 Jan 2007 à 17:42

Donc je viens de faire la manip et pour l'instant ca ne marche pas. En fait, le footer apparait bien mais il est calé tout en haut de la page, haut lieu d'être calé tout en bas...

voici ce que j'ai rentré pour définir le div footer dans ma feuille de style :

#footer{
width: 597px;
clear: both;
position: absolute;
background : url(img/footer.png) no-repeat top;
margin-left: 116px;
}

Et voici (de façon simplifiée) la structure générale de ma page :

<div id="page">
<div id="content">....</div>
<div id="sidebar">....</div>
<div id="footer"></div>
</div>

ghost

1 Jan 2007 à 17:45

Bonjour,

Et pourquoi pas simplement:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>
<style>
#conteneur{
width: 800px;
margin: auto;
border: 1px solid black;
overflow: hidden;
}
	
#droit{
width: 200px;
float: right;
border: 1px solid blue;

}	

#gauche{
margin-right:200px;
border: 1px solid green;

}

#foot{
clear: both;
height: 50px;
margin: auto;
border: 1px solid red;
overflow: hidden;
}	
</style>
</head>

<body>
<div id="conteneur">
	<div id="droit">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus massa pede, tempus hendrerit, aliquam nonummy, accumsan a, odio. Etiam eu arcu. Vestibulum nec dolor. Morbi iaculis, neque ac pulvinar imperdiet, mi dui volutpat nulla, in cursus purus neque et dolor. Aliquam consequat urna id augue. Mauris urna. Sed libero arcu, lacinia quis, posuere ut, elementum quis, nisl. Curabitur consectetuer diam ac sapien. Quisque tincidunt turpis vestibulum nisi. Phasellus ultrices volutpat libero.
	</p>
	</div>
	<div id="gauche">
	 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus massa pede, tempus hendrerit, aliquam nonummy, accumsan a, odio. Etiam eu arcu. Vestibulum nec dolor. Morbi iaculis, neque ac pulvinar imperdiet, mi dui volutpat nulla, in cursus purus neque et dolor. Aliquam consequat urna id augue. Mauris urna. Sed libero arcu, lacinia quis, posuere ut, elementum quis, nisl. Curabitur consectetuer diam ac sapien. Quisque tincidunt turpis vestibulum nisi. Phasellus ultrices volutpat libero.

Morbi orci massa, placerat id, aliquet eu, molestie a, arcu. Maecenas euismod ultrices augue. Fusce consequat pede in dolor. Duis commodo aliquam tellus. Phasellus non nunc. Nullam nec ante. Nullam ipsum elit, tempus at, cursus vitae, ornare a, lacus. Fusce dignissim, turpis id accumsan dictum, augue orci semper diam, id dapibus erat lacus id elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut gravida sem sed quam. Donec ultricies cursus ipsum.


</p>
	</div>
	<div id="foot">
	</div>
</div>
</body>
</html>

johnmalko

2 Jan 2007 à 20:59

Génial ! Ca fonctionne avec ta proposition Ghost ! Merci bcp pour ton aide, c'était simple mais je n'y avais tout simplement pas pensé. J'ai légèrement adapté ta proposition et ca fonctionne sans souci.

Le problème c'est que j'ai du revoir totalement le montage de ma page pour mettre en oeuvre cette solution. Et je me trouve désormais confronté à un autre problème que, malgré mes efforts, je n'arrive pas à résoudre. Smiley decu

Je m'explique :

Sur le site, le logo "ledepot" est contenu dans une sphère rouge qui déborde légèrement sur la gauche ce qui est fort joli en terme de design mais plus délicat en terme d'intégration (surtout avec un site centré comme celui-ci). Avec la solution que tu m'as proposé j'ai du redécouper certains des éléments graphiques d'origine dont le logo que je ne pouvais plus converser d'ue seule pièce puisque la partie débordant sur la gauche posait problème pour le centrage du site. Le logo se trouve donc désormais segmenté en 2 parties.

Si tu vas sur le site (www.ledepot.info) tu constateras qu'il manque la partie gauche du logo. Je n'arrive tout simplement pas à l'afficher correctement ! J'espérais pouvoir créer un div "logo_gauche" qui viendrait se coller sur la partie droite du logo et qui suivrait le reste des div lorsque la page serait redimensionnée. Mais je n'y arrive pas. J'ai fait plusieurs tentative différente mais le résultat est assez catastrophique.

Pour reprendre la structure de ma page actuelle :

<div id="page">
<div id="logo_droit"></div>
<div id="content">....</div>
<div id="sidebar">....</div>
<div id="footer"></div>
</div>

Je ne sais pas si mes explications sont très claires... (le mieux est d'aller sur le site pour visualer le problème) Merci encore de votre aide, n'hésitez pas à me demander des précisions.
Modifié par johnmalko (02 Jan 2007 - 21:00)

ghost

3 Jan 2007 à 12:54

Bonjour,

Bon là l'histoire n'est pas tout à fait la même, il ne suffit pas de disposer ton logo en absolute (sinon il ne suivrait pas au redimensionnement de la fenêtre),
il faudra donc créer un bloc vertical supplèmentaire pour pouvoir recevoir le logo tout en gardant le background du body ... Bon je pense qu'il vaut mieux un bout de code ... Ce sera plus clair, enfin j'espère


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>
<style>
body{
background: url(fond.jpg);
}

#header{
width: 499px;
height: 226px;
position: relative;
}

html>body #header {
width: 498px;
}

#logo_centre{
width: 398px;
height: 226px;
position: absolute;
right: 0px;
}

#logo_centre img{
padding: 0;
margin: 0;

}

#logo{
position: absolute;
left: 5px;
top: 15px;
}

#conteneur{
width: 697px;
margin: auto;
overflow: hidden;
position: relative;
background: url(fond_centre.png);
background-position: 100% 0%;
background-repeat: repeat-y;
}
	
#droit{
width: 195px;
float: right;
color: white;
}	

#gauche{
width: 380px;
margin-left: 100px;
overflow: hidden; 
}

#foot{
clear: both;
height: 50px;
margin-left: 100px;
overflow: hidden;
background: white;
}

p{
margin-left: 13px;
margin-right: 13px;
}	
</style>
</head>

<body>

<div id="conteneur">


	<div id="droit">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus massa pede, tempus hendrerit, aliquam nonummy, accumsan a, odio. Etiam eu arcu. Vestibulum nec dolor. Morbi iaculis, neque ac pulvinar imperdiet, mi dui volutpat nulla, in cursus purus neque et dolor. Aliquam consequat urna id augue. Mauris urna. Sed libero arcu, lacinia quis, posuere ut, elementum quis, nisl. Curabitur consectetuer diam ac sapien. Quisque tincidunt turpis vestibulum nisi. Phasellus ultrices volutpat libero.
	</p>
	</div>
	
	<div id="header">
		<div id="logo_centre">
		<img src="logo2.png" alt="" />
		</div>
		
		<div id="logo">
		<img style="margin: 0; padding: 0" src="logo.gif" alt="" />		
		</div>
	</div>
	<div id="gauche">
	 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus massa pede, tempus hendrerit, aliquam nonummy, accumsan a, odio. Etiam eu arcu. Vestibulum nec dolor. Morbi iaculis, neque ac pulvinar imperdiet, mi dui volutpat nulla, in cursus purus neque et dolor. Aliquam consequat urna id augue. Mauris urna. Sed libero arcu, lacinia quis, posuere ut, elementum quis, nisl. Curabitur consectetuer diam ac sapien. Quisque tincidunt turpis vestibulum nisi. Phasellus ultrices volutpat libero.

Morbi orci massa, placerat id, aliquet eu, molestie a, arcu. Maecenas euismod ultrices augue. Fusce consequat pede in dolor. Duis commodo aliquam tellus. Phasellus non nunc. Nullam nec ante. Nullam ipsum elit, tempus at, cursus vitae, ornare a, lacus. Fusce dignissim, turpis id accumsan dictum, augue orci semper diam, id dapibus erat lacus id elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut gravida sem sed quam. Donec ultricies cursus ipsum.


</p>
	</div>
	<div id="foot">
	pied de page
	</div>
</div>
</body>
</html>

ps :il faut détourer ton logo (le rond) et le placer sur un fond transparent gif ou png

johnmalko

3 Jan 2007 à 16:23

Merci Ghost d'avoir à nouveau répondu à ma demande, c très sympa de ta part. Smiley cligne

Le souci avec la solution que tu proposes c'est que le centrage du site ne se fait plus à partir de la partie centrale à savoir le contenu+ la sidebar mais sur l'ensemble des divs du conteneur c'est à dire logo+contenu+sidebar+footer. Comme le logo déborde sur la gauche cela donne l'impression que le site est déséquilibré avec moins de background sur la droite que sur la gauche. C'est ce que je voudrais justement éviter. Je voudrais que le centrage s'opère uniquement sur la partie contenu+sidebar (comme c'est le cas actuellement), la partie manquante du logo venant simplement s'ajouter à cet ensemble sans compromettre le centrage du site tel qu'il existe aujourd'hui. Ce qui, à mon avis, impose une solution où l'on sort le div contenant l'autre partie du logo du div conteneur.

Encore une fois je reconnais que mes explications ne sont pas forcément très claires, n'hésitez pas à me demander plus d'informations.

Merci

ghost

3 Jan 2007 à 17:14

Re,

Pour réaliser ce que tu veux, tu vas te heurter soit à ton logo en position absolute sur le body qui est certe interessante mais qui ne supporte pas le redimensionnement...

Ou en absolute sur ton header, là la partie sur le body ne sera pas visible malgrès tous les z-index du monde ...

Pour le centrer à ta manière d'après le dernier code (c'est pas au pixel mais tu peux le faire)

#conteneur{
width: 697px;
top: 5px;
left: 50%;
margin-left: -400px;
overflow: hidden;
position: relative;
background: url(fond_centre.png);
background-position: 100% 0%;
background-repeat: repeat-y;
}

Modifié par ghost (03 Jan 2007 - 17:29)

johnmalko

3 Jan 2007 à 22:40

ghost a écrit :
Re,

Pour réaliser ce que tu veux, tu vas te heurter soit à ton logo en position absolute sur le body qui est certe interessante mais qui ne supporte pas le redimensionnement...

Ou en absolute sur ton header, là la partie sur le body ne sera pas visible malgrès tous les z-index du monde ...

Pour le centrer à ta manière d'après le dernier code (c'est pas au pixel mais tu peux le faire)
#conteneur{
width: 697px;
top: 5px;
left: 50%;
margin-left: -400px;
overflow: hidden;
position: relative;
background: url(fond_centre.png);
background-position: 100% 0%;
background-repeat: repeat-y;
}

Extra, ca marche !
Avec cette méthode j'ai même pu conserver le logo d'une seule pièce comme dans le montage initial. Si j'avais passé un peu plus de temps à consulter les tutoriaux sur le centrage d'éléments présents sur le site...

Merci encore Ghost pour ton aide ! Je vais pouvoir enfin passer à autre chose, à savoir : optimiser ma feuille de style ! Smiley sourire

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Casse-tête pour caler un footer