18043 sujets

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

[Résolu] Pourquoi ce bug d'affichage..

Bonjour à tous,

J'ai un petit problème assez bizarre ma foi, j'ai créé une class sur un élément pour qu'il me fasse apparaitre une bande sur tout la largeur de l'écran. simple à priori.

Lorsque je regarde ce que cela donne, rien n'apparait sauf lorsque via firebug je passe manuellement de position:absolute vers position:relative puis de nouveau vers absolute. là ma bande apparait parfaitement. Smiley biggol 

.maClass{
	background-color: #f4a25d;
       height: 296px;
       left: 0;
       position: absolute;
       width: 100%; 
	z-index:0;
}


Quelqu'un aurait déjà rencontré ça et trouvé une solution ?
Bonjour.

Pour le bug, aucune idée.
Pour des histoires de bande, personnellement, j'utiliserais plutôt un gradient linéaire.

Smiley smile
Administrateur
Hello,

S'il s'agit d'une bande purement décorative, autant éviter de créer un élément HTML juste pour ça.
Le mieux, comme le dit Zelena, serait de décorer un élément existant avec un gradient linéaire, ou de générer un ::before / ::after qui ne parasitera pas le HTML.
ben j'ai commencé par faire un ::before sur l'élément mais l'élément n'apparaissait pas alors j'ai essayé un after sur l'élément précédent, pareil la bande ne veut pas s'afficher sans la bidouille de test via firebug Smiley lol , alors j'ai créé un élément pour voir si ça changerait quelque chose, sauf que nan Smiley biggol Je ne comprends pourquoi ce bug pourtant ça reste simple comme chose. . Smiley sweatdrop 

.MaClass::before {
background-color: #f4a25d;
content: "";
display: block;
height: 296px;
left: 0;
position: absolute;
width: 100%;
z-index: 0;
}


Le gradient linéaire est mieux pour quel raison ?
blond1n a écrit :

Le gradient linéaire est mieux pour quel raison ?

Eh bien, cela évite de faire un contenant uniquement pour un effet graphique... (Edit : comme c'est dit plus haut)
Pourquoi c'est mieux ? Plus il y a de contenants, plus il y a de risques de bugs...
Smiley smile
Modifié par Zelena (21 Nov 2016 - 07:57)
Administrateur
blond1n a écrit :

Lorsque je regarde ce que cela donne, rien n'apparait sauf lorsque via firebug je passe manuellement de position:absolute vers position:relative puis de nouveau vers absolute. là ma bande apparait parfaitement. Smiley biggol

(…)
Quelqu'un aurait déjà rencontré ça et trouvé une solution ?

Oh oui, quand le navigateur "optimise" un peu trop son affichage et oublie de dessiner (paint) certains éléments Smiley decu
Souvent iOS ou Chrome mais ça peut tous les toucher... overflow: hidden et position: absolute sont de bons candidats à une optimisation "agressive", et transform pour ce qui est dynamique.
will-change peut améliorer les choses, mais il faut déjà savoir si ça s'affiche correctement quand l'élément est dans le flux, sans ov:h ou pos:a ?
Le site est généré par Drupal7, pour le moment il est en local. Il sera surement hébergé chez Ovh.

Le doctype : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>


J'ai fait un autre site il y a quelques temps où je n'ai pas eu ce problème, le bandeau de couleur pleine largeur était inséré directement dans le template. Là c'est une classe qui est créée par view, il n'a pas l'air de vouloir "bien" gérer la classe. .
Un truc qui est assez bizarre. .. Smiley biggol

J'ai fait une galerie, j'ai gardé la même class sur les images. .en faisant des réglages sur le tableau, j'ai enlevé "table : collapse;" et là l’affichage de la bande s'affiche ! Smiley lol sauf que c'est pas sur ma galerie mais sur la page de l'élément qui m'intéresse. Smiley ravi sur la page de l'élément ça ne marche toujours pas ! Smiley sweatdrop Smiley murf ce qui est normal puisque le table collapse n'a pas d'influence sur la page de l'élément.. Smiley biggol
Felipe,

L'élément s'intègre bien dans le flux, sans les positions et overflow. Je suis un peu perdu avec "will-change", je ne l'ayant jamais utilisé .. Smiley biggol
En bidouillant le css j'ai pu faire ce que je voulais. .. Smiley smile

Merci de vos conseils/directions pour trouver une solution ! Smiley cligne
Sujet clos
Aller à