Conseils en CSS

[marty69]

Bonsoir,

J'aurais besoin d'un petit conseil en CSS n'étant pas du tout un flèche dans le domaine !

Voila, de base sur Prestashop le blockuserinfo (panier, prix, nombre de produits...) sont affichés de la même manière en ligne. Ex :
Panier : 3 produits 20€

Dans mon cas ce sont des infos que j'aimerais afficher en gros en haut à droite du site. De plus afin de pouvoir dissocier le "prix" du "Panier" et pouvoir l'afficher sous le Panier (cf.photo jointe) avec un style différent j'ai créé un ID (header_cart_price) différent que j'affecte uniquement au prix.

Ci dessous un extrait du code d'origine du blockuserinfo.tpl d'origine :

{if $cart_qties > 0}{$cart_qties}{/if}
{l s='product' mod='blockuserinfo'}
{l s='products' mod='blockuserinfo'}
{if $cart_qties > 0}{if $priceDisplay == 1}{convertPrice                 price=$cart->getOrderTotal(false, 4)}{else}{convertPrice price=$cart->getOrderTotal(true, 4)}{/if}{/if}
{l s='(empty)' mod='blockuserinfo'}

Qui devient après modification le code ci-dessous :

{if $cart_qties > 0}{$cart_qties}{/if}
{l s='product' mod='blockuserinfo'}
{l s='products' mod='blockuserinfo'}


{if $cart_qties > 0}{if $priceDisplay == 1}{convertPrice                 price=$cart->getOrderTotal(false, 4)}{else}{convertPrice price=$cart->getOrderTotal(true, 4)}{/if}{/if}
{l s='(empty)' mod='blockuserinfo'}

Dans mon CSS je rajoute donc la définition de header_cart_price qui à priori doit hériter de l'ID header_user. Après je ne maitrise pas du tout les subtilité de l'héritage et du CSS en général !

Ca donne le global.css suivant :

/* block top user information */
#header #header_user {
   background:transparent url(../img/bg_cart.jpg) no-repeat scroll left top;
   color:#D3CAAB;
   height:51px;
   left:50%;
   margin-left:205px;
   position:absolute;
   text-align:right;
   top:27px;
   width:228px;
}
#header_user p { color: D3CAAB; }
#header_user span { font-weight: bold; }
#header_user ul { /*margin-top: 3em;*/}
#header_user li {
   float: right;
   margin-left: 0.5em;
   white-space: nowrap;
}
#header_user #shopping_cart, #header_user #your_account { font-size: 2em; line-height: 2em; }

#header_user #shopping_cart a, #header_user #your_account a {
   color:#D3CAAB;
   text-decoration: none;
}

#header_user #header_cart_price {font-size: 20px; padding-left: 20px;}

#header_user #shopping_cart span.ajax_cart_product_txt, #header_user #shopping_cart span.ajax_cart_product_txt_s {
   font-size: 1.1em;
   position:relative;
   top:-15px;
   padding-right:0.3em;
}

#header_user #shopping_cart span.ajax_cart_quantity { font-size:2em; padding-right:5px;}
#header_user #shopping_cart span.ajax_cart_no_product { padding-right:30px;}

#header_user #your_account a { background-image: url('../img/icon/my-account.gif'); }

Malheureusement rien y fait. J'ai bien mon prix qui s'affiche à la taille voulue mais il s'affiche à gauche du panier et je n'arrive pas à le déplacer ou je veux (en utilisant les padding) j'ai l'impression qu'il n'est pas solidaire du "bloc" panier et s'affiche donc automatiquement dessous mais sans pouvoir le rapprocher au max du panier juste au dessus.

Dans les photos jointes :
Photo 1 : ce que j'ai effectivement
Photo 2 : ce que j'aimerais obtenir

J'ai essayé de figurer en cadre rouge le découpage des blocs que je visualise avec Firebug (et ce qu'il me semble que je devrai obtenir pour arriver à la photo 2)

Merci pour vos conseils