28172 sujets

CSS et mise en forme, CSS3

Positionnement bloc

Bonsoir à tous,

Je dois réaliser une page html, avec au "milieu" tout un tas de photos, et à gauche je voudrais qu'il y ai une div semi-transparente, qui soit toujours fixée à gauche, mais qui par contre soit impacté par le scroll vertical.

Voici ce que j'ai fait pour l'instant :
http://test.atelier36.net/forum/3ans/

Tout fonctionne sauf la position verticale de mon div à gauche. Il est fixe quand je scrolle verticalement...
il y a moins d'avoir un div qui soit fixe horizontalement mais pas verticalement ?

C'est pour un truc totalement perso, hein, sinon vu mon niveau en html/css je n'aurais pas fait, vous vous en doutez... Smiley smile

Si quelqu'un peut m'aiguiller...

Merci d'avance,
David
Bonjour,

Si tu veux que ton bloc banner suive le scroll, il ne faut pas le fixer.
Tu peux simplement le faire flotter.

div.banner {
    background-color:#FFFFFF;
    float:left;
    height:1400px;
    margin:100px 0 0;
    opacity:0.8;
    width:150px;
}
Bonjour,

Merci pour la réponse, mais ça ne correspond pas à ce que je souhaite, je me suis sans doute mal exprimé, il faut dire que ça n'est pas très évident à expliquer par écrit...

Ce que j'aimerais, c'est que le div "banner" soit fixe horizontalement, c'est à dire que même si on scrolle horizontalement il soit toujours placé à gauche de la fenêtre, par dessus les photos.
Mais par contre je voudrais que verticalement il ne soit pas fixe, que si on scrolle verticalement il monte en même temps que les photos.
Il me faudrait un truc du genre :
position-x:fixed;
position-y:absolute;

Mais du coup en te reformulant mon souci ca m'a donné l'idée de faire une recherche google avec ces mots clés "position-x:fixed; position-y:absolute; et je suis tombé sur cette page, qui semble être ce que je cherche :
http://www.rickyh.co.uk/css-position-x-and-position-y/

J'essaye dans la journée de faire ça...

David
Autant pour moi, j'ai dû lire en diagonal ta demande qui était pourtant claire, je te rassure.

L'exemple proposé sur la page que tu cites correspond effectivement à ce que tu veux faire. A noter qu'il faut utiliser du javascript pour obtenir ce résultat.

En CSS uniquement, je ne sais pas si cela aurait été réalisable.
Sujet clos
Aller à