Panier - Total

[mrlele]

Bonjour

Je souhaite aligner Panier et "nombre d article" sur la meme ligne et ajouter une image alignee au texte

Au niveau CSS :

- J ai tente de deplacer le h4 du heading mais cela deplace vers le bas O article...
- J ai tente l image en fond dans le css au niveau du h4, cela s affiche sous le texte
- J ai ensuite ajoute un float:left pour aligner le h4 et le 0 article, mais je ne suis pas sur que cela soit propre au niveau du code

- J ai ajoute une image dans le cart.tpl pour ajouter une image, quelle balise me conseillez vous pour le php ? j ai essaye d integrer l image dans un h4 et egalement dans un td

Je pense creer un div dans le cart.tpl pour aligner tout correctement et positionner les elements dans le Css

je souhaite que cela ressemble a B


photo libre

Merci pour votre aide

[bminghet]

Bonjour,
Dans ton fichier cart.tpl
Remplacer

Code: Tout sélectionner

<div class="heading">
    <h4><?php echo $heading_title; ?></h4>
    <a><span id="cart-total"><?php echo $text_items; ?></span></a></div>

par

Code: Tout sélectionner

<div class="heading">
    <img src="catalog/view/theme/default/image/panier.jpg" style="float:left; margin-left:-10px;"/><h4><?php echo $heading_title; ?>
    <a><span id="cart-total"><?php echo $text_items; ?></span></a></h4></div>

Dans ta CSS, il faut auster "margin-top" et ajouter "min-width" pour éviter le report en seconde ligne.

Code: Tout sélectionner

#header #cart .heading h4 {
   color: #333333;
   font-size: 15px;
   font-weight: bold;
   margin-top: 18px;
   margin-bottom: 3px;
   min-width: 220px;
}

Avec cette image de base

panier.jpg (10.6 Kio) Vu 6265 fois

le résultat est

Capture-panier.PNG (16 Kio) Vu 6265 fois

[mrlele]

Merci bminghet pour cette reponse,

Je suis sur le code depuis tout a l heure, ca ne fonctionne pas mieux
l image s affiche mais n est pas centree par rapport au texte et le reste 0 article s affiche dessous, je pense que cela doit venir d un element float

[bminghet]

Peux tu m'envoyer l'url de ton site (en MP si tu souhaites) que je vois ça de plus près et me confirmer que tu a bien mis l'intégralité du code

Code: Tout sélectionner

<div class="heading">
    <img src="catalog/view/theme/default/image/panier.jpg" style="float:left; margin-left:-10px;"/><h4><?php echo $heading_title; ?>
    <a><span id="cart-total"><?php echo $text_items; ?></span></a></h4></div>

Etant donnée que la modification est liée à la CSS, il est possible que le cache ne s'actualise pas tout de suite sur certains serveurs.
Je dois vérifier
Merci.

[villagedefrance]

Salut à tous,

Juste une petite note pour bminghet :
Dans le code ci-dessus, ta balise <img> n'a pas de alt="". Cela te retournera une erreur de validation html sur toutes tes pages.

Mrlele, j'ai pas vraiment eu le temps de faire des tests, mais il semblerait que le problème d'affichage est principalement lié à ta feuille de style.

Deux petites choses a vérifier pour trouver les bons paramétrages dans la CSS:
- comparer avec la CSS par défaut.
- visualiser dans des navigateurs différent (Internet Explorer sera toujours le plus difficile a ajuster correctement)

Les balises width, height, min-width, min-height, margin et padding, sont souvent les plus dures a ajuster. ... surtout padding parce que IE l'interprète différement des autres.

Bon courage

[mrlele]

Merci, je suis en train de bosser dessus, je vais voir pour creer 2 div : 1 pour l image et votre panier l autre div pour 0 articles

[mrlele]

http://www.plaques.thescooterparts.com/

Le serveur semble plutot reactif, je me remets sur le code en esperant boucler ca

[mrlele]

Ca s ameliore doucement, il faut maintenant aligner les elements vers le bas

[bminghet]

ta balise <img> n'a pas de alt="".

Oups !

Ca s ameliore doucement, il faut maintenant aligner les elements vers le bas

N'oublie pas les conseils de villagedefrance
Si tu actives l'affichage de compatibilité sur ie, tu remarqueras que tout est décalé
Tu dois modifier ie6.css et ie7.css

[mrlele]

l affichage me semble pas si mal mais je n arrive pas a aligner l image, votre panier et 0 articles

si qq un a une idee lumineuse je suis preneur

[LeorLindel]

Si tu utilises FireFox comme navigateur, je te conseille de charger l'add-on WebDeveloper dont tu pourras trouver le lien dans ce sujet.
Cet add-on est extrêmement pratique pour visualiser les styles appliqués aux pages (entre autre).

Je te le recommande vivement.

[mrlele]

Bonjour

J utilise chrome et Firebug

[mrlele]

ca avance, ca avance

J ai utilise une balise inline dans mon Css pour aligner "Panier" et 0 article(s) - €0,00€ pour eviter de toucher au pages Php