Super position de div

[naphore]

Bonjour tout le monde,

Je vous sollicite car je voudrais savoir si vous pouviez m'aider à régler mon problème.

Voici ce que je voudrais faire :

/>http://imageshack.us/photo/my-images/401/exemplef.jpg/

je voudrais donc superposer les carrées.

Le rectangle noir doit s'étendre à toute la première moitié de la page

Le rouge bordeaux doit s'étendre à la dernière moitié de la page

Le rectangle jaune se superposerait sur les deux.

Le rectangle bleu doit s'étendre également à toute la page.

Et enfin, un carré vert se superposerait sur les trois autres carrés.

Mais je vous avoue que je n'arrive pas à le faire. Sauriez-vous comment faire en CSS valide?

Ou alors, si vous avez une autre méthode, je suis preneur.

Mercii bien

[Ernestine]

Bonsoir,

Il y a des dizaines de façons de faire ça, tout dépend à quoi vont servir les différents blocs.

A priori comme ça, à première vue, il s'agit d'un design sur trois colonnes. Dans ce cas, plutôt que de faire un bloc jaune qui vient par dessus les deux autres, il vaut mieux faire le bloc noir en float:left, le bloc bordeaux en float:right, et le bloc jaune en normal, de manière à ce qu'il se situe naturellement entre (et non pas sur) les deux autres blocs.

Quant au bloc vert, vue sa position, le plus simple serait sans doute de le positionner en absolute.

Et pour le bloc bleu ciel, rien de particulier.

Le plus compliqué avec des designs sur plusieurs colonnes, c'est de s'arranger pour que l'ensemble des blocs descende bien jusqu'en bas de page, ou du moins donne l'illusion de descendre jusqu'en bas de page. S'ils sont de hauteur variable, ça ne se fait pas naturellement, il faut ruser (il y a plusieurs façons pour le faire).

Tu peux déjà commencer par lire ce tutoriel : http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html

[SStephane]

Pour les "lignes" de carrés, ceux qui vont le plus à droite (ie les rouges) contiennent les autres (position relative, width 100%, height ce que tu veux).

Ceux qui sont dedans sont en float ou ce que tu veux pour les faire tenir comme ça.

Pour le vert, position:absolute et tu joues sur le margin pour le bouger (d'ou le position relative des container, sinon ça ne fonctionnera pas), d'après moi, c'est le plus simple et le plus portable car tu pourras faire n'importe quoi après, et ça passera partout.

[naphore]

merci pour la rapidité de votre réponse.

en fait, tout mon problème vient du fait que le rectangle noir et bordeaux doivent être extensibles à l'infini tandis que le blog jaune doit faire 1024px.

Si tout était fait en pixels, tout irait bien.

Ca bug donc quand on change de résolution car la longueur du noir et du bordeaux doivent s'adapter à la largeur de la page, contrairement au bloc jaune.

Le lien vers Alsacreations est parfait mais il explique que lorsque tout est en pixels

[SStephane]

Dans ce cas même commentaire que précédemment sauf que là ou tu as des blocs jaunes, ce sont eux qui contiennent les autres et ça fonctionne aussi.

pour les autres, tu peux faire 2 float (left et right) et c'est tout.

[Ernestine]

Mettre les blocs noir et bordeaux en float left et right ne marchera pas puisqu'ils doivent s'étendre à l'infini selon la largeur de l'écran.

Cela dit, pas la peine de considérer "l'infini" en largeur d'écran : rares sont les écrans de plus de 1900 pixels, on peut donc se baser sur cette dimension (voire un peu plus pour être tranquille) pour tout ce qui est élément décoratif style image de background.

D'après ce que je comprends, tes blocs noir et bordeaux sont purement décoratifs : tout le contenu sera dans le bloc jaune. Dans ce cas, plutôt que de multiplier les divs, tu pourrais te contenter de faire un seul div jaune. Et pour le style du body tu mettrais :

body {
background: url(body.jpg) center top repeat-y;
}

Où body.jpg serait une image de 1900 pixels de large et 1 pixel de haut, noir dans sa moitié gauche et bordeaux dans sa moitié droite. Ainsi, en une seule ligne, tu recrées l'illusion de tes deux blocs de gauche et de droite. Et à partir de là il devient facile de mettre le bloc jaune (avec un margin: auto; et une largeur fixe pour le centrer), le bleu et le vert.

Ceci n'est évidemment qu'un exemple à adapter. Et puis, comme dit précédemment, il y a des milliers de façons de résoudre ton problème. Je suppose que les deux colonnes noir et bordeaux ne contiendront pas une seule couleur, qu'il y aura des "éléments décoratifs" à l'intérieur, style bas de colonne, dégradés, arrondis, etc... Mais de façon générale, essaie vraiment de minimiser le nombre de blocs.

Si tu nous montrais la maquette finale, ce serait plus facile de t'aiguiller, car sans savoir si les différents blocs contiennent des éléments, ou sont là juste pour décorer, ou s'ils ont des coins arrondis en bas, etc, tous ces détails, difficile de dire quelle est la meilleure solution.

[naphore]

Bonjour,

Merciiiiii bcp pour vos réponses! j'y suis finalement arrivé bien que niveau optimisation poids/qualité, ça ne soit pas top mais qu'importe, ce n'est pas très grave !!

Merci à chacun de vous pour vos réponses très éclairantes!

Pour ceux qui rencontrerait le meme problème, la dernière solution de Ernestine marche super!

PS : très beau nom ernestine