28220 sujets
top:100%En fait, c'est le haut de la div qui est positionné en bas de la fenetre.
bottom:0Par contre, peut-être hedonism a-t-il voulu mettre une div en bas du document, et pas en bas de la fenetre.... Mais tu n'as pas été clair la dessus, hedonism !
Hello hedonism et bienvenue ici,
Pourquoi ne pas respecter les règles élémentaires d'un forum en commençant par faire une recherche ?
Ta question est tellement souvent posée qu'elle apparaît dans la FAQ :
http://forum.alsacreations.com/faq/#item25
Bonne lecture et bonne chance
Pourquoi ne pas respecter les règles élémentaires d'un forum en commençant par faire une recherche ?
Ta question est tellement souvent posée qu'elle apparaît dans la FAQ :
http://forum.alsacreations.com/faq/#item25
Bonne lecture et bonne chance
Merci à vous.
Merci aussi à Raphael que je tiens à rassurer sur ma connaissance des règles de fonctionnement des forums et de sa fonction de recherche
Par contre il est certain que quand on sais ce qu’on fait on ne pense peut être pas à transmettre TOUTES les infos aux autres.
1° pour que bottom :0 fonctionne il faut que la position soit absolue.
Sur ma page j’ai imaginé un conteneur centré de 750px en position relative avec marges droites et gauches auto.
Mon footer ne serait donc pas centré (mais vu son contenu ce n’est pas catastrophique)
2° bottom :0 fonctionne sur la page sans contenu (comme j’avais demandé), mais chevauche le contenu quand il y a un contenu.
Ce n’est pas évident de sortir des tables qui ont déformées nos habitude, masi je vais arriver. Il y a certainement une solution
Merci aussi à Raphael que je tiens à rassurer sur ma connaissance des règles de fonctionnement des forums et de sa fonction de recherche
Par contre il est certain que quand on sais ce qu’on fait on ne pense peut être pas à transmettre TOUTES les infos aux autres.
1° pour que bottom :0 fonctionne il faut que la position soit absolue.
Sur ma page j’ai imaginé un conteneur centré de 750px en position relative avec marges droites et gauches auto.
Mon footer ne serait donc pas centré (mais vu son contenu ce n’est pas catastrophique)
2° bottom :0 fonctionne sur la page sans contenu (comme j’avais demandé), mais chevauche le contenu quand il y a un contenu.
Ce n’est pas évident de sortir des tables qui ont déformées nos habitude, masi je vais arriver. Il y a certainement une solution
Bonjour,
La question semble avoir changé en cours de route.
- position:absolute (ou fixed) et bottom: 0 pour coller un élément en bas de la zone d'affichage. L'élément étant extérieur au conteneur éventuel en position relative, pour avoir le conteneur initial comme référence de positionnement.
- réserver une marge ou un padding sur l'élément générant le bloc conteneur initial (body, dans la plupart des cas) pour y placer cet élément sans chevauchement avec le contenu. Ce qui suppose qu'on maîtrise la hauteur de l'élément. S'il contient deux lignes de texte qui en deviennent 3 quand l'utilisateur agrandit les caractères, ce n'est plus maîtrisé. En pratique, on limitera à une ligne de texte très brève à même de rester une seule ligne dans le plus possible de cas de figures. Ou alors, on acceptera un vide "au-dessus" de l'élément pour gérer les agrandissements.
Modifié par Laurent Denis (11 Sep 2005 - 12:45)
La question semble avoir changé en cours de route.
- position:absolute (ou fixed) et bottom: 0 pour coller un élément en bas de la zone d'affichage. L'élément étant extérieur au conteneur éventuel en position relative, pour avoir le conteneur initial comme référence de positionnement.
- réserver une marge ou un padding sur l'élément générant le bloc conteneur initial (body, dans la plupart des cas) pour y placer cet élément sans chevauchement avec le contenu. Ce qui suppose qu'on maîtrise la hauteur de l'élément. S'il contient deux lignes de texte qui en deviennent 3 quand l'utilisateur agrandit les caractères, ce n'est plus maîtrisé. En pratique, on limitera à une ligne de texte très brève à même de rester une seule ligne dans le plus possible de cas de figures. Ou alors, on acceptera un vide "au-dessus" de l'élément pour gérer les agrandissements.
Modifié par Laurent Denis (11 Sep 2005 - 12:45)
bonjour,
voici ma façon de faire pour ce genre de chose:
j' indique 100% de hauteur a html et body, ensuite je place ma page vide ou pas dans un conteneur de "disons 95% de hauteur minimale (utiliser le hack !important ou charger une height en commentaire pour IE), puis aprés ce conteneur je place en clear:both une autre balise de type block avec une hauteur de 5% (a readapter selon les padding ou margin appliquer a ces elements)au maximun et un line height approprié pour centrée verticalement le texte.
(Edit:line-height a adapter selon le nombre de lignes et valeur en pourcentage.)
(je fais alors comme ceci avec la hauteur minimale pour ff et IE
et en commentaire :
(les differentes version de IE peuvent-etre filtrer, a faire si IE 7 n'a (aura) pas besoin de bidouille pour afficher les pages correctement.)
j'espere que cela repond a ta question, j'utilise ce code en xhtml 1.0 pour garder mon pied de page toujours en bas même si la fenetre est plus "haute" que le "contenu principal".
voilou ...
Modifié par gcyrillus (11 Sep 2005 - 14:09)
voici ma façon de faire pour ce genre de chose:
j' indique 100% de hauteur a html et body, ensuite je place ma page vide ou pas dans un conteneur de "disons 95% de hauteur minimale (utiliser le hack !important ou charger une height en commentaire pour IE), puis aprés ce conteneur je place en clear:both une autre balise de type block avec une hauteur de 5% (a readapter selon les padding ou margin appliquer a ces elements)au maximun et un line height approprié pour centrée verticalement le texte.
(Edit:line-height a adapter selon le nombre de lignes et valeur en pourcentage.)
(je fais alors comme ceci avec la hauteur minimale pour ff et IE
html, body {height:100%;}
#conteneur {min-height:95%;
height:auto!important;
height:95%; /* qui pour IE veut dire hauteur minimale*/}
#pied {height:5%;clear:both;}et en commentaire :
<style type="text/css">
html, body {height:100%;}
#conteneur {min-height:95%;}
#pied {height:5%;clear:both;}
</style>
<!--[if IE]>
<style type="text/css">
#conteneur {height:95%;}
</style>
<![endif]-->(les differentes version de IE peuvent-etre filtrer, a faire si IE 7 n'a (aura) pas besoin de bidouille pour afficher les pages correctement.)
j'espere que cela repond a ta question, j'utilise ce code en xhtml 1.0 pour garder mon pied de page toujours en bas même si la fenetre est plus "haute" que le "contenu principal".
voilou ...
Modifié par gcyrillus (11 Sep 2005 - 14:09)
En effet, ma question a changé un peu car en approfondissant le problème je me suis rendu compte qu’il y a bcps des facteurs qui peuvent intervenir sur le comportement des blocs.
Ma première question a été posée pour "faciliter" la compréhension et explication de mon problème, mais finalement il en est rien et c’est plutôt l’inverse qui c’est produit.
Le bon côté de la chose, c’est justement la compréhension, pour moi, de ces différents cas de figure.
En tout cas j’y suis depuis ce matin et il me semble que j’ai trouvé la solution en déclarant le body, html et la hauteur minimale de mon conteneur à 100% et en incluant le footer à l’intérieur du conteneur.
Dans la version première il était sous le conteneur.
Ca marche dans Mozilla, mais pas dans IE
Je vais donc me tourner vers la solution de gcyrillus pour la tester
Ma première question a été posée pour "faciliter" la compréhension et explication de mon problème, mais finalement il en est rien et c’est plutôt l’inverse qui c’est produit.
Le bon côté de la chose, c’est justement la compréhension, pour moi, de ces différents cas de figure.
En tout cas j’y suis depuis ce matin et il me semble que j’ai trouvé la solution en déclarant le body, html et la hauteur minimale de mon conteneur à 100% et en incluant le footer à l’intérieur du conteneur.
Dans la version première il était sous le conteneur.
Ca marche dans Mozilla, mais pas dans IE
Je vais donc me tourner vers la solution de gcyrillus pour la tester
Avec la hauteur de 95% ça me bouffe du contenu sous Firefox, mais ça marche sous IE.
Par contre c’est un peu mieux avec la proportion de 99% 1%
Bref, à voir ICI
Par contre c’est un peu mieux avec la proportion de 99% 1%
Bref, à voir ICI
bonjour,
avec l'idée que je t'ai proposé j'ai repris ton html et css (en effet le pied doit etre en dehors du conteneur principal, et le clear:both; appliqué a celui-ci, sert de "securité" dans le cas ou un element flottant deborde du conteneur principal.
j'ai ajouté le css en commentaire applicable seulement a IE et du fait j'arrive a une page fonctionnant dans l'idée proposée: voila le code(css inclus)
le position absolute du footer est donc inutile, ... ou bien tu as melanger les differentes possibilités proposées ici , ou bien c'est voulu ?
bonne journée
(edit: a propos cette façon de faire qui est la mienne est-elle "brutale" ou acceptable dans l'esprit css et xhtml ?
ps. testeé avec : FF, mozilla, IE6, opera)
Modifié par gcyrillus (12 Sep 2005 - 09:38)
avec l'idée que je t'ai proposé j'ai repris ton html et css (en effet le pied doit etre en dehors du conteneur principal, et le clear:both; appliqué a celui-ci, sert de "securité" dans le cas ou un element flottant deborde du conteneur principal.
j'ai ajouté le css en commentaire applicable seulement a IE et du fait j'arrive a une page fonctionnant dans l'idée proposée: voila le code(css inclus)
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css" >
html, body {
height: 100%;
}
body {
background-color: #647F3F;
background-image: url(bg.gif);
margin: 0pt;
padding: 0pt;
}
#container {
/*position: relative;*/
width: 750px;
min-height: 98%;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
}
#header_menutop {
background-color: #53A0DF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: right;
vertical-align: text-bottom;
padding-bottom: 5px;
padding-right: 10px;
padding-top: 2px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
a.header_menutop:link, a.header_menubas:active, a.header_menubas:visited {
color: #FFFFFF;
text-decoration: underline;
}
a.header_menutop:hover {
color: #FFFFFF;
text-decoration: underline;
}
#header_logo {
background-color: #206CAA;
height: 100px;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #8BBF47;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
}
#header_menubas {
background-color: #333333;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
a.header_menubas:link, a.header_menubas:active, a.header_menubas:visited {color: #FFFFFF; text-decoration: none;}
a.header_menubas:hover {color: #FFFFFF; text-decoration: underline;}
#contenu {
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
padding-right: 60px;
padding-bottom: 48px;
padding-left: 60px;
}
#contenu h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
margin-left: -10px;
}
#footer {
/*position: absolute;
bottom: 0;*/
background-color: #5F793E;
/*background-image: url(bg.gif);*/
width: 750px;
text-align: center;
height:1%;
clear:both;
margin:auto;
}
#footer h1 {
color: #fff;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
</style>
<!--[if IE]>
<style type="text/css">
#container {height:97%;}
</style>
<! endif --> </head>
<body>
<div id="container">
<div id="header_menutop">
<a href="javascript:;" class="header_menutop">Contact</a> <a href="javascript:;"
class="header_menutop">Faq</a> <a href="javascript:;" class="header_menutop">Mentions légales </a> </div>
<div id="header_logo">sdsdf</div>
<div id="header_menubas">
<a href="javascript:;" class="header_menubas">nouvelles</a> | <a href="javascript:;"
class="header_menubas">candidatures</a> | <a href="javascript:;"
class="header_menubas">historique</a> | <a href="javascript:;" class="header_menubas">la
société</a> | <a href="javascript:;"
class="header_menubas">éléctions</a> | <a href="javascript:;"
class="header_menubas">machin</a> | <a href="javascript:;" class="header_menubas">truc</a>
</div>
<div id="contenu">
<h1>Titre Lorem ipsum </h1>
<p><a href="sc.php">Page sans contenu</a> </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut nonummy vestibulum arcu.
Nulla eros eros, mattis et, dictum quis, convallis vel, mauris. Ut sed mauris vel metus pretium pretium. Curabitur tristique sem id justo.
Nunc sit amet felis. Duis luctus pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in, justo. Pellentesque enim lacus,
egestas ut, elementum eu, molestie vel, urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo. Vestibulum rhoncus lacinia pede.
Aliquam lectus velit, auctor a, fermentum a, accumsan et, neque.</p>
<p>Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu,
sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra ut, nulla. Nulla in
ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo. Nulla sapien lorem, tincidunt sit amet, lobortis laoreet, feugiat a,
leo. Etiam id mauris in libero molestie dictum. Cras nisl diam, dapibus ut, sollicitudin sed, auctor nec, orci. Nam eleifend, dui in dapibus
congue, mi diam luctus velit, eu imperdiet pede elit nec lorem. Proin laoreet, eros a dictum faucibus, nunc wisi rhoncus nunc, at rhoncus
lectus tellus vitae urna. Curabitur a turpis at ligula lobortis cursus.</p>
<p>Donec convallis est id augue. Integer elit. Cras mi. Nulla ac tellus eget wisi facilisis egestas. Pellentesque ac
lacus a quam pulvinar ornare. In congue fermentum risus. Pellentesque vitae ligula quis justo vehicula varius. Donec feugiat mi eu urna.
Donec erat massa, posuere ac, adipiscing in, lobortis ac, nisl. Donec malesuada turpis sed arcu. Curabitur lacus. Donec eu elit.</p>
</div></div>
<div id="footer">
<h1>Footer</h1>
</div>
</body></html>le position absolute du footer est donc inutile, ... ou bien tu as melanger les differentes possibilités proposées ici , ou bien c'est voulu ?
bonne journée
(edit: a propos cette façon de faire qui est la mienne est-elle "brutale" ou acceptable dans l'esprit css et xhtml ?
ps. testeé avec : FF, mozilla, IE6, opera)
Modifié par gcyrillus (12 Sep 2005 - 09:38)
gcyrillus a écrit :
le position absolute du footer est donc inutile, ... ou bien tu as melanger les differentes possibilités proposées ici , ou bien c'est voulu ?
Bonsoir,
A force de changer il se peut qu'à la fin il y avait tout en n'emporte nawak dans le code
En tout cas, peu importe si la méthode est brutale ou pas, elle est efficace.
Merci gcyrillus pour le coup de main