[Résolu] - Finaliser mon site

[EDIT] = 14/11/2010 - Remplacement message original.

Bien le bonjour,

je reviens vers vous car je suis en train de finaliser la mise en page de mon site, et il me reste cependant quelques soucis avec cette dite mise en page.

En gros, le footer ne veux pas se mettre en bas de la page, il reste en bas de fenetre quoi que je fasse.

Le truc du sticky footer ne fonctionne pas non plus.

J'ai beau mettre un <div id='container'></div> dans ma page afin d'englober tous les flux sauf le footer, cela ne fonctionne pas.

En effet j'ai l'impression que le flux News player se déplace comme il le souhaite et ne pousse pas le flux footer.

Voici une URL d'accés:

Unicore

Comme vous pouvez le constater, si je place mon footer en absolute, en plein écran tout est fonctionnel, par contre des que je réduit la taille de la fenêtre, le footer se fou en plein milieu du dernier flux avant lui sans tenir compte du sticky footer.

Je pense que ça viens de la façon dont j'ai agencé mon site mais je ne suis pas sure.
Modifié par DR I (21 Nov 2010 - 12:07)

Bonjour,

Pour l'élément parent qui contient des éléments en float, tu peux faire des recherches sur clear:left, clear:right et clear:both en CSS.

je viens d'essayer de mettre un clear sur l'element de la barre inferieur qui part aprés les block de monitoring et ça donne pas tout à fait le bon affichage.

Maintenant mon coin bas gauche se positionne bien a gauche ou il devrait, mais c'est le block du milieu qui ne se positionne plus correctement maintenant.

De plus, mon DIV parent ne grandi pas plus qu'avant.

Je n'ai pas tout bien compris, mais si c'est un soucis avec les float (le soucis n 2) :

Soit tu mets "overflow:hidden" sur l'élément qui englobe les blocs en float

Soit juste avant la fermeture de ton bloc qui englobe les blocs en float, tu mets quelque chose comme <div style="clear:both;"></div>

DR I, je t'invite à lire un article sur l'Initiation au positionnement css : position float. Il y a quelques exemples avec l'utilisation du clear.

Bien, je vais essayer le clear both sur le div parent mais je pense pas que ça fonctionne

Moi ce que je veux c'est que mon parent grandisse en fonction du contenu, ainsi il vas pousser le bloc de dessous.

Le clear ne doit pas être sur le div parent, mais sur un élément à l'intérieur. Voir l'article mentionné plus haut.

DR I a écrit :


Nan mais t’inquiète, on a édité nos messages en même temps, du coup, il ne s'adressé pas au tiens.

Ouep, je vais voir pour ton article.

je disais "Soit juste avant la fermeture de ton bloc" (donc avant ton </div>) et non dans le style du bloc parent.

Sinon overflow:hidden ... (si tu n'as rien qui "dépasse")
Modifié par kenor (08 Nov 2010 - 19:39)

kenor a écrit :

je disais &quot;Soit juste avant la fermeture de ton bloc&quot; (donc avant ton &lt;/div&gt;) et non dans le style du bloc parent.

Sinon overflow:hidden ... (si tu n'as rien qui &quot;dépasse&quot;)

Je vais tenter le spacer, ça à l'air pas mal, par contre, c'est quand même mal foutue la gestion des flux.

Ils auraient du faire gérer les blocs en float comme des blocs normaux au niveau des parents et faire en sorte que les float ne change pas l’interprétation du DIV parent.
Modifié par DR I (09 Nov 2010 - 11:47)

- Bien, j'ai tenté le coup du spacer, et apparemment ça ne fonctionne pas.

j'ai placé un DIV vide nommé spacer avec comme propriété un clear:both dans mon DIV BodyMainMiddle avant les div de monitoring, et mon DIV BodyMainMiddle ne s'agrandie pas.

Bon, j'ai tout de même réussi à placer mes DIVs correctement, il y'avait juste un souci de Z-index etc.

Bref, le problème Numéro 1 est bel et bien résolu, cependant,le problème de footer ne l'est pas lui.

J'ai beau regarder et faire la même chose qu'ici:

http://www.pompage.net/pompe/pieds/

Ça ne fonctionne pas car je travail avec trois inclusion et j'ai l'impression que le flux n'est pas interprété correctement dans ce cas.

DR I a écrit :
Ils auraient du faire gérer les blocs en float comme des blocs normaux au niveau des parents et faire en sorte que les float ne change pas l’interprétation du DIV parent.

Non.

Le comportement des flottants, qui repoussent le contenu (texte, images...) mais pas les limites des conteneurs, est nécessaire. Autrement l'effet de base que vise la propriété float serait souvent impossible à obtenir.

Le principal problème de float c'est qu'on l'utilise pour quelque chose qui n'est pas son rôle à la base: placer une série d'éléments côte-à-côte ou faire des «colonnes». Normalement, pour ce type de mise en page on a display:inline, display:inline-block ou display:table-cell (en CSS 2.1).

Pour ton dernier problème: ça serait plus simple à analyser si on avait accès à une page en ligne. Les tartines de code, c'est vite indigeste et ça s'explore mal avec Firebug.

PS: je déplace dans le salon CSS vu qu'il s'agit de problèmes d'affichage et pas de problèmes de structure ou sémantique HTML.
Modifié par Florent V. (13 Nov 2010 - 14:23)

Merci pour l'info sur les float.

Pour ce qui est de la page, voici un lien vers une page avec la même structure afin de voir de quel souci je parle.

Unicore

En gros, lorsque vous rapetissez la fenêtre, le footer reste sur le bas de la fenêtre et pas sur le bas de la page, ce qui fait que le texte passe dessous.

Hors moi je veux, que, quelque soit la taille de la page, le footer reste bien en bas de page et pas en bas de fenêtre.

J'ai essayé avec un container en relative le body en relative et le footer en absolute, mais ça ne fonctionne pas.

J'ai essayé avec un attribut de position mis à fixed, mais la même problème.

En relative n'en parlons pas, le footer ne se cale même pas sur le bas de la fenêtré.
Modifié par DR I (14 Nov 2010 - 14:49)

Fais une recherche sur "Sticky Footer".

Les solutions sont multiples.

Un exemple en français pour le pied de page:
http://covertprestige.info/css/page-hauteur-100/

Bon j'ai essayé le sticky footer, et... ça ne fonctionne pas non plus.

Le truc c'est que je ne sais pas pourquoi mais j'ai beau mettre un body height 100% celui-ci ne commence pas à 0x0 de l'ecran mais a 64x0, hors ce 64px, correspond au margin-top de mon menu de site.

Je remet le code sticky footer en ligne dès demain, et je vous fait signe, si une ame charitable veux bien regarder demain ça m'arrangerais parce que je vois vraiment plus quoi faire.

Merci.

Voila, j'ai remis le site en ligne avec les bons paramètres, pour le sticky footer, par contre, bah comme dit précédemment ça ne fonctionne pas

Pour j'ai essayer des myriades de combinaisons sans succès.

Et une URL d’accès

Unicore
Modifié par DR I (14 Nov 2010 - 14:48)

DR I a écrit :
Le truc c'est que je ne sais pas pourquoi mais j'ai beau mettre un body height 100% celui-ci ne commence pas à 0x0 de l'ecran mais a 64x0, hors ce 64px, correspond au margin-top de mon menu de site.

Ça ressemble fort à de la fusion des marges. À lire: La fusion des marges en CSS.
(J'en parlais déjà dans le tutoriel indiqué dans mon précédent message, d'ailleurs. )

Bon, après avoir vu la page il n'y apparemment pas de fusion des marges car pas de marges utilisées.
Par contre le positionnement des éléments est du grand n'importe quoi. Une utilisation abusive du positionnement relatif, erreur pas tout à fait classique mais qu'on voit parfois chez les débutants. À vue de nez la solution consiste à:
- refaire complètement le positionnement des éléments (sans utiliser position:relative pour décaler des éléments par rapport à leur position de départ);
- en partant sur de bonnes bases, donc en révisant d'abord le positionnement CSS, par exemple grâce à cet article et les articles liés: Guide de survie du positionnement CSS.

En ce qui concerne le placement du pied de page, la base est là mais:
- il ne faut pas utiliser de height:100% sur #container, uniquement le min-height:100% (on peut laisser tomber les subtilités pour IE6);
- le fait que le reste du contenu de #container est positionné en relatif et décalé par rapport à sa position normale met le bazar;
- attention à la fusion des marges entre le margin-bottom de #NewsPlayer et celui de #container (ah ben finalement en voilà de la fusion des marges!).