[XHTML] Caller un pied de page

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 Page Suivante Page Précédente Bas de page
Auteur	Sujet : [XHTML] Caller un pied de page

Kyle

Hello, j'ai un petit souci de mise en page, en fait je voudrais aligner mon pied de page toujours en bas.
Voila deja ce que j'ai fait, mais ce n'est pas parfait. En fait le div1_1 prends tout l'écran et le div1_2 se retrouve en dehors et cela me cré un scroll.
J'ai tenté en mettant le div1_1 à 97%, ca passe mais plus on réduit la fenetre et plus le pied de page est "mangé" par celle-ci.
Auriez-vous une astuce pour que le pied soit toujours bien aligné ?
Merci.

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" lang="fr">
<head>
<title>Ma page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<style>
html,body {
margin: 0px;
padding: 0px;
height : 100%;
}
#div1 {
height : 100%;
width: 762px;
}
#div1_1 {
height: 100%;
width: 762px;
}
#div1_2 {
height : 20px;
width: 762px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div1_1">Contenu</div>
<div id="div1_2">Pied de page</div>
</div>
</body>
</html>

Publicité

fastclemmy

(re-)Dictateur en plastique

http://css-discuss.incutio.com/?page=FooterInfo
http://www.porjes.com/btm1.html

Kyle

Merci

Hermes le Messager

Breton Quiétiste

Donc, pas de soluce sans hack --> conclusion --> table de 100% de haut avec deux lignes, celle du bas fixe en hauteur.

Kyle

Ben avec le hack ca m'évite de retoucher le code de la page...

Kyle

Aucune des méthodes fonctionnent sur Mac (Safari et IE 5.2)

Hermes le Messager

Breton Quiétiste

Kyle a écrit :

Aucune des méthodes fonctionnent sur Mac (Safari et IE 5.2)

Ben oui, les hacks c'est tout pourri, c'est pas nouveau hein...

Alors tu lis ma solution plus haut.

Kyle

Hermes le Messager a écrit :

Ben oui, les hacks c'est tout pourri, c'est pas nouveau hein...

Alors tu lis ma solution plus haut.

ouai pas le choix
Mais j'aime pas les utiliser pour la mise en page en xhtml

Hermes le Messager

Breton Quiétiste

Kyle a écrit :

ouai pas le choix
Mais j'aime pas les utiliser pour la mise en page en xhtml

Ben moi non plus et j'évite soigneusement dès que je peux d'ailleurs.

gm_superstar

Appelez-moi Super

Hermes le Messager a écrit :

Donc, pas de soluce sans hack --> conclusion --> table de 100% de haut avec deux lignes, celle du bas fixe en hauteur.

Bon, on a compris. Tu vas pas ramener ça à chaque fois non ? [:mlc]

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Publicité

gizmo

Hermes le Messager a écrit :

Donc, pas de soluce sans hack --> conclusion --> table de 100% de haut avec deux lignes, celle du bas fixe en hauteur.

Hum... Sachant que mettre une table à 100% de haut nécessite un hack pour fonctionner...

Hermes le Messager

Breton Quiétiste

gizmo a écrit :

Hum... Sachant que mettre une table à 100% de haut nécessite un hack pour fonctionner...

Ah ? Lequel ? :??:

gizmo

Hermes le Messager a écrit :

Ah ? Lequel ? :??:

la hauteur d'un objet, lorsqu'elle est exprimée en pourcentage, est fonciton de son bloc conteneur. Quand celui-ci n'a pas de valeur, le pourcentage est automatiquement changé en "auto".

Donc, il faut déjà applique une hauteur au bloc conteneur, premier hack.

Ensuite, le bloc conteneur étant body, la règle s'applique également à celui-ci. Le seul problème, c'est que pour body, le bloc conteneur est, selon la norme, laissé à l'appréciation de l'UA.

Pour certains browser, il s'agit du bloc html, on rajoute donc une hauteur de 100% à celui-ci. Deuxième hack, d'autant plus que la hauteur de 100% n'indique en rien à quoi ces % font allusion. A la taille de l'écran? du browser? de la partie browsable du browser? C'est laissé au bon vouloir de l'UA, s'il prend ce hack en compte.

Pour d'autre browser, le bloc conteneur n'est pas html (considéré comme balise root et donc ayant un statut spécial en soi) mais bien le browser. Ici même problème. Les 100% de body s'appliquent-ils à la taille de la fenêtre browsable ou à la taille du browser?

En outre, si les browsers respectaient scrupuleusement la norme, il faudrait, en cas de page ayant une hauteur dépassant ta prévision, que le texte sort du cadre infligé par le tableau et continue en dessous de celui-ci.

Heureusement pour toi, aucun browser ne respectent encore parfaitement la norme est ton hack fonctionne pour le moment, mais cela reste un hack. Et qui a faire des hack, je préfère parrier sur l'avenir.

gm_superstar

Appelez-moi Super

Et j'ajouterais, que la seule bonne manière de donner 100% de hauteur à un bloc, c'est d'utiliser en même temps la propriété "position: fixed" car c'est la seule qui fait explicitement référence à la zone de visualisation.

On lève ainsi tout ambiguité : le pourcentage est exprimé en fonction de la hauteur de la zone de visualisation et pas du conteneur (ce qui, autre avantage, permet de s'affranchir de celui-ci).

Mais bon on sait ce qu'il en est de fixed dans IE...

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Jubijub

Parce que je le VD bien

à vous lire tt les 3, y'a aucune solutions valide cross broser qui soit pas dégueulasse...

les normes c bien, mais faudra attendre ie 8.0 au moins pour que ca passe (je veux dire qu'il faudra attendre que ie6.0 disparaisse, en espérant que le remplaçant soit full w3c compliant, ce qui est pas gagné)

---------------
Jubi Photos : Flickr - 500px

Hermes le Messager

Breton Quiétiste

gizmo a écrit :

Hermes le Messager

Breton Quiétiste

Jubijub a écrit :

à vous lire tt les 3, y'a aucune solutions valide cross broser qui soit pas dégueulasse...

Je ne suis même pas sûr dans un cas comme celui-là, que la disparition d'IE changer réellement la donne. Il restera tous les autres qui ont aussi des particularités.
Mozilla ou Opera ne respectent pas un vertical-align : middle dans un div. C'est pourtant la condition sine qua non si on veut pouvoir se débarasser des tables.

C'est un exemple, et il y en a d'autres... Les divs permettent de pratiquement tout faire, mais en bidouillant, en trichant, en complexifiant et surtout finalement en prenant de gros risques, surtout si c'est pour un client "qui paye".

Donc, moi j'utilise les divs à chaque fois que c'est sans risque et simple, et SURTOUT les propriétés que j'utilise ne sont pas détournées mais correspondent exactement à ce pour quoi elles ont été inventées. J'insiste là dessus.

Je pense qu'il faudra encore bcp de temps pour se débarasser des tables.

Kyle

En fait, il y a un probleme avec IE5.2 MAC car si je met tout simplement :

Code :

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

Cela cré un scroll énorme dans le navigateur

Hermes le Messager

Breton Quiétiste

Kyle a écrit :

En fait, il y a un probleme avec IE5.2 MAC car si je met tout simplement :

Code :

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

Cela cré un scroll énorme dans le navigateur

ça vient de html ou de body ? le sujet m'intéresse.

Kyle

Hermes le Messager a écrit :

ça vient de html ou de body ? le sujet m'intéresse.

Seulement lorsque l'on met les 2 a 100% !

Kyle

Et pour que le tableau s'adapte bien en hauteur, il faut :

Code :

* body {
height: 100%;
}

Message édité par Kyle le 28-04-2004 à 11:35:55

Kyle

Je suis tombé la dessus, peut-etre que vous connaissiez deja ;

http://www.dyingculture.net/blog/2 [...] eanEdwards

gm_superstar

Appelez-moi Super

Hermes le Messager a écrit :

Mozilla ou Opera ne respectent pas un vertical-align : middle dans un div.

Normal, ils n'ont pas à le faire [:spamafote]

Hermes le Messager a écrit :

C'est pourtant la condition sine qua non si on veut pouvoir se débarasser des tables.

Bah, si tu y tiens absolument tu ajoutes "display: table-cell" à ton bloc et vertical-align s'appliquera...

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

gizmo

Hermes le Messager a écrit :

ça tient pas debout ton histoire.
Si le fait que 100% de hauteur n'a pas de sens pour HTML ou BODY, je ne vois absoluement pas ce que ça change entre une table de 100% de haut et un div de 100% de haut. Dans les deux cas, ça n'a donc pas de sens, puisque c'est 100% d'un truc lui-même de 100% qui n'a pas de sens... [:totozzz] (Si je te suis bien).

Ce sont vraiment des arguments à deux balles là...
Non, tu n'as rien compris. Les 100% ont une valeur pour peu que le conteneur aie une valeur calculable. Le problème c'est que pour HTML et BODY, il n'y a pas de conteneur définit dans la norme, d'où impossibilité de garantir le bon fonctionnement de ta méthode sur le long comme sur le court therme.

Un code doit être le même partout et pour tout et SURTOUT il doit rester simple et à la portée du quidam, car le HTML n'est pas fait pour être un truc de spécialiste éminent, mais est bien fait pour permettre à tout le monde de s'exprimer sur la toile. C'est un langage qui se veut universel et donc "facile" à la base.
T'as vu ça où? le HTML est un standard crée pour échnager des information à caractère scientifique dans un premier lieu. Sa vocation n'a jamais été d'être un outil pour neuneu.

Donc, tant qu'il n'existe pas de moyen simple, universel et crossbrowser pour fixer un div de taille fixe en bas avec le reste en auto, ma solution est la seule viable.
non, parce qu'elle n'est pas non plus cross-browser

Je te rappel que la personne qui a tenté d'utiliser ta méthode a échoué pour IE 5.2 MAC et safari...
Quelle solution? je n'en n'ai pas proposé ici.

kileak2

salut !

question con : qu'appelez-vous un hack ?

merci

Flyman30

kileak2 a écrit :

salut !

question con : qu'appelez-vous un hack ?

merci

Une "bidouille" pour contourner un problème

El_gringo

Donc, pour vous, le HTML 4 et version précédentes et un hack à lui tout seul, non ?

bobe

El_gringo a écrit :

Donc, pour vous, le HTML 4 et version précédentes et un hack à lui tout seul, non ?

:heink:

Kyle

Dans un sens oui car on a détourné la vrai utilisation des tableaux qui sont a la base fais juste pour des listes de données...

Hermes le Messager

Breton Quiétiste

Kyle a écrit :

Dans un sens oui car on a détourné la vrai utilisation des tableaux qui sont a la base fais juste pour des listes de données...

Faut dire qu'à l'époque, il n'y avais pas bcp d'autre choix... :whistle:

Kyle

Hermes le Messager a écrit :

Faut dire qu'à l'époque, il n'y avais pas bcp d'autre choix... :whistle:

C'est clair !

En fait c'est l'ultime hack qui a révolutionné le web

kileak2

Flyman30 a écrit :

Une "bidouille" pour contourner un problème

merci

kileak2

salut

en fait perso,

j'ai trois div :

<div id="menu"></div>
<div id="centre"></div>
<div id="pied"></div>

Dc c'est facile j'ai dis à #centre qu'il faisait 400px de height. Dc s'il a bcp de texte, il descend automatiquement.
Ce qui est bien, c'est que #pied le suit et reste collé en-dessous de lui.

Par contre à l'inverse, si le menu devient énorme !
le menu s'agrandit mais #pied reste collé à #centre et ne suit pas #menu.

Je pause la question car ce n'est pas tout à fait le même besoin que Kyle.

Ya-t-il pour mon cas une solution autre qu'un hack ?

merci

Flyman30

kileak2 a écrit :

Oui un div "contenu" qui englobe le div "menu" et le div "centre" et tu mets le div "pied" en dessous

kileak2

Flyman30 a écrit :

Oui un div "contenu" qui englobe le div "menu" et le div "centre" et tu mets le div "pied" en dessous

Yes merci !

J'avais déjà

<div id="contenu">
<div id="menu"></div>
<div id="centre"></div>
<div id="pied"></div>
</div>

j'ai plus qu'à faire :

<div id="contenu">
<div id="menu"></div>
<div id="centre"></div>
</div>
<div id="pied"></div>

:hello:

kileak2

Ar j'ai qd même un prob :

Citation :

#conteneur {
position: relative;
width: 750px;
left: 50%;
margin-left: -375px;

background-color: Black;
}

#gauche {
position: absolute;
left:0;
width: 180px;
background-color: Black;
z-index : auto;
}

#centre {
background-color: white;
margin-left: 180px;
padding:5px;
text-align : justify;
border-color : #000000;
height:400px;
}

#pied {
position: relative;
width: 750px;
left: 50%;
margin-left: -375px;

background-color: black;
text-align : center;
padding-top:10px;
color : White;
height : 20px;
}

Mon menu est en absolute et je crois que ca fout le bronx.

En fait, il passe au dessus de la lmite inférieur de #contenu et dc il n'abaisse pas le #pied.

Maintenant, si je mets le menu en relative, c'est lui qui pousse tout vers le bas

Flyman30

Mets le en float:left

kameha

J'ai un peu le meme genre de probleme.

J'ai une page html:

Code :

<div id="conteneur">
<div id="gauche"></div>
<div id="header"></div>
<div id="droite"></div>
<div id="centre"></div>
<div id="pied">pied de page</div>
</div>

et mon css:

Code :

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 95px;
background-color: #CCCCCC;
width: 605px;
margin-left: 145px;
}
#conteneur {
position: absolute;
width: 750px;
background-color:#E6E9F3;
text-align: left;
}
#centre {
background-color:#FFFFFF;
margin-left: 145px;
margin-right: 155px;
min-height: 300px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#droite {
position: absolute;
right:0;
width: 155px;
}
#pied {
height: 55px;
background-color: #C7CBD6;
}

Pour l'instant c'est "centre" qui pousse les autres colonnes vers le bas.
Le probleme, c'est si "gauche" dépasse "centre" en hauteur. Il passe par dessus "pied". Je crois que c'est un peu le même probleme que kileak2.
N'est-il pas possible que gauche et droite réagisse de la même façon que centre? Si j'enleve position absolute, ma page part en live.
merci

Message édité par kameha le 13-05-2004 à 09:21:55

Flyman30

essaye comme ça:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<% @LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Modele</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body
{
text-align: center;
margin: 0px 0px 0px;
background-color: #FFFFFF;
font-family: Verdana, Helvetica, sans-serif;
font-size:1Ox;
line-height:normal;
color:#000000;
}
.cadre-global
{
text-align: left;
margin-right: auto;
margin-left: auto;
width: 98%;
background-color: #FFFFFF;
}
.contenu
{
margin-top: 5px;
margin-left: 175px;
margin-right: 0px;
width: auto;
min-height: 600px;
vertical-align: top;
background-color: #FFFFFF;
}
.texte-contenu
{
margin: 5px;
margin-top: 5px;
min-height: 600px;
width: 98%;
background-color: #FFFFFF;
}
.menu
{
background-color: #FFFFFF;
color: #000000;
margin-top: 5px;
margin-left: 5px;
border-bottom: 1px solid #008040;
width: 150px;
}
.pied
{
height: 50px;
clear:both;
}
</STYLE>
</head>
<body>
<div class="cadre-global">
<div class="menu"> 
</div>
<div class="corps">
<div class="contenu">
<div class="texte-contenu">
<p>&npsb;</p>
</div>
</div>
</div>
</div>
<div class="pied">
<p>&npsb;</p>
</div>
</body>
</html>

Hermes le Messager

Breton Quiétiste

Flyman30 a écrit :

essaye comme ça:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<% @LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Modele</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body
{
text-align: center;
margin: 0px 0px 0px;
background-color: #FFFFFF;
font-family: Verdana, Helvetica, sans-serif;
font-size:1Ox;
line-height:normal;
color:#000000;
}
.cadre-global
{
text-align: left;
margin-right: auto;
margin-left: auto;
width: 98%;
background-color: #FFFFFF;
}
.contenu
{
margin-top: 5px;
margin-left: 175px;
margin-right: 0px;
width: auto;
min-height: 600px;
vertical-align: top;
background-color: #FFFFFF;
}
.texte-contenu
{
margin: 5px;
margin-top: 5px;
min-height: 600px;
width: 98%;
background-color: #FFFFFF;
}
.menu
{
background-color: #FFFFFF;
color: #000000;
margin-top: 5px;
margin-left: 5px;
border-bottom: 1px solid #008040;
width: 150px;
}
.pied
{
height: 50px;
clear:both;
}
</STYLE>
</head>
<body>
<div class="cadre-global">
<div class="menu"> 
</div>
<div class="corps">
<div class="contenu">
<div class="texte-contenu">
<p>&npsb;</p>
</div>
</div>
</div>
</div>
<div class="pied">
<p>&npsb;</p>
</div>
</body>
</html>

Et 5 niveaux de divs, c'est censé être correct syntaxiquement et philosophiquement ? :whistle:

Publicité

Page : 1 2

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

[XHTML] Caller un pied de page

Sujets relatifs
[Php] - Resultat de la base SQL sur une page .	Aligner verticalement en xhtml [résolu]
J'arrive pas à propager mon id de session d'une page à l'autre	Comment cibler une page "inaccessible" ?
[Java][Servlet] Rafraichissement de page générées	Interdire le "bouton droit->ajouter aux favoris" sur une page ASP/Html
[ XHTML 1.1 ] Validation qui débloque ?	Reload page
Problèmes de rafraichissement de page ASP.NET et IIS	Revenir à la page précédente après plusieurs refresh
Plus de sujets relatifs à : [XHTML] Caller un pied de page

Page générée en 0.132 secondes