Bannière droite >>> problème de positionnement

Bonjour,

Je souhaite ajouter une bannière verticale sur la droite de mon site.

Je l'ai intégrée avec le code suivant :

<div id="banner">
<img style="position: absolute; top: 110px; left: 1350px;" src="/banner-right.jpg">
</div>

Elle s'affiche correctement à l'écran mais lorsque je redimensionne ma fenêtre, la bannière change de position.

Et donc, lorsqu'un internaute arrive sur le site avec une résolution d'écran différente de la mienne (1680x1050), la bannière bouge sur la droite et une scrollbar apparaît !

Quelqu'un aurait-il une idée ?

D'avance, merci

C'est parce qu'un objet positionné en absolu a une position fixe à l'intérieur de son conteneur parent positionné le plus proche.

Dans ton cas, ton image ne doit pas être contenu dans un conteneur lui même positionné, alors elle se positionne de manière fixe simplement.

Pour résoudre la solution, tu pourrais tout mettre dans un <div> global englobant toute la zone du site, positionné en relatif (position: relative;). Dès lors, ton img en absolu dépendra du format de ce blog là précisément.


Mais franchement, pour un logo sur le côté, tu devrais pouvoir t'en sortir avec moins de problèmes en utilisant la propriété float afin d'organiser le tout en colonnes.

Bonjour Vaxilart et merci pour ton explication.

Je vais essayer avec un div supplémentaire et une position en relatif.

Mais pourrais-tu m'en dire un peu plus sur la position float ?

Merci et bonne journée.

Salut Vaxilart,

Je viens de tester avec un div supplémentaire et une position en relatif.

Et rien ne change : la bannière s'affiche correctement en plein écran mais lorsque je redimensionne ma fenêtre, elle change de position.

Voici le code que j'ai utilisé :

<div style="position:relative">
<div id="banner">
<img style="position: absolute; top: 110px; left: 1350px;" src="/banner-right.jpg">
</div>
</div>

Qu'en penses-tu ?

Salut,

Un peu d'aide sur le positionnement : Guide de survie du positionnement CSS

J'ai donc, suite à un peu de lecture (Merci pour ce guide Mikachu), résolu le problème de "bannière s'affiche correctement en plein écran mais lorsque je redimensionne ma fenêtre, elle change de position".

Mais je me retrouve maintenant avec un souci de navigateur.

Tout est nickel avec Firefox, mais avec IE ou Chrome, ça coince !

Un hack possible ou mieux ?