Redimensionner bandeau en responsive |
Répondre |
Auteur |
Sujet Recherche Options des sujets
|
Clem_oe
Newbie Depuis le: 03 Dec 2014 Pays: France Status: Inactif Points: 22 |
Options des messages
Thanks(0)
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 |
|
Clem_oe
Newbie Depuis le: 03 Dec 2014 Pays: France Status: Inactif Points: 22 |
Options des messages
Thanks(0)
|
Petite précision, dans la partie Responsive, j'ai sélectionné "Largeur publiée" -> "100% (toute la fenêtre).
|
|
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Options des messages
Thanks(0)
|
Petite précision : fournir un lien vers le site.
|
|
Clem_oe
Newbie Depuis le: 03 Dec 2014 Pays: France Status: Inactif Points: 22 |
Options des messages
Thanks(0)
|
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 |
|
Clem_oe
Newbie Depuis le: 03 Dec 2014 Pays: France Status: Inactif Points: 22 |
Options des messages
Thanks(0)
|
Bonjour,
Personne n'a d'idée sur ce problème Responsive ? |
|
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Options des messages
Thanks(0)
|
je n'ai pas encore eu le temps de regarder ...
Ce soir je pense ! |
|
Répondre | |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |