[Résolu] Design fluide en hauteur et png transparents

Bien le bonjour a tous,

J'ai un problème qui doit se résoudre assez simplement je pense, mais je n'arrive pas a mettre le doigt sur ce qui coince.

Je conçois un site, largeur fixe, étirable en hauteur selon le contenu. Jusque là, rien de bien excitant.

Seul impératif, le footer doit coller en bas de page, quel que soit le contenu.
J'ai parcouru la plupart des articles traitant de ce sujet, mais dans mon cas, je bloque.

Pour avoir une idée:
-le site:
http://nufits.free.fr/Test/index.html
-le CSS:
http://nufits.free.fr/Test/style.css

J'aimerais que la partie centrale (une image répétitive y de 1px de hauteur) descende jusqu'au footer même si le contenu est plus court.
J'ai essayé pas mal de chose avec des résultats plus ou moins probants, pour parvenir a ce que le div #center occupe le reste de l'espace disponible (#global (height:100%) - #header (height: 214px)

Quand je parviens enfin a faire descendre le #center jusqu'en bas, il me calcule les 100% à partir du bas du header donc je me retrouve avec 214px qui débordent de #global...

Quand à placer le header en tant qu' élément-enfant de #center, ça marcherait super si ce n'est que mon header est un .png transparent donc ...

Bref si quelqu'un a une idée, je suis preneur...

N'hésitez pas a me reposer des questions si j'ai été un peu brouillon dans mon explication, et merci d'avance pour le temps que vous allez (j'espère) me consacrer.


Il doit y avoir un point de grammaire que j'ai parcouru en diagonale, et je compte bien y remédier. Merci pour vos sages explications.
Modifié par bananamaker (13 Feb 2008 - 11:58)

Salut bananamaker ,

as-tu lu ce tutoriel : Page sur toute la hauteur de la fenêtre, avec pied de page en bas ?

A+

Bien entendu, c'est un des premiers que j'ai potassé

bananamaker a écrit :

Quand à placer le header en tant qu' élément-enfant de #center, ça marcherait super si ce n'est que mon header est un .png transparent donc ...

Ceci revient à avoir mon #global contenant l'image répétitive(ou #page dans l'exemple)
Le souci, c'est que du coup, le bloc contenant l'image répétitive passe derrière mon header, et que celui-ci est transparent, donc on voit la répétition démarrer en haut de page, et pas à partir du bas du header comme je le voudrais.

Au secouuurs Comment combler cet espace vide !!!



Modifié par bananamaker (11 Feb 2008 - 14:49)

Re',

es-tu bien sûr d'être sûr d'avoir bien potassé l'article ?

En particulier :

a écrit :
Étape n°3 : deux subtilités à prendre en compte
...
div#page #dernier-element {
padding-bottom: 4em;
}

Attention : la hauteur de ce padding devra être relative à la hauteur du pied de page ! Il s'agit donc de connaître à l'avance la hauteur de ce pied de page, soit dans une unité fixe (px), soit dans une unité variable (em) : c'est la seule restriction importante de la méthode que nous venons d'exposer.
Ce qui donne :

#centre {
...
     padding-bottom: 101px;
}

A pluche .

Ouhla voui, j'ai oublié de remettre le padding-bottom qui avait sauté après différents tâtonnements.

Bon, je vais reprendre avec deux exemples pour que le problème soit cerné.

1- Je reprends mot à mot l'exemple du tutoriel, en appliquant une image répétitive en hauteur au div#page...

Impecc, ca marche super au niveau de la fluidité en hauteur, quel que soit le contenu.
Seul (gros) bémol ... mon header étant transparent, on voit la répétition au travers.
Test comme l'exemple
le CSS

2- Si j'essaye de faire en sorte que la répétition verticale débute en dessous du header, en rajoutant à la suite un div#centre (min-height: 100%) avec le repeat-y.

-Contenu long: impecc' tout va bien...
Cool, ca marche!
le CSS

-Contenu court: le div#centre ne descend pas jusqu'au footer.
Pas cool, ca marche plus!
le CSS


Voila, j'espère que c'est plus clair ...

Hey ! Comment que ça va bien ?

En reprenant l'exemple 1, tu pourrais enlever le z-index:2 de #page et l'affecter à #header (il faudra pour cela le passer en position:relative).

Du coup il ne reste plus qu'à s'occuper de l'ombre grise qui déborde un peu de #bg (par exemple en alongeant un peu #header) ...

@+


Edit: en passant, l'image de ton header ne devrait pas être en background mais bien dans le code puisqu'elle porte une information (importante d'ailleurs). Pour plus d'infos, voir cet article : Mettre un titre en image et rester accessible.
Modifié par Heyoan (12 Feb 2008 - 21:07)

Bonsoir,

En gros, le problème c'est que:
- tu appliques le min-height: 100% à div#page;
- tu appliques l'image de fond répétée en hauteur à div#centre.

Or, div#centre ne fait que la hauteur de son propre contenu. Il n'y a aucune chance que div#centre prenne par magie la hauteur que tu voudrais lui donner, c'est à dire la hauteur de div#page moins celle de l'en-tête. Le min-height: 100% de div#content n'est pas appliqué car son parent (div#page) n'a pas de hauteur spécifiée (propriété height).

Bref: appliquer l'image de fond à div#page plutôt qu'à div#content si c'est gérable ainsi.

Heyoan a écrit :
Edit: en passant, l'image de ton header ne devrait pas être en background mais bien dans le code puisqu'elle porte une information (importante d'ailleurs). Pour plus d'infos, voir cet article : Mettre un titre en image et rester accessible.

Pour être précis, c'est la partie qui dit «Machin Truc - Photographe» qui devrait être dans le code HTML. Le reste peut rester comme image de fond.

Hello Florent ,

Florent V. a écrit :
Pour être précis, c'est la partie qui dit «Machin Truc - Photographe» qui devrait être dans le code HTML. Le reste peut rester comme image de fond.

Tu veux dire qu'il y aurait mieux à faire que quelque chose comme

<h1><img ... alt="Machin Truc - Photographe" /></h1>

?
Modifié par Heyoan (12 Feb 2008 - 21:40)

Non, ce code HTML est correct.

Ce que je veux dire, c'est qu'au niveau de l'intégration l'image insérée directement dans le code HTML ne sera pas la suivante:


(couleur de fond rajoutée pour export JPEG histoire que l'image soit moins lourde à poster sur le forum )

mais l'image suivante:



Et on aura en image de fond:



Ainsi, si on veut imprimer la page, on peut garder la partie «logo» à l'impression par exemple (ou la masquer via un display: none dans la feuille de styles pour l'impression. On peut modifier le logo sans changer l'image de fond, ou bien simplement le décaler de quelques pixels pour paufiner, etc.

Florent V. a écrit :
Bonsoir,

En gros, le problème c'est que:

div#centre ne fait que la hauteur de son propre contenu. Il n'y a aucune chance que div#centre prenne par magie la hauteur que tu voudrais lui donner, c'est à dire la hauteur de div#page moins celle de l'en-tête. Le min-height: 100% de div#content n'est pas appliqué car son parent (div#page) n'a pas de hauteur spécifiée (propriété height).

Bref: appliquer l'image de fond à div#page plutôt qu'à div#content si c'est gérable ainsi.

Merci Florent et Heyoan pour vos réponses rapides et concises, ça fait plaisir ...

Mais hélas, pas possible, car comme je l'ai montré
..::ici::.., si je fais ça, on voit la répétition au travers du header.

Bon, et bien cela veut donc dire que je n'ai aucune chance de garder mon footer en bas de page a coup sûr. Ou au risque de faire bugger le design sur les grosses résolutions d'écran.... (si j'ai bien compris ton message )

Quand à ton post précédent Florent, c'est vraiment pas bête comme idée, je n'y aurais pas pensé pour cette utilisation, mais ça me sera bien utile d'avoir le logo séparé par la suite ... merci.

M'enfin, si vous me trouvez une solution viable à mon problème, je suis toujours preneur

Florent V. a écrit :
Ainsi, si on veut imprimer la page, on peut garder la partie «logo» à l'impression par exemple (ou la masquer via un display: none dans la feuille de styles pour l'impression. On peut modifier le logo sans changer l'image de fond, ou bien simplement le décaler de quelques pixels pour paufiner, etc.

Ah oui d'accord ! Merci, merci !

bananamaker a écrit :
Bon, et bien cela veut donc dire que je n'ai aucune chance de garder mon footer en bas de page a coup sûr. Ou au risque de faire bugger le design sur les grosses résolutions d'écran.... (si j'ai bien compris ton message )

Je pense que Florent voulait parler de la solution qui consistait à rajouter un div #centre. As-tu essayé ce que je te proposais plus haut ?

Pour l'image de fond sur div#page, j'avais effectivement vu que le fond apparaitrait par dessous le header. Deux solutions possibles:
- faire un header opaque qui recouvre cette image de fond (à l'instar du pied de page)... la difficulté sera alors de faire que l'image de fond opaque du header soit raccord avec les rayures sur toute la largeur (à tester...);
- placer le bloc avec les rayures par-dessus div#page, et le header par dessus le bloc avec les rayures... ce qui demande de modifier un peu la structure HTML, de jouer pas mal sur le positionnement et les z-index... c'est jouable, mais compliqué.

Autres solutions:
- ne pas s'embêter pour ça et laisser div#content prendre la hauteur de son contenu (et donc avoir un pied de page qui remonte si besoin, pas de div#page en min-height: 100%, etc.);
- utiliser Javascript pour appliquer un min-height: Npx à div#centre, où N est calculé en Javascript (hauteur de body moins hauteur de l'en-tête et du pied de page).

J'opterais pour la dernière solution qui me semble la plus légère à mettre en place (on pourra par contre abandonner le min-height: 100% de div#page et le positionnement absolu du pied de page).

Florent V. a écrit :

Deux solutions possibles:
- faire un header opaque qui recouvre cette image de fond (à l'instar du pied de page)... la difficulté sera alors de faire que l'image de fond opaque du header soit raccord avec les rayures sur toute la largeur (à tester...);

Déjà testé et ... pfiouuu quelle misère! Lors d'un redimmensionnement de fenêtre, c'est ingérable, ca décale forcément les stripes (du moins dans le cadre des mes maigres compétences, je n'ai pas trouvé l'astuce, s'il y en a une.)
Par contre avantage non négligeable de cette méthode, je divise le poids de mon header par deux voire plus ...

Florent V. a écrit :

- placer le bloc avec les rayures par-dessus div#page, et le header par dessus le bloc avec les rayures... ce qui demande de modifier un peu la structure HTML, de jouer pas mal sur le positionnement et les z-index... c'est jouable, mais compliqué.

Ca rejoint un peu ta solution Heyoan. Effectivement ca devrait bien fonctionner, moyennant un peu de bidouillage.
Seul bémol, cela nécessiterait de rallonger encore mon header en hauteur pour couvrir l'ombre des rayures sur le #page.
Déjà que mon header est très lourd à mon goût ...
Ou alors raccourcir les rayures...
(D'ailleurs, à ce propos, question subsidiaire rapide. J'ai toujours considéré que, tout compris, une page ne devait pas excéder un poids de 100Ko, j'ai bon? )

Florent V. a écrit :

Autres solutions:
- ne pas s'embêter pour ça et laisser div#content prendre la hauteur de son contenu (et donc avoir un pied de page qui remonte si besoin, pas de div#page en min-height: 100%, etc.);

Ha non, ce serait reculer devant l'effort, et aller au plus facile sans avoir compris le pourquoi du comment ...

Florent V. a écrit :

- utiliser Javascript pour appliquer un min-height: Npx à div#centre, où N est calculé en Javascript (hauteur de body moins hauteur de l'en-tête et du pied de page).

Je vais potasser un peu à ce sujet et tester ça de suite. J'avais écarté cette solution pensant que ce serait très lourd à mettre en place, mais si tu me dis le contraire. J'y retourne...

Merci encore à tous les deux de m'ouvrir des pistes...

bananamaker a écrit :
J'ai toujours considéré que, tout compris, une page ne devait pas excéder un poids de 100Ko, j'ai bon? )

Le problème n'est pas le poids en lui-même, mais le fait que l'utilisateur puisse (ou non) l'anticiper, réduire celui-ci via ses choix/capacité côté client, aller en dernier ressort vers une version alternative.

bananamaker a écrit :



Ha non, ce serait reculer devant l'effort, et aller au plus facile sans avoir compris le pourquoi du comment ...

Si ce n'est que cela: ce type de design est actuellement une perte complète de temps et sur le fond une démarche à rebours de l'état de l'art (CSS). J'avoue avoir beaucoup de mal à voir l'ntérêt d'une telle dépense d'énergie

bananamaker a écrit :


Merci encore à tous les deux de m'ouvrir des pistes...

Parfois, il faut aussi savoir les refermer

bananamaker a écrit :
Déjà testé et ... pfiouuu quelle misère! Lors d'un redimmensionnement de fenêtre, c'est ingérable, ca décale forcément les stripes (du moins dans le cadre des mes maigres compétences, je n'ai pas trouvé l'astuce, s'il y en a une.)

Il faut centrer l'image de fond de div#bg (background-position: center top;). Ensuite tu affiches ton header en PNG par dessus, tu fais une capture d'écran du résultat (normalement propre), et tu exporte la partie qui t'intéresse (header) en JPEG qui va bien que tu pourras utiliser comme image de fond.

Si à la fois l'image de fond de div#bg (qui prend toute la largeur du viewport) et div#page sont centrés horizontalement, ça devrait être raccord... mais tu risques ponctuellement un décalage de 1px... il faut voir s'il apparait souvent et s'il est visible pour un visiteur lambda ou seulement perceptible pour l'oeil averti.

bananamaker a écrit :
(D'ailleurs, à ce propos, question subsidiaire rapide. J'ai toujours considéré que, tout compris, une page ne devait pas excéder un poids de 100Ko, j'ai bon? )

Chaque site est particulier. Un site qui s'adresse à peu de visiteurs, parmi un public que l'on sait bien équipé en haut débit, peut se permettre de viser plus haut, si c'est pertinent (besoins forts de communication visuelle...). Un site à fort trafic et très grand public essaiera de descendre plus bas.
Il n'y a donc pas de limite chiffrée de référence. Certains référentiels en donnent, par exemple Opquast qui propose 100Ko max pour la page d'accueil et 150Ko max pour les pages de contenu (sauf avertissement préalable du visiteur).

Florent V. a écrit :

Il faut centrer l'image de fond de div#bg (background-position: center top;). Ensuite tu affiches ton header en PNG par dessus, tu fais une capture d'écran du résultat (normalement propre), et tu exporte la partie qui t'intéresse (header) en JPEG qui va bien que tu pourras utiliser comme image de fond.

Je viens de tester la méthode -> Résultat final...

Un div inutile qui saute et plus de 40Ko gagnés.
re

Laurent Denis a écrit :

Si ce n'est que cela: ce type de design est actuellement une perte complète de temps et sur le fond une démarche à rebours de l'état de l'art (CSS). J'avoue avoir beaucoup de mal à voir l'ntérêt d'une telle dépense d'énergie

Hum, tu peux préciser ta pensée ? Parce que là, c'est limite vexant ... Je suis d'accord que c'est assez lourd et graphique mais bon ... c'est l'effet recherché
L'interêt d'une telle dépense d'énergie ? Absolument aucun ...
Mais quand on débute, on galère sur des trucs simples, et ça demande beaucoup de temps, d'énergie et de questions.

Elle n'aura pas été vaine néanmoins, puisque je repars d'ici avec une réponse claire et simple à mon problème qui maintenant est [Résolu]. Je ferme donc la piste ouverte

Bravo les gars et merci
Modifié par bananamaker (13 Feb 2008 - 13:53)

Bonjour,

Juste en passant...
Tu as un "léger" décallage de l'image background.png sous IE7:


Plus le traditionnel problème des png transparent sous IE6...

Bon courage.
Cdt,
Sylvain

6l20 a écrit :
Bonjour,

Juste en passant...
Tu as un "léger" décallage de l'image background.png sous IE7

Plus le traditionnel problème des png transparent sous IE6...

Hi hi, oui, t'en fait pas, c'est normal. Rien n'est encore fait pour la compatibilité entre navigateurs. J'ai juste attaquée la partie mise en page sous FF ...