[Problème] adapter sa bannière à la résolution d'un utilisateur

[o'neil62800]

Bonjour,
Alors voilà après beaucoup de recherche j'ai découvert qu'il valait mieux mettre son Template en fluide 100% mais voilà maintenant c'est presque parfait en effet plus rien ne se décale dans les pages etc mai il reste un petit soucis: la bannière en effet elle, elle ne s'adapte pas du tout à l'écran: donc la bannière que j'adapte pour mon écran 1650*1050 se fait couper sur les autres résolutions j'ai donc créer une résolution pour quelques résolutions:800;1050;1280;1600 et supérieur à 1600 et j'ai modifié le code suivant dans le fichier template.css:
/* begin Header */
div.art-header
{
margin: 0 auto;
position: relative;
width:100%;
height: 413px;
margin-top: 0;
margin-bottom: 0;
}

.art-header:after
{
position: absolute;
z-index:-1;
display:block;
content:' ';
top: 0;
width:100%;
height: 413px;
background-image: url('../images/header.jpg');
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */


Pour qu'il devienne ceci:

/* begin Header */
div.art-header
{
margin: 0 auto;
position: relative;
width:100%;
height: 413px;
margin-top: 0;
margin-bottom: 0;
}

.art-header:after
{
position: absolute;
z-index:-1;
display:block;
content:' ';
top: 0;
width:100%;
if(screen.width < 801) else background-image="url('../images/header2.jpg')";
if(screen.width < 1025) else background-image="url('../images/header3.jpg')";
if(screen.width < 1281) else background-image="url('../images/header4.jpg')";
if(screen.width < 1601) else background-image="url('../images/header5.jpg')";
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */

Tout ce que j'ai réussi à faire c'est de faire disparaître la bannière :-(. J'aimerais aussi que la hauteur de mon header se change en fonction de l'image qui va être chargé en effet si c'est l'image de largeur 800 par exemple il faut une hauteur de 200px etc

Cela fait depuis ce matin 12h que je cherche sans succès donc si quelqu'un avait la solution miracle je lui serai énormément reconnaissant.

Cordialement
O'neill62800

[o'neil62800]

Re : adapter sa bannière à la résolution d'un utilisateur

Personne ne peut m'aider??

[visuapub]

Re : adapter sa bannière à la résolution d'un utilisateur

Y a un tuto complet sur comment adapter son template pour Mobiles : http://www.joomlack.fr/documentation...a-pour-mobiles

Par contre, le postulat de départ est un template a largeur fixe, plus des template adaptés à différentes configuration (largeur d'une tablette, d'un Iphone ou bien d'un telephone autre que Iphone.

Du coup, ca risque de demander de retravailler sur ton projet depuis son départ, masi ca peut etre une solution concrete pour toi.

De la meme manière, si jamais ca t'interesse, je t'invite toujours sur le meme site a consulter le tuto gratuit (mais plutot le payant, pas cher, me souviens plus du prix) pour créer ton template joomla.

[o'neil62800]

Re : adapter sa bannière à la résolution d'un utilisateur

D'accord je vais voir sa merci pour ta réponse

[lomart]

Re : adapter sa bannière à la résolution d'un utilisateur

Il faudrait ajouter les règles suivantes à la version originale :
@media only screen and (min-width : 600px) and (max-width: 801px) {
div.art-header { background-image="url('../images/header2.jpg')"; }
}
idem sur le principe pour les autres tailles.

[ghazal]

Re : adapter sa bannière à la résolution d'un utilisateur

Salut,
lire cet article ;

http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

Voir cet exemple hyper pratique avec un "grid" :

http://www.onextrapixel.com/examples/responsive-design/example3_responsive.php

Testé sur iPhone, nickel, en vertical et horizontal

EDIT :
j'oublie tout le temps de rajouter ceci dans la head

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Indispensable.

EDIT 2 :
et bien sur lire le tuto de CED1870
Tutoriel : adapter son template Joomla pour mobiles

http://www.joomlack.fr/documentations-tutoriels-joomla/tutoriel-adapter-son-template-joomla-pour-mobiles

juste pour mémoire, une liste des media queries :

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

[o'neil62800]

Re : adapter sa bannière à la résolution d'un utilisateur

D'accord je vous remercie beaucoup pour vos réponses je vais tester et voir un peu quel sera la meilleur solution encore merci.