28173 sujets

CSS et mise en forme, CSS3

hello,

je voudrais placer un div toujours fixé en bas de page mais qui suit tout de même le contenu de la page.

Prenons l'exemple d'une page avec un DIV#bottom coincé en bas (position:fixed; bottom:0px;). Si le contenu de ma page est long, cela va biensûr générer une scrollbar et le contenu va passer sous mon DIV#bottom. En fait, ce que je voudrais, c'est que le contenu pousse mon DIV#bottom. Ainsi, quand le contenu de la page est minime, mon DIV#bottom reste fixé en bas, et quand le contenu est long et nécessite une scrollbar, mon DIV#bottom est poussé en bas sous le contenu...

Je ne sais pas si mon explication est claire...

Je pense qu'il doit y avoir une solution grâce au javascript qui permettrait de détecter la présence ou non des scrollbars...

Merci de votre aide a+


Note du modérateur : suppressioon des capitales (du moins une bonne partie) dans le titre du sujet.
Modifié par mpop (24 Jul 2006 - 17:08)
mitch1979 a écrit :
Je ne sais pas si mon explication est claire...

Si si ça va.

mitch1979 a écrit :
Je pense qu'il doit y avoir une solution grâce au javascript qui permettrait de détecter la présence ou non des scrollbars...

C'est jouable (et plus proprement) sans javascript.

Il te faut :
– html et body en height: 100%;, avec marges et padding à zéro ;
– un conteneur global ayant pour une hauteur minimale (min-height) de 100% ; obtenir le même effet dans IE6 avec height: 100%;, à préciser via des commentaires conditionnels (pour IE6 et précédents) ;
– un bloc pied de page à l'intérieur du conteneur global, positionné en absolu à bottom: 0;
– le conteneur global devra être en positionnement relatif, pour servir de référence de positioonnement au bloc pied de page ;
– le dernier élément du bloc conteneur (hors pied de page) devra avoir un padding-bottom de la hauteur du pied de page, afin de ne pas glisser en dessous ;
– enfin on fera attention aux problèmes de fusion des marges.

C'est un peu compliqué à gérer, mais :
– ça ne repose pas sur javascript ;
– ça n'est pas une bidouille mais bien une utilisation un peu poussée du positionnement CSS (avec une ou deux corrections pour les insuffisances d'IE, mais rien de méchant).
Modifié par mpop (24 Jul 2006 - 17:06)
c nickel ! respect........ Smiley jap
Par contre, concernant les "commentaires conditionnels", j'ai placé ce code :

<!--[if gte IE 5]> height:100%; <![endif]-->


dans le conteneur globale en suivant les instruction de cette page :

http://forum.alsacreations.com/faq/#item53

mais cela me crée un bug d'affichage. Faut-il placer ce code dans le doc HTML entre des balises <style> ?

Merci encore a++
Modifié par mitch1979 (25 Jul 2006 - 11:15)
mitch1979 a écrit :
mais cela me crée un bug d'affichage. Faut-il placer ce code dans le doc HTML entre des balises <style> ?

Les commentaires conditionnels sont de simples commentaires HTML. À l'intérieur du commentaire, une syntaxe particulière indique à IE qu'il ne faut pas ignorer le contenu du commentaire. Mais comme il s'agit de commentaires HTML, il faut les placer dans un contexte de code HTML.

Il faudrait vérifier, mais il me semble que IE7 supporte les hauteurs minimum. On utilisera donc plutôt ce genre de commentaire :

<!--[if lte IE 7]>
	<link href="ie-only.css" rel="stylesheet" type="text/css" />
<![ endif]-->

Petite référence en passant :
http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

Tiens, je pense que j'avais lu ton message de travers. Tu as placé ton commentaire conditionnel à l'intérieur de l'attribut style de ton élément HTML ? Je ne sais pas trop si on peut faire ça (placer un commentaire HTML dans un attribut de balise). Ou alors, ton problème vient de la fin de la syntaxe que tu as employée, à priori incorrecte.
Modifié par mpop (26 Jul 2006 - 17:05)
mpop a écrit :
<!--[if lte IE 7]>
	<link href="ie-only.css" rel="stylesheet" type="text/css" />
<![endif]-->

Sur ce forum, si tu mets "endif" entre crochets sans espace cela génère un code pour une image :
 <img src="smilies/endif.gif" alt="endif" /> 
Smiley rolleyes
Donc Mitch, ne pas oublier d'ajouter les crochets autour de "endif" (voir le lien donné)
Modifié par Alan (26 Jul 2006 - 00:41)