Les hauteurs

Hello, alors voilà moi j'ai un problème avec les hauteurs pour les blocs
en général ma structure de site et un peu près la même c'est à dire, un premier bloc global, puis un header, un bloc contenu qui contient un flottant a gauche et a droite puis un footer
mais voilà lorsque vous avec des background-image qui se répète dans les deux flottantes comment faites-vous pour harmoniser la hauteur des deux flottantes
stipulez-vous des hauteurs en % en px ??
Modifié par Turbobusa (19 Jun 2007 - 16:32)

Ton schéma est très... "schématique".
Quoiqu'il en soit, une manière simple d'uniformiser visuellement la hauteur de deux blocs est d'utiliser la méthode dite des colonnes factices.

J'ai déjà lus mais en toute honnêteté je n'y comprends pas grand chose
Eux parles de mettre un background dans le body, je veux pas vraiment ça en faite car dans mon body j'ai déjà un background-image qui se répète à l'infini (image de 1px/1 pratiquement)
chaque bloc flottants à un background qui doit se répèter jusqu'au bas de la page quelque soit la résolution de l'écran :s
une idée ? apparemment depuis un temps je remarque que les hauteurs en % sont très mal gérés par nos browsers

Au passage, il existe aussi des solutions javascript, tel que ce plugin jQuery.

Pas mal pas mal...

sinon petit sondage, vous lorsque vous créer un site Web vous définissez des hauteurs ou pas du tout ?

Les colonnes factices peuvent très bien s'appliquer à un autre élément que le body. Par exemple un <div id="global"> qui encadre tes deux divs flottants. Attention au passage aux dépassements de flottant (voir la FAQ à ce sujet).

Et sinon à quoi sert ton image de 1px/1 dans ton body? Tu n'a pas meilleur temps avec une couleur de fond? Et on privilégie généralement quand c'est possible pour les répétitions des images de 8 ou 16px de long et de large.


EDIT: Pour les hauteurs, laissons cette contrainte aux imprimeurs. Puisqu'on a la chance d'avoir un media qui s'étend à volonté.
Modifié par <nicolas> (19 Jun 2007 - 17:08)

non c'est pas seulement un background de couleur mais y'a un effet pointillé, j'ai dis 1/1px mais je sais plus de tete ca doit peut-être 5/5 je sais plus...
bref mais tu dis alors de faire comment avec mon global, dans le global j'ai mon header qui est une image puis un bloc de contenu contenant deux flottants (gauche droite étant le menu)
les deux flottants ont des background-image respectifs, qui devraient se répéter et prendre toute la hauteur disponible à l'écran et laisser le reste du bas au footer...
simplement voilà j'ai essayé des % marche pas vraiment, de plus le min-height est pas gérer par IE 6.0, d'ailleurs j'ai du faire une autre feuille CSS pour ce joli browser
pour l'instant les hauteurs se font par rapport au contenu, tel que le menu de droite peut-être plus grand que le contenu suivant les pages, et mon footer reste bien tout en bas ça c'est bon

Comme expliqué dans le tutoriel, le truc des colonnes factices est basé sur une illusion. Le but est de donner l'impression que les div vont jusqu'en bas alors qu'ils se limitent à leur contenu (d'où le "factice").

Pour y arriver, il faut un div qui englobe juste les 2 divs flottants. J'ai proposé global comme id mais si tu l'as déjà utilisé tu peux prendre n'importe quoi d'autre. Et à ce div, tu donne un background réunissant tes deux anciens backgrounds. Du coup le plus grand des deux div va pousser celui-là et du coup pousser les 2 backgrounds (qui ne forment en réalité plus qu'un).

J'espère que j'ai été assez clair. Sinon relis le tutoriel c'est sûrement mieux expliqué. Et n'oublie pas de lire celui sur le dépassement de flottants sinon tes deux divs flottants vont sortir du flux et ne pourront pas pousser ton background.
Modifié par <nicolas> (19 Jun 2007 - 17:28)

AAAAAAAAAAAAAAAAAAAAAAAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

J'ai ENFIN COMPRIS!!!!
Merci nico, comme quoi des fois expliquez avec ses propre mots
Enfin bon, pour mon site que je monte actuellement j'ai deja fait d'une manière je pense pas rechanger tout, mais à l'avenir je connaitrais cette petite astuce bien utile

mais quand meme avouez que les hauteurs ne sont vraiment pas aussi bien prit charge que celà sur le web... les largeus j'ai jamais de pb, toujours en % ou fixe (px)

Je crois pas que ce sont les hauteurs qui sont mal prises en charge. Je crois plutôt que ça vient des habitudes prises avec le media imprimé d'une part (hauteur fixe, volonté de tout contrôler) et de la mise en page en tableaux d'autre part (dépendance des hauteurs de cellules les une par rapport aux autres, centrage vertical).

Dans ton cas par exemple, ta 2e div flottant ne peut pas deviner la hauteur de sa voisine, puisqu'elles sont complétement indépendantes. C'est pour ça qu'il faut créer un cadre qui englobe le tout.

reste que le problème subsiste un peu, genre si j'ai un bloc contenu qui englobe deux flottantes, comme dire au bloc contenu qu'il doit prendre le restant de la page jusqu'au footer ? % ?

Turbobusa a écrit :
comme dire au bloc contenu qu'il doit prendre le restant de la page jusqu'au footer ? % ?

Le problème, c'est que des notions comme « la hauteur de la page » ou « la hauteur restante avant un élément » n'existent pas en CSS. Le concept de « hauteur » lui-même est assez fluctuant.

Mais peut-être voudras-tu jeter un oeil à ceci :
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html
(Avec un peu d'imagination, tu devrais trouver quelque chose qui correspond à ce que tu souhaites.)

C'est dommage que souvent à cause de X ou Y raisons sur le Web on est obliger de recourir à des sortes de raccolages non ? Qu'en pensez-vous ?
Pourquoi on ne peut tout simplement pas par exemple dire que tel bloc fait 100% et qu'il s'étendrai le plus possible sur la page

peut-être parce que, sur le media screen, la fenêtre du navigateur n'est justement qu'une fenêtre qu'on promène sur un contenu dessiné, lui, sur un canevas non limité. Contrairement à la démarche spontanée, ce n'est pas le contenu qui défile. C'est la fenêtre.

oui mais au niveau des largeurs pourquoi il y'aurait une préférence alors ?
Les largeurs sont bien mieux gérer pas besoin de rafistolages

Parce que le flux est avant tout vertical, peut-être. Et que, s'i faut faut bien le canaliser, ça ne peut pas être dans les deux dimensions à la fois. Contrairement à un imprimé paginé, le contenu screen non paginé a besoin d'une dimension en quelque-sorte libre.

quand je vois certaines astuces ça m'évoque quand même un peu le rafistolage non ?
Genre le html,body à 100% puis le global à min-height:100%; puis encore un commentaire conditionnel pour notre ami IE6.0 avec height:100%;
:/

Turbobusa a écrit :
quand je vois certaines astuces ça m'évoque quand même un peu le rafistolage non ?

Complètement.

Sur le fond, c'est ce qu'on appelle le Web Minitel. C'est un genre, mais surtout une démarche erronée.

toi personnellement tu construis comment tes pages, aucune hauteur spécifiées ? J'essaierai prochainement l'astuce des colonnes factices que je trouve la moins "bricolage"

aucune hauteur, en effet, sauf localement pour des contenus spécifiques et prévisibles (typiquement, un header par exemple).

L'astuce des colonnes factices est une astuce, certes; Mais le fait que tout se passe uniquement via de simples images de background fait qu'elle est totalement inoffensive. Et même assez élégante, en fait. peut-être bien l'astuce la plus robuste et la plus élégante de ces dernières années, tiens...