[Résolu] - Finaliser mon site

(reprise du message précédent)

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!).

Florent V. a écrit :
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);

Ok c'est noté, je vais passer le logo et le menu en absolute.

Florent V. a écrit :

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;

Le truc c'est que si je ne fait pas ça, je n'ai pas de placement correct du contenu. Je suis obliger de placer le contenu en fonction du dernier flux superieur, donc le menu.
Sinon, je fait comment pour placer mon contenu sans margin??

Florent V. a écrit :

- 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!).

Ok noté, je vais regarder ça.

Bien, tout fonctionne maintenant, le truc c'etait en effet le positionnement du menu qui était pas bon.

Donc, je viens de bien capter le coup des positionnement des flux, c'est plus clair.

Peux tu juste jeter un oeil au code, pour moi c'est bon maintenant.

Testé sur les navigateur suivants:

IE7/8
Firefox3/4
Chrome
Safari
Opera

Ça fonctionne niquel, merci de ton aide et de ta patience.

Si tu as des conseil de dernière minute, n'hésite pas, je prend.

Bon ben il reste deux grosses erreurs.

1. Tu ne bloques pas la fusion des marges entre le contenu principal et #container. Rajoutes un background:red à #container et tu verras qu'il commence au même niveau que le contenu principal. C'est que le margin-top du contenu principal est «transmis» à #container. C'est ça, la fusion des marges (c'est parfois un peu prise de tête mais c'est aussi très cool).

2. Ton pied de page n'est pas positionné par rapport à #container. Donc en fait ton implémentation de «sticky footer» ne marche pas du tout, ce que tu peux constater si tu réduis le contenu principal à un simple paragraphe. Et comment fait-on pour positionner un élément en absolu par rapport à un ancêtre précis? ...

Détails:

- Des classes "FloatLeft" et "FloatRight" sur les items de menu c'est quand même très crade. Si tu as une classe "main" et une classe "extra", ou une classe "group1" et une classe "group2", tu peux ensuite modifier le CSS pour avoir une disposition différente. Avec un nom comme "FloatRight", c'est un coup à avoir un contenu aligné à gauche mais toujours appelé "FloatRight" à la première modification des styles CSS.
Alternativement, si ce sont deux groupes différents de liens tu peux avoir deux listes différentes dans le code HTML.

- Le width:100% sur #container est inutile. Les éléments en display:block prennent déjà toute la largeur disponible (hors cas particulier tels qu'utilisation de float, de position:absolute ou position:fixed...), et garder un width:auto (valeur par défaut) est généralement plus souple qu'utiliser un width:100%. Les width:100%, quand c'est pas strictement nécessaire eh bien c'est le mal.

- Organiser ton code CSS dans plusieurs fichiers, c'est bien. Par contre, pour un site web en production il faut concaténer ces fichiers entre eux et n'appeler qu'un seul fichier CSS global, pour réduire le nombre de requêtes HTTP et ainsi accélérer l'affichage de la page. Si tu as peu de styles CSS (moins de 500 lignes), tu peux aussi tout gérer dans un seul fichier, en l'organisant un peu avec des commentaires pour indiquer les différentes parties. J'aime bien cette convention d'écriture mais on fait ce qu'on veut:

/* =========================
   STYLES POUR NOMDUSITE.COM
   Copyright Machin Truc
   ========================= */


/* --- STYLES GÉNÉRIQUES --- */

body {
  ...
}
h1, h2, h3 {
  ...
}
p {
  ...
}
a {
  ...
}


/* --- STRUCTURE GLOBALE --- */

/* Page */
...

/* Header */
...

/* Navigation */
...

/* Conteneur principal */
...

/* Pied de page */
#footer {
  ...
}
#footer .txt {
  ...
}


/* --- MODULES DE CONTENU --- */

/* Module 1: news, extraits, etc. */
.module1 {}
.module1 .intro {}
.module1 .item {}
.module1 .itemtitle {}

/* Module 2: ... */

OK, donc j'ai bien lu, tes liens (sympas d'ailleurs) et j'ai fait de petites recherches.

J'ai trouvé un sticky footer qui marche pas mal, qui est le suivant:

http://www.cssstickyfooter.com/using-sticky-footer-code.html

Par contre, je vois un truc comme suit dans leur code:

div#Footer{
	bottom:0px;
	width:100%;
	min-width:526px;
	border-radius: 8px 8px 0px 0px;
	height:64px;
	[#red]margin-top:-72px;[/#]
	background-color:#2c3d8b;
	clear:both;
	position:relative;
}

hors, si je ne me trompe pas dans tes tutos tu dit que ce genre d’écriture est "une erreur".

Pourrais-tu me dire si dans le cas d'un sticky footer c'est correct ou bien si c'est toléré, car c'est une des seuls façons de faire?

DR I a écrit :
hors, si je ne me trompe pas dans tes tutos tu dit que ce genre d’écriture est "une erreur".

Je dis en fait qu'utiliser le positionnement relatif + une ou plusieurs des propriétés top, right, bottom et left avec une valeur importante est une erreur. Bien sûr, comme tout jugement sur une technique, c'est vrai dans 99% des cas et pas dans le 1% restant.

Pour cette technique:
- Ça ne correspond pas à ce cas de figure: on n'utilise pas top ou bottom, la déclaration d'un position:relative me semble parfaitement inutile.
- La technique repose sur un pied de page en dehors du bloc en min-height:100%, pied de page qu'on remonte grâce à une marge négative. C'est une solution possible, pas spécialement meilleure que l'utilisation du positionnement absolu pour placer le pied de page.
- Le correctif proposé pour Opera est obsolète. Le correctif pour IE6 est obsolète si on n'assure plus le support d'IE6 (ou si on accepte que dans IE6 le pied de page ne soit pas tout en bas dans certains cas de figure... principe de dégradation gracieuse). Le correctif pour IE8 me semble inutile vu qu'IE8 a un bon support de CSS 2.1.

Au sujet de l'utilisation des marges négatives, c'est parfois utile mais à utiliser avec modération.

Bon, je viens de tester ce tutoriel, en effet ça fonctionne impeccable par contre, je suis obliger de le mettre en relative sinon ça ne passe pas, et le footer se met bien en plein milieu de page.

De plus, il est nécessaire de mettre un padding-bottom égale à la taille du footer afin que dans tous les cas le flux pousse le footer.

Donc, résultat des courses, je vais plutôt utiliser celui de ton lien qui me semble plus propre.

Pour ce qui est de la mise en page, j'ai bien noté tes conseil et je vais virer les position:xxx quand il ne sont pas absolument nécessaires.

Bref, je teste encore un peu et je met la page à jour en ligne, puis aprés validation, je fermerais le topic.

Un grand merci à vous par avance