css pour mon header dans prestashop

[galhal]

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 :

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 :

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.

[Emyleen]

Bonjour!

Voila un exemple d'organisation, essaye de le modifier à ta sauce et dis moi si ça fonctionne

Code css :

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
31
* {
	position: relative;
	margin: 0;
	padding: 0;
}
#page {
	width: 900px;
	margin: 0 auto;
	text-align: left
}
#header {
	background: url('../img/header2.gif') no-repeat center ;
	height: 150px;
	margin-bottom: 20px
}
#barreHaut {
	height: 25px;
	width: 900px;
}
#menu,
#logo,
#panier {
	float: left;
	width: 300px;
}
#menu {
}
#logo {
}
#panier{
}

Code html :

1
2
3
4
5
6
7
8
<div id="page">
        <div id="header">
            <div id="barreHaut"></div>
            <div id="menu"></div>
            <div id="logo"></div>
            <div id="panier"></div>
        </div>
    </div>