Bonjour à tous ,

J'ai besoin d'aide : je m'arrache les cheveux (que je n'ai pas d ailleurs) depuis des jours sur le header de mes pages dont j aimerais qu'il ressemble exactement à ça :



Le problème : mon header aujourd'hui il ressemble à ça :






Je voudrais donc :
- centrer le logo
- baisser lepanier,
- deplacer les liens et les drapeaux/currencies
- rajouter un texte à droite

Je ne sais pas quoi faire, j'ai essayé de rajouter des div pour les différents blocs mais je patauge...

Voila le header.tpl :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
<!-- Header -->
<div id="header">
<div class="page">
<div class="logo"><a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
<img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
</a></div>
<div id="header_right">
{$HOOK_TOP}
</div>
</div>
</div>


et le global.css :


Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* global layout #bab8b1 */
#header {
background: url('../img/header2.gif') no-repeat center ;
height: 150px;
margin-bottom: 20px
}
 
 
.page {
width: 900px;
margin: 0 auto;
text-align: left
}
#header_logo {
float: left;
width: 264px;
display:block
}
img.logo {
float: left;
font-size: 2em;
font-weight: bold
}
#header_right {
float: left;
margin-bottom: 15px;
text-align: right;
padding-left: 15px;
width: 610px;
}

Merci à tous.