[Résolu] position d'un div tout en bas d'une page

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu] position d'un div tout en bas d'une page

Pulsar-

Bonjour, à l'instar de ce schema mon site contient un bloc div contenant les données à afficher tout en bas de ma page.

Cependant lorsque le texte de mon "corps" est petit, mon div "pied de page" n'est plus en bas de la page mais dans à la position du corps.
Le menu de gauche étant en float left.

Comment faire en sorte que le div de bas de page soit obligatoirement en dessous d'une certaine position (le bas extreme de la page) ?

Message édité par Pulsar- le 11-08-2007 à 13:43:55

Publicité

TheRom_S

met ton div en "clear: left;" ou même "clear: both;" pour qu'il soit positionné sous le float: left et éventuellement sous un float: right avec "both"

---------------
The Rom's, à votre service

Pulsar-

Merci !
J'ai trouvé également pour positionner le bloc du bas à la position désiré. Merci

Pulsar-

En fait j'ai du me passer d'un .css pour la position de ce div qui se situe dans un fichier .php qui n'appelle pas le fichier .css

Alors que ca fonctionnait avec le fichier .css cela ne fonctionne plus en mettant esl paramètres directement dans la balise div et c'est là que j'ai besoin de vous pour effectuer cette conversion.

le code qui fonctionnait :

Code :

#vide
{
clear:left;
float:left;
height:500px;
}

Le nouveau code qui ne fonctionne pas :

Code :

<div style="clear:left," style="float:left" height="500px">

TheRom_S

<div style="clear:left; float:left; height:500px;"> [:spamafote]

---------------
The Rom's, à votre service

Pulsar-

Merci Ca fonctionne ... et ca fonctionne pas, en fait la solution que j'avais trouvé n'est pas la bonne puisque ne fait pas ce que j'en attends.
Je pensais qu'en mettant ce div "de vide" ca empecherait le div du bas d'etre trop haut mais en fait ca lui impose juste d'etre en dessous du corps de 500px or ce que je voudrais c'est que le div du bas soit en dessous du menu de 500px et non du corps.
Une idée ?

astryad

Une solution qui peut marcher :

1) Tu mets tout le contenu de ton site (menu et autre texte, sauf le div du bas) dans un autre div, auquel tu donne un id "divSite". A cote de ca, mets un id divBas sur le div censé apparaître en bas :

Code :

<body>
<div id="divSite">
</div>
<div id="divBas">
</div>
</body>

2) Niveau CSS, tu fais qqchose comme ca :

Code :

body {
margin: 0;
height: 100%;
}
div#divSite {
height: 100%;
}
div#divBas {
height: 100px;
margin-top: -100px;
}

Bien sûr, la valeur du margin-top de ton #divBas doit être égale à la somme padding + border-top + border-bottom + height du div.
Le "margin: 0" du body permet d'éviter de rajouter la barre de défilement vertical, qui apparait si la marge n'est pas nulle.

Voila

Pulsar-

Merci.
Le concept est bon mais chez moi pas moyen d'avoir le divSite faisant toute la page. Ce qui fait que le divBas lui colle juste après et ne se situe pas en ba de la page mais en dessous de la derniere écriture du divSite.

Comme si le "height : 100%;" ne fonctionnait pas. S'il fonctionnait le problème serait résolu.

TheRom_S

non mais tu mets ton div "footer" en "clear: both;" et ça va marcher du moment que l'ordre de tes div dans le HTML c'est header, menu, corps, footer

---------------
The Rom's, à votre service

astryad

Pour ma technique, il faut bien faire attention à ce que le body ait aussi "height: 100%", sinon, effectivement, il n'est pas pris en compte pour le divSite

Publicité

Pulsar-

Ya rien a faire ce height:100% ne passe pas.

J'ai minimalisé le truc car ca commence à m'enquiquiner.

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
</head>
<body>
<div id="body">
<p>coucou</p>
</div>
<div id="divBas">
<p>pouet</p>
</div>
</body>
</html>

et le style.css :

Code :

body
{
height: 100%;
margin: 0;
}
#body
{
height: 100%;
}
#divBas
{
height: 100px;
margin-top: 0px;
clear:both;
}

Et meme ca ca ne fonctionne pas !

Message édité par Pulsar- le 10-08-2007 à 19:38:18

TheRom_S

:heink: :??: :??:
"clear: both;" c'est pour quand t'as des float avant, "height" ne sert à rien pour les div

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Titre</title>
<style>
body {
margin: 0;
}
#header {
width: 100%;
border: solid 1px black;
}
#menu {
width: 20%;
float: left;
border: solid 1px black;
}
#menu a {
display: block;
}
#body {
margin-left: 20%;
border: solid 1px black;
}
#footer {
clear: both;
width: 100%;
border: solid 1px black;
}
</style>
</head>
<body>
<div id="header">Header ici</div>
<div id="menu">
<a href=".">lien1</a>
<a href=".">lien2</a>
<a href=".">lien3</a>
<a href=".">lien4</a>
<a href=".">lien5</a>
<a href=".">lien6</a>
<a href=".">lien7</a>
</div>
<div id="body">
Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ille Philo, numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis, Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate, tamquam superiorem colebat suosque omnes per se posse esse ampliores volebat.
</div>
<div id="footer">Footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici</div>
</body>
</html>

C'est pourtant pas compliqué ! [:spamafote]

---------------
The Rom's, à votre service

Pulsar-

Alors c'est que tu n'as peut etre pas compris ce que j'attendais.

Je veux que le footer soit au bas de la page et non pas à la suite du texte du body. Or c'est ce que fais ton code.

Si j'ai laissé le clear:both c'est parce que j'ai oublié de l'enlever, il prevenait de mon ancien code.

Et meme en reprenant ton code et en mettant un height:100% dans le body ca ne donne pas ce que j'attends. Le div footer se situe toujours à la suite du body. [:spamafote]

Message cité 1 fois

Pulsar-

Mais apparemment les premiers resultat d'une recherche google laissent à penser que ce n'est pas si simple que ca ...

http://www.google.fr/search?source [...] ogle&meta=

TheRom_S

Pulsar- a écrit :

Tu mens

:pfff:

Message édité par TheRom_S le 10-08-2007 à 20:55:48

---------------
The Rom's, à votre service

Pulsar-

Oui, c'est bien ce que je disais tu n'a pas compris ce que je voulais.
Peut-etre me suis mal exprimé aussi ...

Voilà ce que j'attends:

astryad

Effectivement, après vérification, ma méthode ne marche que sans le doctype

Ca m'apprendra à ne pas le mettre quand je fais un fichier test.html ...

TheRom_S

Ok désolé, sous FF, c'est facile mais pour que ça marche sous IE, faut faire autre chose donc voilà (le résultat est pas tellement identique dans les deux mais ça devrait aller si tu met pas de border

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Titre</title>
<style>
body {
margin: 0;
padding: 3px;
}
div {
margin: 0;
padding: 5px;
}
#header {
border: solid 1px black;
}
#menu {
width: 194px;
float: left;
/* solution FF
min-height: 600px;
*/
border: solid 1px black;
}
#menu a {
display: block;
}
#body {
margin-left: 206px;
/* solution FF
min-height: 600px;
*/
border: solid 1px black;
}
/* hack IE */
#minheight {
height: 600px;
float: right;
width: 1px;
}
/* hack IE */
#minclear {
clear: both;
height: 1px;
overflow: hidden;
}
#footer {
clear: both;
border: solid 1px black;
}
</style>
</head>
<body>
<div id="header">Header ici</div>
<div id="menu">
<div id="minheight"></div>
<a href=".">lien1</a>
<a href=".">lien2</a>
<a href=".">lien3</a>
<a href=".">lien4</a>
<a href=".">lien5</a>
<a href=".">lien6</a>
<a href=".">lien7</a>
<div id="minclear"></div>
</div>
<div id="body">
<div id="minheight"></div>
Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ill$
<div id="minclear"></div>
</div>
<div id="footer">Footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, footer ici, foote$
</body>
</html>

---------------
The Rom's, à votre service

Pulsar-

Super !
Merci beaucoup à toi (a vous) pour votre aide !

FORUM HardWare.fr

Programmation

HTML/CSS

[Résolu] position d'un div tout en bas d'une page

Sujets relatifs
Page qui s'affiche bien avec le navigateur mais mal sur le bureau	appel javascript impossible dans page appelée en ajax
Différence entre membre dans et hors __init__ [RESOLU]	Résolu - Arrayliste, exemple COMPLET
[résolu] CSS zoom limité à 30 images ?	Tri de réponses chiffre/caractère [resolu]
[Résolu][MYSQL] lister les doublons + rapidement	Enregistrer le contenu d'une page dans une variable
Affichage des données dans une position bien défini	Résolu
Plus de sujets relatifs à : [Résolu] position d'un div tout en bas d'une page

Page générée en 0.080 secondes