Problème css Habillage Background

ivoyages · 21 Mars 2013

Bonjour,

Je dois réaliser un habillage publicitaire cliquable en background qui vienne autour du contenu de notre site à l'image de http://www.allocine.fr.

J'ai trois problèmes sur ce que j'ai déjà réalisé :

1) l'habillage se superpose à une partie du contenu (colonne droite et gauche)
2) comment gérer la hauteur de l'habillage pour qu'elle s'adapte automatiquement au contenu
3) l'affichage sur tablette et smartphone est rogné à gauche (logo et le slogan de l'annonceur).

Voici les bouts de code :

fichier css :

Code:

/***********************************/
 /* lien sur publicité géante */
#page {
width: 1903px;
/* × 929 */
/*height:auto;
margin: 0 auto;*/
left:50%;
top:0;
;
position: relative;
background:transparent;
height:auto;
/height:10606px;
height /*\**/: 10508px\9
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
#page {
height:10596px;
}
}


#container {
position:absolute;
width:995px;
background:transparent;
    height:auto;
top:175px;             /* HAUTEUR DE LA BAN */
;
left:50%;
}
/****************************************/

Template :

Code:

<!-- Habillage -->
<div id="page">
<div class="ads_323330395f333531395f3131393934"><script type="text/javascript">
        var rdads=new String(Math.random()).substring (2, 11);
        document.write('<sc'+'ript type="text/javascript" src="http://server1.affiz...b&rdads= rdads "></sc+ript>');
        </script></div>
</div>
<div id="container">
<!-- Habillage -->

Je suis preneur de vos idées pour corriger ces problème d'affichage

Ah, j'oubliais, vous pouvez voir le problème à la page Vous pouvez voir un rendu visuel à la page : h**p://w*w.i-trekkings.net/dossiers/index_auvergne.php

Greg

zeb · 21 Mars 2013

truc simple pour pas se prendre la tête :
1/ dans ton template html tu met un lien au dessus de tout (donc en premier dans le code sous le <body>) et qui ponte vers ta cible publicitaire.
2/ pour le CSS tu lui attribue un height / width 100% (fixed pour pas que ça scroll) tout en définissant un background-image qui est ton image de pub (centré et en haut).
3/ tu fixe le z-index de ce lien assez bas et la <div> qui comprend le contenu de ta page un cran au dessus (donc le lien se positionne sous le contenu)
4/ tu fixe la couleur de background des blocs qui laisse voir l'image (faut pas de transparence sur la page)

ivoyages · 26 Mars 2013

J'ai réglé les problèmes 1 et 2 mais pas l'habillage sur Tablette et Smartphone. Je suis preneur de vos idées.