28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je dispose de trois div (rouge, jaune, bleu) à hauteur variable, l'un au dessus de l'autre. Attention, je ne dit pas l'un sur l'autre, mais bien l 'un au dessus de l'autre. C'est-à-dire la façon dont ils se posent par défaut.
Je voudrais que le bloc bleu (dont je ne connais pas la hauteur), se mette au dessus du premier bloc (le rouge).

Il y a bien la technique de mettre un div englobant les trois, en relative, et placer le bleu en absolute, top et left à zero. Mais, comme je ne connais pas la hauteur de mon bleu, je ne peux décaler le rouge pour qu'il laisse la place au bleu.

J'en viens à me demander si c'est possible ??

Je fais ceci, parce que j'ai un dossier qui contient des pages de plus de 5000 mots. Malgré tout, ces pages ne sont pas bien référencée, or elles existent depuis plus d'un an et sont à mes yeux de bonne qualités. Dernièrement, j'ai appris que google tenait compte principalement des mots utilisés au dessus de la ligne de flottaison. Or, mon contenu étant très long, j'ai mis au dessus cette ligne des infos très rapide, futile et illustré par des tableau / colonne pour permettre au plus pressé d'accéder à leur réponse sans avoir à lire.

Donc je voudrais placer ces tableaux tout en bas dans le code source, mais laisser visible en début de page pour les internautes. Comme ça tout le monde est content. Seul problème, je ne connais pas la hauteur de ces tableaux / images. Je pourrais m'arranger, mais de toute façon le responsive posera le même problème.

Ma question est donc : est-il possible de réordonner les div ?
Merci d'avance Smiley biggrin
D'accord, je lis, j’éditerais ce message par la suite. Merci

Edit : Merci, c'est tout simplement génial.
C'est exactement ce qu'il me fallait !! Je ne comprend pas que je n'en ai jamais eu connaissance avant et surtout qu'on n'en entend jamais parlé. Pourtant il répond à de nombreux problèmes !!

Par contre, c'est vrai qu'il n'est pas supporté par IE8 et 9, or ceci représente tout de même 20% de mon trafic (héé oui Smiley sweatdrop ).

Je n'ai pas trouvé d'autres alternative en css. S'il existe d'autres solution je suis preneuse; En tout cas, Flexbox, pour ceux qui ne connaissent pas encore, lisez vite !
Modifié par J_B (11 Jun 2015 - 18:19)