18041 sujets

Questions générales et questions de débutants

[Résolu] Css et Navigateurs

Bonjour à tous,
J'ai un soucis entre mon code CSS et l'affichage sous différents Navigateurs (Firefox 39.0 - IE 11 - Chrome 39 - Opéra 31)

Voici mon code CSS :
ribbon{position:absolute;left:837px;bottom:47%;z-index:0;overflow:hidden;width:75px;height:75px}


Voici ce que cela donne sous IE - Chrome et Opéra :
http://i18.servimg.com/u/f18/18/57/20/27/image110.jpg

et voici sous Firefox :
http://i18.servimg.com/u/f18/18/57/20/27/image210.jpg
Vous remarquerez dans ce dernier cas, que le ribbon n'est pas alligé sur la ligne du haut

J'ai eu beau chercher sur le net la solution, mais je ne trouve pas...

Je vous remercie de votre aide...

Cordialement
Modifié par Nicolas30 (16 Aug 2015 - 17:16)
Bonjour,

Essayez de mettre une valeur fixe pour le bottom, votre problème vient de là je pense...
Modifié par Olivier C (16 Aug 2015 - 17:22)
Bonjour Nicolas30,
je pense que c'est ton bottom:47% qui pose problème.

Essaie de caler ton ribbon directement par l'existence de ton bloc de texte :
<style>
#bloc{display:inline-block;position:relative; /* ... */}
#bloc span{/*ici figurent les attributs du ribbon, notamment en */ position:absolute;top:x;right;y}
</style>

<html>
<div id="bloc">Blabla<span><img src="_.png" alt="" /></span></div>
</html>
Note bien que ton bloc doit expressément déclarer l'attribut position:relative pour que le ribbon puisse s'y "accrocher" en position:absolute !
Modifié par pictural (16 Aug 2015 - 17:35)
Olivier C a écrit :
Bonjour,

Essayez de mettre une valeur fixe pour le bottom, votre problème vient de là je pense...


Bonjour Olivier et merci de la réponse...

J'avais une valeur fixe avant mais rien ne change...
28px pour IE - Chrome - Opéra et à 32px pour Firefox...
Je n'arrive pas à régler ce problème...

Cdt
pictural a écrit :
Bonjour Nicolas30,
je pense que c'est ton bottom:47% qui pose problème.

Essaie de caler ton ribbon directement par l'existence de ton bloc de texte :
&lt;style&gt;
#bloc{display:inline-block;position:relative; /* ... */}
#bloc span{/*ici figurent les attributs du ribbon, notamment en */ position:absolute;top:x;right;y}
&lt;/style&gt;

&lt;html&gt;
&lt;div id="bloc"&gt;Blabla&lt;span&gt;&lt;img src="_.png" alt="" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/html&gt;


Bonjour pictural et merci de ta réponse,

Alors voici exactement tout mon code CSS
.ribbon {
  position: absolute;
  left: 837px;
  top: 28px;
  z-index: 0;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#F70505 0%, #8F0808 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F0808;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F0808;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}


et voici mon code PHP / HTML
if($urgent == 1)
	echo '<div class="ribbon "><span>URGENT</span></div>';

Modifié par Nicolas30 (16 Aug 2015 - 17:38)
Note bien que ton bloc doit expressément déclarer l'attribut position:relative pour que le bandeau puisse s'y "accrocher" en position:absolute !

Et heu ... pour si peu de chose qu'un bandeau "URGENT", pourquoi pas simplement une petite img.png avec la même solution css (alors sans imbrication du span pour exprimer un jeu z-index) ?
Modifié par pictural (16 Aug 2015 - 17:50)
pictural a écrit :
Et heu ... pour si peu de chose qu'un bandeau "URGENT", pourquoi pas simplement une petite img.png avec la même solution css ?


Oui c'est vrai... Mais je trouvais ça assez chouette avec un Ribbon...
---
Donc j'ai mis 
position:relative;
et 
bottom:103px;

Mais rien ne change au niveau de Firefox...

Cdt
Attendez j'ai trouvé, le temps de tester votre code... Il faut mettre ceci :
.ribbon {
  position: absolute;
  right: -5px; /* J'ai modifié le ici (avec right au lieu de left, du coup ça marchera quelque soit la largeur de la div)... */
  top: -5px; /* ... et ici */
  z-index: 0;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}

Le conteneur, lui, doit être en position: relative, sinon ça ne fonctionnera pas...

Un exemple en ligne (edit : optimisé).

Je vous laisse analyser le code pour comprendre.
Modifié par Olivier C (24 Aug 2015 - 09:26)
Bon, essayons maintenant de trouver La bonne solution. Procédons par une méthode simple ; tente ceci dans les 3 nav en enregistrant ce bout de code ruban.htm :
<!doctype html>

<html lang="fr">

<head>

<meta charset="utf-8" />

<title>Ruban</title>

<style>
#bloc{z-index:1;display:inline-block;position:relative;width:100px;height:100px;background:yellow}
#ruban{z-index:2;display:inline-block;position:absolute;width:75px;height:75px;background:red;margin-top:-4px;margin-left:-71px}
</style>

</head>

<body>

<div><span id="bloc"></span><span id="ruban"></span></div>

</body>

</html>
Ce sera ok ; reprends-en alors l'architecture ... et 'ruban' sera une img.png au background:transparent.
Modifié par pictural (16 Aug 2015 - 18:22)
@OlivierC, ma dernière réponse s'est juste superposée à la tienne ... au même moment

@Nicolas30 : avec un transform:rotate(45deg) ton bouton pourra faire la bonne accroche ! mais attention qu'il ne devienne une invitation à 'cliquer', pour rien.
Modifié par pictural (16 Aug 2015 - 18:20)
Sujet clos
Aller à