[résolu] Bug d'affichage avec OPERA !

jog · November 22, 2012

Bonsoir,

J'ai un petit souci d'affichage avec OPERA, je ne sais vraiment pas à quoi toucher pour le résoudre et c'est juste sous OPERA les autres ça va ! pour voir le bug merci d'aller sur www.supramassage.fr

et dans les produits phares, l’étiquette prix (verte) bouge toute seule elle suit le mouvement du slider sinon aller dans une catégorie et passez le pointeur de la sourie sur un produit et là encore elle se déplace !!! Que faire SVP ??

Edited November 26, 2012 by jog (see edit history)

zolt · November 23, 2012

Bonjour jog

Tu as un problème de largeur...

Ton id="center_column" est a 750px de large.

Et ton contenu qui est a l'intérieure de ton center_column est a 760px de large

Tu as de la chance d'avoir ce problème que sous opera.

Cordialement

zolt · November 23, 2012

==========Correction: 1===============

#center_column div.block {


margin: auto;
width: 760px;
}

Remplace par:

#center_column div.block {


margin: auto;
width: 750px;
}

=============correction 2==================================



ul#product_list {


list-style-type: none;
margin: 1em auto;
overflow: hidden;
width: 760px;
}

Remplace par:

ul#product_list {


list-style-type: none;
margin: 1em auto;
overflow: hidden;
width: 750px;
}

=============Correction 3========================



#index ul#product_list li {


background: url("http://www.supramassage.fr/themes/bio_store/css/../img/images/background_product.png") no-repeat scroll center top transparent;
float: left;
height: 240px;
margin: 0 0.7em;
padding: 10px 5px;
position: relative;
text-transform: uppercase;
width: 225px;
}

Remplace par:

#index ul#product_list li {


background: url("http://www.supramassage.fr/themes/bio_store/css/../img/images/background_product.png") no-repeat scroll center top transparent;
float: left;
height: 240px;
margin: 0 0.6em;
padding: 10px 5px;
position: relative;
text-transform: uppercase;
width: 225px;
}

========================correction 4======================

Il y a aussi une erreur avec ton slider

<div id="vtemskitter1" class="vtem_main_slideshow box_skitter vtem_skitterdots" style="width:962px; height:325px;margin:0px 0px 40px 30;">

Le chiffre 30 n'est pas valide, il faut le remplacer par:

<div id="vtemskitter1" class="vtem_main_slideshow box_skitter vtem_skitterdots" style="width:962px; height:325px;margin:0px 0px 40px 0px;">

=====================correction 5 ==============

Ton logo, la div n'est pas assé large, tu as une image de 557 de large dans une div de 365 de large...

Impossible de te donner directement la solution car ton header va ce décaler, il faut revoir ton header au complet.

Cordialement

Edited November 23, 2012 by zolt (see edit history)

jog · November 26, 2012

Bonsoir ZOLT,

Merci vivement d'avoir passé du temps sur mon problème, j'ai éffectué les changements que tu m'as donné ci-dessus, mais OPERA me pose toujours des soucis d'affichage. Pour moi cela doit venir d'un scrip JS ou AJAX un truc comme ça ... mais je n'y connais absolument rien dans la programation, je bidouille juste le HTML et le CSS. Alors si tu as une autre idée MERCI sinon MERCI quand même de ton engagement.

Cdlt

Joël

zolt · November 26, 2012

Re jog

Normalement, s'il y a une position: absolute, il faut lui donner la propriétés left, right, top et bottom pour placer la boîte.

Et si je regarde ton code, ce qui place ta boite price, c'est: margin: -234px 3px . Ce n'est vraiment pas bien !

Car ton image fait 200px de haut avec un margin top 234px et bottom 234px pour en afficher ta boite price

ul#product_list li .price {
background: none repeat scroll 0 0 #9BC91C;
border-radius: 4px 4px 4px 4px;
color: #000000;
display: block;
margin: -234px 3px;
padding: 0.4em;
position: absolute;
text-align: left;
transform: rotate(-15deg);
}

Remplace par:

ul#product_list li .price {
background: none repeat scroll 0 0 #9BC91C;
border-radius: 4px 4px 4px 4px;
color: #000000;
display: block;
padding: 0.4em;
position: absolute;
 top: 10px;
 left: 10px;
text-align: left;
transform: rotate(-15deg);
}

J'ai enlevé le margin et ajouté ces propriétés du adsolute.

A toi de tester déditer (personaliser) le top et left pour la correction, car peut être que 10px left est tros fort, 5px serait peut être mieux ? Mais je sais que cela va régler ton problème.

Cordialement

Edited November 26, 2012 by zolt (see edit history)

jog · November 26, 2012

Re-Bonsoir,

J'ai fais les modifs mais...Rien qui résoud le problème.

Je t'envoie le code pour vérifier si C bon d'après toi.

ul#product_list li .price {
display: block;
position: absolute;
text-align: left;
color: #000000;
margin: -234px 3px;
-moz-transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
*margin: -247px 8px;
padding: 0.4em;
background: #9BC91C;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
-ms-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px
}
ul#product_list li a.button_infos, ul#product_list li a.button_panier, ul#product_list li span.panier {
display: none
}
p.compare{
background: #000000;
clear: both;
float: left;
margin-left: 3px !important;
margin-top: -2px !important;
padding: 0.2em;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
-ms-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
*padding-top: 0px;
*margin-left: -20px;
*width: 100px
}
/*OPERA*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
ul#product_list li span.availability   { font-size: 6px; font-family: Arial;}
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
ul#product_list li h3 a   { margin: -35px 0 0;}
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
p.compare  { margin-top: -12px !important;}
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
ul#product_list li .price  { top: 10px; left: 10px;}

J'ai bien enlevé le ; après 10px (je m'en suis aperçu en postant) et j'ai forcé la compile et vidé le cache ...mais rien de bon

Edited November 26, 2012 by jog (see edit history)

zolt · November 26, 2012

Re

Je ne voie pas la correction que je t'ai proposé

Cordialement

Edited November 26, 2012 by zolt (see edit history)

zolt · November 26, 2012

Re ceci devrait etre le bon code:

ul#product_list li .price {
display: block;
position: absolute;
top: 10px;
left: 5px;
text-align: left;
color: black;
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
padding: 0.4em;
background: #9BC91C;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}

Cordialement

jog · November 26, 2012

Re-Re

Tu es sur la bonne piste et je te renouvelle mes remerciements pour ton aide, moi je débute et comme tout débutant j'essaie de comprendre en pratiquant et là ça m'épate ! j'ai mis que tu étais sur la bonne piste (le problème est résolue en page d'accueil) parce qu'en allant dans les catégorie le problème persiste si avec le curseur de la sourie on survole un produit, vois-tu une solution qui à mon avis est dans les parages de ta solution ! mais je ne suis pas encore assez calé pour y remedier... je compte sur toi...

Cdlt

Joël

jog · November 26, 2012

Re

Je ne voie pas la correction que je t'ai proposé

Cordialement

Ha! aussi je pensais que le fait d'avoir /* OPERA*/ dans mes dernières lignes de codes agissait uniquement pour ce navigateur et pour cette raison j'ai mis ton code dans cette parties (dernière ligne) je voie que j'ai encore à bosser pour avoir un niveau convenable

jog · November 26, 2012

Bonsoir ZOLT,

Mon post #9 n'est plus d'actualité! c'est moi qui n'ai pas rafraichit le navigateur pour m'apercevoir que le bug est résolu. Alors mille MERCI pour avoir passé du temps à me dépanner.

jog · November 26, 2012

Zolt,

Ce n'est pas dans les habitudes de ce forum, mais cela me ferai plaisir de t'envoyer un bon oreiller (vu sur le site) pour te remercier. place ton adresse en MP et je fais le reste.

Cdlt et Merci !

zolt · November 26, 2012

Re mon cher

Impossible, je suis quebecois et cela va te couter trop cher de frais.

Merci quand meme, c'est simpa

[résolu] Bug d'affichage avec OPERA !

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in