Div fixed mais transparent

gauksque · 11 Août 2010

Bonjour,

voici mon site: http://www.forumbatterie.com , j'aimerais que la pub de gauche soit fixée, donc qu'elle apparaisse tout le temps quand on descend la barre de défilement, j'ai ouï dire que ce code permettait cela:
<div style="position:fixed;background-color:#fff;">pub</div>

mais, quand je fais cela, le reste du contenu se place en dessous de la pub ? Comment faire pour résoudre ce problème ?

Robinson · 11 Août 2010

Colle lui un z-index

Netek · 11 Août 2010

Peux tu nous montrer ce que ça donne avec le position fixed ?
La comme ça je dirais d'essayer avec un margin-left sur le contenu du forum ...

gauksque · 11 Août 2010

et mettre le reste du forum dans une div de même z index alors ???

<div style="position:fixed;background-color:#fff;z-index:1;">Ceci est un test</div>
<div style="position:z-index:1;">reste du forum</div>

gauksque · 11 Août 2010

Netek a dit:
Peux tu nous montrer ce que ça donne avec le position fixed ?
La comme ça je dirais d'essayer avec un margin-left sur le contenu du forum ...

ça donne exactement ce qu'il faut sauf que la pub est transparente et on voit à travers le reste du forum qui empiète sur la colonne de la pub!

Netek · 11 Août 2010

euh ça sert a rien, de base ils ont le même z-index. Le z-index sert juste a définir qui est au dessus de l'autre.

Robinson · 11 Août 2010

lol, si je te dis de coller un z-index à ta pub, c'est pour éviter qu'ils soient sur le même ^^
Et par conséquent qu'ils n'aient pas d'influence l'un par rapport à l'autre

gauksque · 11 Août 2010

cela ne marche pas à cause du fait que ce sont des cases de tableaux !!!!

CARREZ · 11 Août 2010

Y'a plus simple comme méthode il me semble ... D'autant que position: fixed n'est pas interprété par IE6 (eh oui il en reste encore plus de 10% !).

Tu a 2 <td>, un à gauche avec la pub et l'autre à droite avec le contenu.

A priori il faut d'abord donner une largeur fixe ou en % à ton td de gauche (celui de la pub)

Ensuite dans le div que contient le td de droite tu met : <div style="overflow: auto; height: 100%; position: absolute;">

Ca va t'ajouter un ascenceur sur la div qui prendra 100% de l'écran en hauteur.

J'ai pas testé mais à mon avis tu dois pas être loin de ce que tu charche à faire avec ça.

gauksque · 11 Août 2010

excellente idée mais comment enlever l'autre ascenseur maintenant ???

CARREZ · 11 Août 2010

Avec body {overflow: hidden;} il devrait disparaitre ...

gauksque · 11 Août 2010

je ne vois pas très bien où est ce body ? Pourrais tu me montrer dans le code ?

CARREZ · 11 Août 2010

Dans ton code :

Code:

...
</head>
<body id="phpbb" class="section-index ltr">
<!-- enlever tout ce qui suit pour enlever la grande pub de gauche-->
...

Le body c'est ce qui contient tout le contenu, juste après head qui contient les éléments non visibles.

Je ne connais la structure de fichiers phpBB mais tu dois avoir un fichier de template qui apelle tout le reste dans lequel tu trouvera le body.
Tu lui ajoute l'overflow :
<body id="phpbb" class="section-index ltr" style="overflow:hidden;">

cedric_g · 11 Août 2010

Bonjour

Pourquoi ne pas utiliser plutôt un "position:absolute" avec des attributs "top" et "left" renseignés ? C'est BEAUCOUP plus simple non ?

gauksque · 11 Août 2010

merci bcp ! ... J'ai encore un prob mais celui là est dû à phpbb

CARREZ · 11 Août 2010

cedric_g a dit:
Bonjour

Pourquoi ne pas utiliser plutôt un "position:absolute" avec des attributs "top" et "left" renseignés ? C'est BEAUCOUP plus simple non ?

Ben non ça ne réponds pas à la question d'avoir toujours visible la colonne de gauche, la position absolute positionne un élément fixe mais dans le flux du html, pas dans l'écran.

cedric_g · 11 Août 2010

Moui certes, mais je n'ai pas dit qu'il fallait pas modifier autre chose

Disons que le position:absolute est cross browser, c'est pourquoi je l'avais proposé.

Sinon : JQuery ! Rapide, efficace, aucune modif du code nécessaire

(il y a pléthore d'exemples sur le web) ; je l'utilise de plus en plus pour les trucs tordus.