• 0
creatifmen

Bannière responsive futur...il y a t'il un espoir?

Question

creatifmen    14

hello tout le monde une bannière responsive qui ressemble a ça, c est possible avec zwii?

 

exemple avec une bannière 1170x200

5b0c527c8a8ee_00_1170x200zwbartest.thumb.png.a2be15b69b65ba780c9041f8d73192b5.png

 

avec zwii 8.2.9

01_normal.thumb.jpg.0667594a1a36dc4406449c8c039aa703.jpg

quand ont réduit avec le navigateur zwii 8.2.9 (pas responsive) image tronquée

5b0c52df213b7_02_reductionsansresponsive.jpg.7dbcea72d75591341de757f062c3f9f3.jpg

 

Voici ce que ça devrait donner avec une bannière responsive (c est le truc qui manque d'urgence) autrement Zwii  vas tomber dans l'oublie..

Zwii et ultime faut pas baisser les bras courage à toute l’équipe.
 

 

5b0c5332ab937_03_reductionavecbanresponsive.jpg.1eec3cdd936be831fe86fa5b03f3f5ec.jpg

Modifié par creatifmen

Partager ce message


Lien à poster
Partager sur d’autres sites

34 réponses à cette question

Messages recommandés

  • 1
cybertaf    79
Le 26/08/2018 à 15:45, CroqueWeb a dit :

Auxquels, pour un meilleur compromis, il faut ajouter (Personnalisation du thème -> Mode avancé) ceci :


header { 
  margin:0;
  padding:0;
  background-size: cover;
}

En effet c'est la meilleure solution... intégration dans la prochaine version de test

Modifié par cybertaf

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Thispy    36

Bonjour @creatifmen,

 

Pour rendre ton logo responsive suffit de mettre la main dans le camboui...

 

dans le /core/layout/ commons.css

vous collez ce bout de code :

/* Bannière */
header {
 margin: 10px !important;
 background-size: contain;
}

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
creatifmen    14

salut a toi Thispy

  j'avais déjà tester tout ça.

/* Bannière */
header {
 margin: 10px !important;
 background-size: contain;
}

ou ça

/* Bannière */
header {
 margin: 0px !important;
 background-size: contain;
}

avec ce code quand l'on réduit la fenêtre du navigateur ça donne genre ça.. il y a des espaces moches supplémentaire..

 

03avec-le-patch.png.4a5a9ab11540089f078c0127a323a49a.png

 

 

 

 

il faudrait que ça donne plutôt ça...

5b0eb6598869d_04_reductionavecbanresponsive.jpg.73be9e7d7627b8a52eabd2ab8ec879d9.jpg

 

a++ merci quand même..

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Thispy    36

Bonjour @creatifmen,

 

Et si tu utilises l'espace moche dans le fond de ton header tu auras un meilleurs rendu.

Maintenant à toi à voir...

Je ne suis pas du tout codeur au départ donc je sèche ...

 

Bien à toi,

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Iron    6

Bonjour à tous.

 

Effectivement cette histoire de bannière responsive, c'est quelque chose qu’il manque cruellement à Zwii.

 

Pour une future version de Zwii, c'est possible ?

Sinon, quelqu'un a une idée pour corriger le tir en attendant ?

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    99

Il s'agit des styles définis pour "background" pour la balise header, ces propriétés css ont une limite et le redimensionnement de la page entraîne obligatoirement un rognage de l'image si la taille de la partie visible de l'écran est inférieure à celle de l'image.

Les styles modifiables et définis par défaut par Zwii sont :

header{background-color:rgba(255,255,255,1);height:100px;line-height:100px;text-align:center}
header{background-image:url("../file/source/banniere.jpg");background-position:center center;background-repeat:no-repeat}

Auxquels, pour un meilleur compromis, il faut ajouter (Personnalisation du thème -> Mode avancé) ceci :

header { 
  margin:0;
  padding:0;
  background-size: cover;
}

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Iron    6

Merci CroqueWeb.

Voilà une solution qui dépanne en attendant.

Je note pour le rognage à prendre en compte.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    99

@Iron

Il y a 15 heures, Iron a dit :

Je note pour le rognage à prendre en compte

C'est exactement ça, il faut tâtonner lors de la réalisation de la bannière, afin que le contenu que l'on souhaite afficher soit toujours visible sur des écrans de faible résolution, tels que les smartphones. Ce contenu devra obligatoirement être centré sur la bannière.

Actuellement il n'y a quasiment plus d'écran inférieur à 720 x 1280 px, mais il y a encore des résolutions de 360 x 640 px sur de vieux appareils, en dessous il est laborieux de naviguer sur le web.

  • Like 1

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    99

Il semble que je viens de résoudre le problème de la responsivisation de la bannière, en partant du constat que la hauteur de la bannière est déterminée une fois pour toutes dans la configuration, celle-ci ne peut donc être responsivable, car elle uniquement adaptée à la taille des écrans d'ordinateurs.

Pour que la responsivisature de la bannière soit effective, il faut qu'elle change de hauteur pour les plus petite tailles d'écrans des smartphones, j'ai donc modifié le code de Zwii en ce sens, je le transmet à @cybertaf pour le valider et éventuellement l'ajouter à une prochaine version.

 

Résultats :

 

 

01.jpg

02.jpg

03.jpg

04.jpg

05.jpg

06.jpg

07.jpg

08.jpg

09.jpg

10.jpg

 

Les captures d'écran ci-dessus, faites avec l'outil "vue adaptative" de Firefox, ne sont pas toutes fidèles à la taille des écrans de tests.

Ci dessous une capture en taille réelle :

 

rwd-ok.png.aca2db246f7b58a5427eb23bb978505e.png

 

 

 

 

Modifié par CroqueWeb
précision captures d'écran

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant