Aller au contenu

Problème css Habillage


ivoyages

Sujets conseillés

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


</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 :)


Lien vers le commentaire
Partager sur d’autres sites

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.


Lien vers le commentaire
Partager sur d’autres sites

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 ?


Lien vers le commentaire
Partager sur d’autres sites

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 ?


Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...