Ruban responsive

Bonsoir,

J'ai ajouté un ruban en haut à droite de notre site (le truc vert pour indiquer le montant pour bénéficier du franco de port).

Mais le ruban est loin d'être "responsive" et dès que l'on descend dans des basses résolutions, le ruban se superpose à la barre de recherche, aux icônes... bref pas terrible.

Pourriez-vous m'aider à le rendre "responsive" ? Voici le css :

.ribbon-wrapper-green {
  width: 227px;
  height: 237px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #000;
  text-align: center;
  text-shadow: rgba(0,0,0,0) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -15px;
  top: 65px;
  width: 320px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #000;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}​

Et le div du header.tpl :

<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">Franco de port à 100€</div></div>
</div>&#8203;

Merci de votre assistance.

Bonjour,

Je ne vois pas réellement l'intérêt de le rendre responsive ici, puisqu'il apparaît bien que ce soit sur web et tablette, et pour smartphone il te suffit de faire un media query par exemple et de changer sa taille en fonction.

Limite, pour les smartphones tu pourrais le masquer car ce n'est pas une information capitale pour l'utilisateur sur mobile.

Par contre il est masqué et passe en-dessous de ta barre de recherche, donc n'oublie pas de lui donner une propriété z-index à 500 par exemple.

Merci pour le conseil mais z-index ne semble pas avoir eu d'effet ?

L'as-tu appliquée sur ta classe .ribbon-green ?

Car chez moi j'ai mis z-index: 500 sur firebug, et ça fonctionne très bien

J'ai l'impression que le problème est lié à la mise en cache du css par prestashop. Le fichier sur le serveur a bien z-index: 500; mais lorsqu'on visite non. Bizarre car j'ai vidé le cache smarty et forcé la recompilation des templates >.>.

Je vais regarder le problème, mais ça marche effectivement. Merci.

Edit : rien à faire ... j'ai vidé / désactivé le cache, forcer la recompilation des templates, désactiver la oncaténation, compression et mise en cache... mais mon z-index passe à la trappe. Il disparait "mystérieusement" o_o.

J'ai dans firebug :

.ribbon-green {
[...]
    color: rgb(0, 0, 0);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}

Et ça sur le serveur :

.ribbon-green {
[...]
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
  z-index : 500;
}

Modifié par cosimo (10 Jan 2014 - 15:32)

Et en affichant le code source du CSS en ligne, z-index n'apparaît pas non plus ?

Tu peux essayer de rajouter quelque chose de flagrant comme un background: red; sur ta balise body, et voir si cela prend bien effet sur ton site.

Sinon, ça vient peut-être d'un code CSS qui écrase ta valeur dans la suite du fichier, dans ce cas tu peux essayer de mettre z-index tout en dernière propriété de .ribbon-green{ }, voire déplacer .ribbon-green tout en bas de ta feuille CSS et surtout rajouter !important pour qu'il écrase toutes les autres possibles valeurs de la feuille CSS ( z-index: 500 !important; )
Modifié par ohweb (10 Jan 2014 - 17:18)

C'était la mise en cache Apache qui causait le problème. Ca fonctionne désormais. Merci !