[résolu] Si bannière Pub, décaler tous les éléments inférieurs

Hello à tous,

Alors voila mon interrogation : J'ai une mise en page avec un bloc général et des blocs en position absolu avec un z-index supérieur afin d'être positionnés au pixel près au dessus du bloc principal.

Ensuite, je dois avec une bannière publicitaire prenant toute la largeur de la page placée en dessus du bloc principal. Cette bannière n'est pas tout le temps présente. Quand elle l'est, le bloc principal doit se décaler vers le bas, et sinon, se coller en haut. Le problème, j'imagine, se situe au niveau du logo positionné en fixe par dessus le bloc principal. Comment le placer au dessus du bloc, de manière à ce qu'il reste à la même place quand il doit se décaler.

Voici un petit croquis du problème, pour imager tout ça.

http://img517.imageshack.us/img517/2702/question0uz.gif
Modifié par dew (31 Aug 2010 - 11:03)

On pourrait imaginer une solution à l'aide du sélecteur +, mais je ne crois pas ça fonctionne sous I.E..

Sinon, c'est Javascript ou abandonner le position: absolute.

Javascript ? C'est à dire ? Il faudrait abaisser le "point 0" de l'affichage de la page, et y insérer la bannière ?
Modifié par dew (31 Aug 2010 - 11:03)

Personne n'a d'idée ? Autre question, en position relative, est-ce que je pourrai placer mon logo dans un conteneur, au dessus, tout en le faisant déborder sur le haut ?
Modifié par dew (31 Aug 2010 - 11:03)

Bonjour,

Pour gérer la position verticale d'une position absolue relativement au flux qui précède, voir http://test.blog-and-blues.org/absolute_flux/

On ne peut pas répondre à ta question tant que l'on ne dispose pas de l'ordre de déclaration des éléments dont tu parles et donc de leur situation dans le flux hors positionnement css.

dit autrement : arrétez de poser des question de css comme s'il n'y avait pas de code html auquel cette css s'applique bon dieu
Modifié par clb56 (06 Feb 2006 - 09:39)

Malheureusement, la question ne pouvait être posé que dans ce sens...

C'est un problème lié à css avant tout. Après, je peux balancer mon code html et mes styles, mais ça n'aide pas à répondre à la question.

Salut,
Tu peux mettre simplement le bloc principal en "position: relative;", et le logo (placé à l'intérieur du bloc principal dans le html) en "position: absolute;". Puis tu règles pour le distance de la gauche, et une valeur négative pour le haut. Pas besoin de z-index.

Comme le bloc principal est en relatif, il sera forcément poussé (et donc le logo aussi, puisque positionné d'après ce dernier) si tu mets la bannière au dessus, et il remontera sans la bannière pub.

#principal {
	position: relative;	
	background: blue;
	height: 400px;
	width: 500px;

}
#logo {
	position: absolute;
	height: 50px;
	width: 100px;
	left: 50px;
	top: -25px;
	background: red;
}

<div id="principal">
	<div id="logo"></div>
</div>

Modifié par Alan (06 Feb 2006 - 13:25)

Sinon, pour ce qui est de la solution javascript (qui n'est pas fiable), tu fait un if (getElementById(pub)) ajuster la marge haute du reste...

DVWB2 a écrit :
Malheureusement, la question ne pouvait être posé que dans ce sens...

Non la question doit toujours être posée dans le sens inverse. D'abord le html après et en fonction de... ... le css.

Est ce que tu te rends compte qu'au vu des indications que tu donnes on ne sait même pas si ta bannière de pub est avant ou après le contenu dans le document html lui même.

PS : sans relativiser en rien la solution d'Alan qui est très bonne
Modifié par dew (31 Aug 2010 - 11:03)

Merci pour les réponses. Je vais me la jouer valeur négative.

Sinon, au niveau HTML, ma bannière sera placée avant le conteneur principal.