[Résolu] Problème de z-index et bannière

[julkido]

Bonjour à tous,

 

Je suis nouveau sur ce forum puisque je débute sous prestashop (1.5.4).

 

Je suis en train de personnaliser le thème de base de magento que j'ai au préalable modifié (icones, couleurs etc).

 

Le web-designer m'a fourni une bannière à intégrer au template, au départ je l'avais intégrée rapidement à l'aide d'un background-image sur la div header. J'avais réussi à placer par dessus la recherche rapide et le bloc panier/connexion.

 

Aujourd'hui j'ai voulu modifier tout ça en intégrant proprement l'image au fichier header.tpl et en rajoutant un lien vers le home dessus. Le menu de navigation transparent s'est placé au dessus à l'aide des z-index mais impossible de replacer la barre de recherche rapide et le bloc panier au dessus de l'image. Pourtant je pense avoir spécifier le type de positionnement et le z-index à chaque div mais rien n'y fait ils se placent sous la div header.

 

Au niveau du code j'ai ça dans header.tpl:

 

<div id="page" class="container_9 clearfix">
  <!-- Header -->
  <div id="header" class="grid_9 alpha omega">
<a id="header_image" href="{$base_dir}" title="Accueil {$shop_name|escape:'htmlall':'UTF-8'}">
 <img class="image" src="{$base_dir}/themes/placeRonde/img/Bandeau.png" alt="{$shop_name|escape:'htmlall':'UTF-8'}" />
</a>
<div id="header_right" class="grid_6 omega">
 {$HOOK_TOP}
</div>
  </div>

 

et au niveau du css, dans global.css :

***************************
 HEADER
************************************************************************************************ */
#header {
position:relative;
height:294px;
margin-top:10px;
}
#header_image .image{
position:relative;
height:294px;
width:980px;
z-index:0;
}
#header_right {
position:relative;
float: right
}

 

dans blocksearch.css :

 

/* block top search */
#search_block_top {
position:absolute;
top:16px;
left:0;
z-index:10;
}

 

et dans blockuserinfo.css :

 

#header_right #header_user {
position:absolute;
clear:both;
top:220px;
right:0px;
z-index:10;
}

 

Voila, n'hésitez pas à me poser des questions s'il vous manque des informations.

 

Mêmes quelques pistes m'aideraient grandement car là je bloque après plusieurs heures passées dans firebug.

 

Merci d'avance.

Edited April 19, 2013 by julkido (see edit history)

[julkido]

Ok je viens de résoudre le problème, comme quoi la nuit porte conseil. J'ai ajouté des margin-top négatifs et miracle tout s'est placé correctement.

[Soyons Solidaire]

Bonjour julkido

 

Ravi que tu es arrivée à régler ton problème, peux tu nous éclairer, ou as tu ajouter des margin-top négatifs ça nous servira tous, surtout une personne débutante comme moi. Merci par avance

 

Amitiés

Edited April 21, 2013 by SMOK KYF (see edit history)