Problème css Habillage

[ivoyages]

Bonjour,

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

J'ai trois soucis sur le travail avancé :

1) l'habillage se superpose à une partie du contenu

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 :

/***********************************/

 /* 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%;

}



/****************************************/

dans le template :

<!-- 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.net/tracking/ads_display.php?n=323330395f333531395f3131393934_beb0a38f9b&rdads=+rdads+"></sc+ript>');

</script></div>

</div>

<div id="container">

<!-- Habillage -->

Vous pouvez voir un rendu visuel à la page : h**p://w*w.i-trekkings.net/dossiers/index_auvergne.php

Voilà, si vous avez des pistes, des idées, je suis preneur

[Ernestine]

Salut,

Sur le site que tu montres en exemple (aufeminin.com), l'habillage publicitaire n'est autre qu'une grosse image placée en background du body, l'image est : http://www.aufeminin.com/clients/skin/milka-03-13/fond.jpg

Partant de là, ils ont englobé leur bloc principal (de largeur fixe 1001 pixels) dans des blocs transparents de largeur 100%, et le clic sur ces blocs renvoie sur l'autre site dont ils font la publicité.

Pour une fenêtre de 1000 pixels de large, évidemment, la publicité n'apparaît pas de part et d'autre du bloc principal. A partir de 1000 pixels, elle commence à apparaître.

J'ai trois soucis sur le travail avancé :

1) l'habillage se superpose à une partie du contenu

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).

1/ Si tu mets l'habillage en background du body, il sera toujours en arrière plan.

2/ Le plus simple est de ne pas gérer la hauteur. A la limite, définir des dimensions en fonction de celles de la fenêtre, c'est possible (mais il faut envisager tous les cas de figure, surtout si on ne veut pas que l'image soit déformée), mais en fonction du contenu, sachant que le contenu est de hauteur variable, c'est possible, mais c'est galère, donc à voir si ça vaut vraiment le coup.

3/ En général, la largeur en pixels d'un viewport de navigateur mobile est de 980 pixels. Donc si ton bloc principal de contenu est d'une largeur supérieure à 980 pixels, il va de soi que l'arrière plan n'a pas de place pour apparaître sur les côtés.

[ivoyages]

J'ai réglé les problèmes 1 et 2 mais pas l'habillage sur Tablette et Smartphone.

3/ En général, la largeur en pixels d'un viewport de navigateur mobile est de 980 pixels. Donc si ton bloc principal de contenu est d'une largeur supérieure à 980 pixels, il va de soi que l'arrière plan n'a pas de place pour apparaître sur les côtés.

Oui c'est plus large. N'y a t-il pas moyen de contourner le problème ?

[Ernestine]

Si le bloc de contenu principal fait la même largeur (ou plus) que la largeur du viewport, je ne vois vraiment pas comment tu peux afficher quoi que ce soit de part et d'autre de ce bloc. A moins de le réduire en largeur sur les versions mobiles, par exemple en faisant un design responsive. Mais est-ce que ça vaut le coup de réduire les dimensions du contenu utile pour afficher un background publicitaire sur mobile ?

[ivoyages]

Quand tu parles d'un viewport de 980 px, c'est bien pour les tablettes d'une résolution de 1024 px ?

[Ernestine]

Quand tu parles d'un viewport de 980 px, c'est bien pour les tablettes d'une résolution de 1024 px ?

Pas forcément : tablettes, téléphones, etc... Que tu sois sur un iPhone 3, dont la surface physique de l'écran est 320x480px, ou sur un iPad3 (surface physique 1536x2048px), la largeur du viewport utilisée par Safari est dans les deux cas de 980 pixels, qu'on soit d'ailleurs en mode portrait ou paysage. Idem pour Android 4, Opera mobile, et d'autres. Sur IE mobile c'est 1024 pixels. On peut régler cette dimension avec la balise meta viewport, mais ce n'est pas ça qui résoudra ton problème.

Voir par exemple : http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

[ivoyages]

Merci pour tes éclaircissements et pour le lien vers ce très bon article.

[ivoyages]

En ajoutant la balise

<meta name="viewport" content="width=995">

C'est déjà beaucoup mieux