CSS dans les imports HTML

par julien Lun 23 Aoû - 10:08

Bonjour,
Ma question porte sur le css dans les imports HMTL.
j'ai créé un menu pour remplacer " LayoutCatalogueTableItem " qui n'est pas trés esthétique .
Mes rollover sont en css ( la feuille de style est intégrée dans la page html) ( pas de javascript) et donc les liens vers mes images son dans le css , et j'ai pas l'impression que sage designer sache les lire.

tout en sachant que j'ai bien géré les images comme décrit dans le tuto suivant :
" https://sage-ecommerce.forumactif.com/tutoriels-sur-sage-designer-f4/gerer-les-images-dans-les-blocs-html-t28.htm "
Question

par **Admin** Lun 23 Aoû - 10:20

Bonjour,

Pour pouvoir vous aider, il nous faudrait pouvoir voir le site publié pour regarder le code hébergé, et un exemple extrait de votre CSS.
Car il peut y avoir une multitudes de causes...

Admin

par julien Lun 23 Aoû - 11:44

http://commerce.sage.com/YAD/

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>menu</title> <style type="text/css"> .sp{ list-style-type:none; margin:0; padding:0;} ul#menu li a{ display:block; width:192px; height:36px; background:url("Themes/Html/V2-yad/V2/btn_homme.jpg") no-repeat 0 0; border:0px; list-style-type:none; } ul#menu2 li a{ display:block; width:192px; height:36px; background:url("Themes/Html/V2-yad/V2/btn_garcon1.jpg") no-repeat 0 0; border:0px; list-style-type:none; } ul#menu3 li a{ display:block; width:192px; height:36px; background:url("Themes/Html/V2-yad/V2/btn_garcon2.jpg") no-repeat 0 0; border:0px; list-style-type:none; } ul#menu4 li a{ display:block; width:192px; height:36px; background:url("Themes/Html/V2-yad/V2/btn_fille.jpg") no-repeat 0 0; border:0px; list-style-type:none; } ul#menu5 li a{ display:block; width:192px; height:36px; background:url("Themes/Html/V2-yad/V2/btn_layette.jpg") no-repeat 0 0; border:0px; list-style-type:none; } ul#menu6 li a{ display:block; width:192px; height:36px; background:url("Themes/Html/V2-yad/V2/btn_montagne1.jpg") no-repeat 0 0; border:0px; list-style-type:none; } ul#menu7 li a{ display:block; width:192px; height:36px; background:url("Themes/Html/V2-yad/V2/btn_montagne2.jpg") no-repeat 0 0; border:0px; list-style-type:none; } #btn1 a:hover { border:0px ; background:url("Themes/Html/V2-yad/V2/btn_homme.jpg") no-repeat 0 -36px; } #btn2 a:hover { border:0px ; background:url("Themes/Html/V2-yad/V2/btn_garcon1.jpg") no-repeat 0 -36px; } #btn3 a:hover { border:0px ; background:url("Themes/Html/V2-yad/V2/btn_garcon2.jpg") no-repeat 0 -36px; } #btn4 a:hover { border:0px ; background:url("Themes/Html/V2-yad/V2/btn_fille.jpg") no-repeat 0 -36px; } #btn5 a:hover { border:0px ; background:url("Themes/Html/V2-yad/V2/btn_layette.jpg") no-repeat 0 -36px; } #btn6 a:hover { border:0px ; background:url("Themes/Html/V2-yad/V2/btn_montagne1.jpg") no-repeat 0 -36px; } #btn7 a:hover { border:0px ; background:url("Themes/Html/V2-yad/V2/btn_montagne2.jpg") no-repeat 0 -36px; } </style></head> <body> <ul id="menu" class="sp"><li id="btn1"><a href="http://commerce.sage.com/YAD/Famille/21/Mode%20Homme.aspx?"></a></li></ul> <ul id="menu2" class="sp"><li id="btn2"><a href="http://commerce.sage.com/YAD/Famille/21/Enfant%20gar%C3%A7on%203~2f8.aspx?"></a></li></ul> <ul id="menu3" class="sp"> <li id="btn3"><a href="http://commerce.sage.com/YAD/Famille/21/Gar%C3%A7on%2010-16.aspx?"></a></li></ul> <ul id="menu4" class="sp"><li id="btn4"><a href="http://commerce.sage.com/YAD/Famille/21/Miss%20Girly%203-8.aspx?"></a></li></ul> <ul id="menu5" class="sp"><li id="btn5"><a href="http://commerce.sage.com/YAD/Famille/21/Modlayette.aspx?"></a></li></ul> <ul id="menu6" class="sp"><li id="btn6"><a href="http://commerce.sage.com/YAD/Famille/21/Montagne%20adulte.aspx?"></a></li></ul> <ul id="menu7" class="sp"><li id="btn7"><a href="http://commerce.sage.com/YAD/Famille/21/Montagne%20Enfant.aspx?"></a></li></ul> </ul> </body> </html>

par julien Lun 23 Aoû - 11:54

le menu est donc censé apparaitre a gauche dans l'encart gris , ( j'ai qd meme laissé le composant en dessus )

par contre sous mozilla il me décale la colonne !

par **Admin** Lun 23 Aoû - 12:42

Sage Designer ne "recalcule" pas la source de "URL" des CSS incluses.
Il faut donc que vous y placiez un lien à partir de la racine.
Dans votre cas, ajouter : /yad/Upload/_sgx_ECommerce_v2/
devant les URL dans votre CSS.

Par exemple, pour une de vos classes :
ul#menu li a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/yad/Upload/_sgx_ECommerce_v2/Themes/Html/V2-yad/V2/btn_homme.jpg) no-repeat scroll 0 0;
border:0 none;
display:block;
height:36px;
list-style-type:none;
width:192px;
}

ça devrait marcher.

Admin.

par **Admin** Lun 23 Aoû - 12:48

Pour les pbs de déclages sous FireFox.. je vous renvoie à toute la littérature traitant de ce fameux sujet... qui est plutôt un sujet HTML/CSS qu'un sujet SAGE Designer.
Sujet trop vaste et qui peut s'étendre plus encore à Google Chrome, IE6, Opera et autres...
Vous comprendrez que nous ne pouvons pas ici traiter de l'intercompatiblité des navigateurs.. Il faudrait un forum entier pour ça !
A mois qu'il n'en n'exite déjà...!

Admin.

par julien Lun 23 Aoû - 14:37

a quoi correspond le -moz ?

-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding; Question

par julien Lun 23 Aoû - 15:06

ca fonctionne niquel !
Merci !

par Contenu sponsorisé

CSS dans les imports HTML

CSS dans les imports HTML

Re: CSS dans les imports HTML

Re: CSS dans les imports HTML

Re: CSS dans les imports HTML

Re: CSS dans les imports HTML

Re: CSS dans les imports HTML

Re: CSS dans les imports HTML

Re: CSS dans les imports HTML

Re: CSS dans les imports HTML