28172 sujets

CSS et mise en forme, CSS3

Pub qui n'apparait que si width > 1024

Bonjour,

J'ai un site optimisé 1024 avec un contenu centré.

J'aimerais pouvoir joindre sur la droite (a coté du contenue générale) un bandeau de pub.

Mais je ne voudrais pas que ce bandeau vienne gêner un internaute naviguant en 1024.

Pour resumer j'aimerais que:
- si navigateur <= 1024
-> site = bandeau centré de 1024 de large
- Si navigateur > 1024
-> site = bandeau centré de 1200 avec bandeau de pub sur la droite.

Structure actuel du site:

<body>
<div id=contener> style: center +  width= 1024
        <div id=header></div>
        <div id=content></div>
        <div id=footer></div>
</div>
</body>


comment faire ?

Marge négative ?
Javascript ?

Merci.
Bonjour,

Pas sûre que tes calculs soient bon

a écrit :
Pour resumer j'aimerais que:
- si navigateur <= 1024
-> site = bandeau centré de 1024 de large
- Si navigateur > 1024
-> site = bandeau centré de 1200 avec bandeau de pub sur la droite.


Si l'écran du visiteur a une résolution de 1024 son viewport (zone d'affichage du site) n'aura pas 1024px de largeur. Ce viewport, si l'utilisateur navige en plein écran aura une dimention de 1024-barre de défilement (une trentaines de px). Ceci doit être pris en compte

Ce que je te conseille c'est de réaliser ton site avec une largeur fluide bornée. Le site aura donc une largeur en % associé à un max-width (bien sûr, le 100% de largeur devra correspondre au site + la pub).
bonjour et merci pour la réponse

En effet j'ai pris 1024 pour l'exemple mais dans les fait il fait 1006 de mémoire..

Mais je ne peux pas appliquer ton concepte puisque le site déja en place utilise les 1000 px de large pour son contenue. Je ne peut donc me positionné qu'en supplément pour la pub.
D'ou la nécessité de la faire "disparaitre" pour les résolution < à 1280
Salut,

Un div en relative par rapport à ton conteneur principal et un un z-index inférieur, le tout en float right.
Modifié par Grantome (25 Nov 2009 - 14:37)
Merci pour le lien grantome.

En faite ce n'etais pas vriament adapté à ma problématique.

Ma solution a été de mettre ce fameux div qui se masque en:
position: absolute;
z-index: -1;

Cela n'affecte absolument pas le reste du site.

testé sous
IE7
IE8
firefox
Safarie
Chrome

Merci a tous ceux qui ont répondu
Sujet clos
Aller à