ajouter une image dans le header

[phil3001]

bonjour à tous

j'aimerai rajouter une petite image dans mon header. j'ai donc ouvert header.tpl et y ai rajouté

dans le menu header

ensuite dans le css je rajoute une ligne #phone etc....

le soucis c'est que lorsque j'essai de deplacer mon image c'est tout le header qui se deplace

comment faire pour placer ma petite image ou je veux ?

merci d'avance

<!-- Header -->






                   {$HOOK_TOP}

[pixy-studio]

Bonjour phil3001,

Tu ne donnes pas assez d'infos pour la résolution de ton problème.
Pourquoi avoir mis le bloc header dans un bloc phone, lui-même mis dans un bloc topheader ?

Le plus simple serait peut-être d'intégrer ton image à l'intérieur du bloc header.
Mais à quel endroit doit elle apparaitre ?
Quel positionnement css tu utilises ?

[Maury Girard]

Bonjour Phil3001


Si vous devez ajouter un logo (ou image ) dans le Header
il faut donc ajouter dans le header.tpl au niveau de cette portion de code

<!-- Header -->



                   {$HOOK_TOP}

La future DIV est rattaché à la futur image qui va faire 967 x 258 (coté visuel boutique)
Dans mon cas, je désire intégrer une bannière cliquable juste en dessous des blocs
Devises, langues , Contact, Plan du site, .....

Par défaut , Prestashop fourni un logo
visible dans le header.tpl ainsi

Je vire donc cette potion de code
pour ajouter au final ma DIV nommé banniere

            <!-- Header -->


                   {$HOOK_TOP}

 

[phil3001]

Merci pour la réponse je vais essayer

en faites sinon je vous expose totalement le problème

mon header aura la meme couleur que le fond générale donc il n'y aura aucune image

je veux simplement y integrer un numero de téléphone en jpeg

j'y arrive mais le soucis c'est comme montré dans mon code plus haut, tout le header se déplace

merci encore de votre aide

[phil3001]

Bonjour à tous

bon je n'y arrive toujours pas

je met ci joint une image de ce que j'aimerai faire

pour résumé :

je veux simplement pouvoir mettre une image (ici le numéro de téléphone) n'importe ou dans mon header

merci d'avance

[pixy-studio]

Salut phil3301,

Plusieurs solutions peuvent être envisagées.

Tu peux créer un bloc entre le logo et le header-right. Pour ça il faut réduire la largeur du header-right, mettre une largeur à ton nouveau bloc et le faire flotter à gauche.

Tu peux intégrer ton image dans le header-right aussi.

   {$HOOK_TOP}

téléphone

démo

Dans l'exemple, on voit que le bloc téléphone vient se placer contre le bloc #header_user (utilise firebug pour le voir).
Il est donc le plus à droite qu'il peut. Si je veux le décaler à droite, je devrais réduire la largeur du header_user.

Ce n'est qu'un exemple, sur ton image le bloc recherche à un positionnement différent, n'hésites pas à montrer le html et css que tu as fait pour cette partie.

EDIT : c'est en fait la même solution que celle que te propose Maury, la sienne étant plus aboutie...

[daniel3000]

Bonjour Phil,

après avoir vu ton objectif, le mieux serait de passer par une technique que je maitrise parfaitement: la SFDD
(Solution Facile De Débutant).

C'est moins abouti que ce qui t'a été proposé précédemment, mais dans ton cas, ça peut fonctionner parfaitement sans avoir à ouvrir les tpl ou css.

ETAPE 1: tu crée sur ton photofiltre préféré le dessin de ton header complet, tel que tu le souhaites, sur une largeur de 980 px (largeur totale de la page), avec une hauteur de ton choix ( 200 par exemple).
pour reprendre ton exemple, tu inclus directement à l'intérieur de ton dessin ton logo à gauche, ton image téléphone à droite, tu fais un fond si ça te dis, etc.... Prévois juste de laisser une place aux différentes infos presteshop qui vont ensuite venir sur le header (Langues, devises, etc...).
ça y est, le bandeau tel qu'il sortira sur ta page est fait. garde le fichier à portée de main

ETAPE 2: tu intègres ton bandeau dans ton site prestashop par le back office
préférences > apparence > logo de l'entête "parcourir"...
contrairement aux apparences, ce n'est pas seulement le "logo" qui pet être chargé ici, mais le bandeau complet si on est en largeur 980px.

Voilà pour la SFDD. Bonne continuation.

[Maury Girard]

Daniel3000
C'est une échappatoire,
mais le problème est que certains navigateur Web ne prennent pas a compte ceci
et il risque d'y avoir un beau pavé mal redimensionné, sur certains navigateur donc il faut vraimment paramétrer ceci coté .Css ou Tpl

[daniel3000]

Tout à fait d'accord sur le terme "d'échappatoire", et présenté comme tel (SFDD), la simplicité était la motivation majeure.

Cependant, dans le cas présent, il me semblait que les paramètres d'origine du globlal CSS (float left pour "logo", marges g et d à 0) étaient conformes à l'objectif, pourvu que l'on contrôle la largeur du logo importé via le BO à 980 px (=largeur de la page) on tombait nécessairement juste. ???

Il est vrai que dans ma solution une anormalité persiste: le logo importé, de par sa taille, empiète sur l'emplacement de "header right" et s'y superpose... peut-être troublant pour certains navigateurs.
... et pour résoudre cette anormalité, là encore retour vers les CSS et TPL...