BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Discussion générale openElement
  Nouveaux messages Nouveaux messages Fil RSS  - Redimensionner bandeau en responsive
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Redimensionner bandeau en responsive

 Répondre Répondre
Auteur
Message
Clem_oe allez vers le bas
Newbie
Newbie


Depuis le: 03 Dec 2014
Pays: France
Status: Inactif
Points: 22
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Clem_oe Citer  RépondreRéponse Lien Direct à ce Post Sujet: Redimensionner bandeau en responsive
    Envoyé : 21 Août 2015 à 12:25
Bonjour,

Un nouveau problème se pose à moi.
Je souhaite sur mon site mettre un bandeau avec une image à gauche et une à droite.
En fonction de la taille de l'écran, l'image de gauche sera ou non afichée. Par contre l'image de droite doit toujours être présente et à droite du bandeau.

La page est centrée et ne peut dépasser les 1024px.
L'utilisateur ne devra pas pouvoir réduire la fenêtre à moins de 480px.
Le bandeau fait 100px de hauteur.
L'image de gauche fait 100px de haut x 278px de large.
L'image de droite fait 100px de haut x 480px de large.

J'ai donc créé :
- 1 panneau d'élément (top) pour y mettre toutes les images.
               dépassement : masquer
               affichage : relatif
               fond : blanc
               hauteur : 100px !important
               largeur : 100%
               classe perso : top

Dans ce premier panneau, j'y ai mis :
- 1 panneau d'élément (topleft) pour y mettre l'image de gauche.
               dépassement : masquer
               affichage : relatif
               image : mon_image_gauche
               position image : top left
               répétition image : fixe
               hauteur : 100px
               largeur : 278px
               classe perso : topleft


- 1 panneau d'élément (topcenter) qui servira de zone ajustable en largeur.
               dépassement : masquer
               affichage : relatif
               fond : blanc
               hauteur : 100px
               largeur : 10%
               classe perso : topcenter


- 1 panneau d'élément (topright) pour y mettre l'image de droite.
               dépassement : masquer
               affichage : relatif
               image : mon_image_droite
               position image : top right
               répétition image : fixe
               hauteur : 100px
               largeur : 480px
               classe perso : topright

Suite à ça, j'ai placé un bloc de code source (css, header) avec le code suivant :
.top{
    width:100% !important;
    position : fixed !important;
    z-index : 9999 !important;
}

@media screen and (max-width : 480px){
    #WEtopright{
        display : inline-block !important
    }
    #WEtopleft{
        display : none !important
    }
    .topcenter{
        width : calc(100% - 480px)
    }
}

@media screen and (min-width : 480px) and (max-width : 1024px){
    #WEtopright{
        display : inline-block !important
    }
    #WEtopleft{
        display : inline-block !important
    }
    .topcenter{
        width : calc(100% - 759px)
    }
}

@media screen and (min-width : 1024px){
    #WEtopright{
        display : inline-block !important
    }
    #WEtopleft{
        display : inline-block !important
    }
    .topcenter{
        width : calc(100% - 759px)
    }
}

Le problème est que cela ne fait pas exactement ce que j'attends. Lorsque je réduis progressivement la taillede la fenêtre, l'image de droite se déplace vers la gauche, puis disparait.
Si je continue à réduire la fenêtre, c'est l'image de gauche qui disparait.

Cela est normal car c'est l'image qui doit être masquée lorsque l'écran est trop petit. mais l'image de droite devrait toujours être visible à droite.

Une idée et/ou un coup de main seraient les bienvenus.

Merci d'avance

Haut de la page
Clem_oe allez vers le bas
Newbie
Newbie


Depuis le: 03 Dec 2014
Pays: France
Status: Inactif
Points: 22
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Clem_oe Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 21 Août 2015 à 12:28
Petite précision, dans la partie Responsive, j'ai sélectionné "Largeur publiée" -> "100% (toute la fenêtre).
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 21 Août 2015 à 13:40
Petite précision : fournir un lien vers le site.
Haut de la page
Clem_oe allez vers le bas
Newbie
Newbie


Depuis le: 03 Dec 2014
Pays: France
Status: Inactif
Points: 22
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Clem_oe Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 21 Août 2015 à 14:08
Merci Larsene pour essayer de jeter un oeil.

Le site n'est pas encore en ligne pour le moment.

J'ai juste mis la page de test du bandeau

http://hadesdev.clementoni.fr/bandeau.htm
Haut de la page
Clem_oe allez vers le bas
Newbie
Newbie


Depuis le: 03 Dec 2014
Pays: France
Status: Inactif
Points: 22
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Clem_oe Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 24 Août 2015 à 11:49
Bonjour,

Personne n'a d'idée sur ce problème Responsive ?
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 24 Août 2015 à 13:35
je n'ai pas encore eu le temps de regarder ... Embarrassed

Ce soir je pense !
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.