Jump to content

[Résolu]Alignement du blockuserinfo ds l'entête

Golgo

By Golgo
in Modules et thèmes gratuits

 Share

Recommended Posts

Golgo Newbie

Golgo

Posted
Posted

Salut,

 

Je planche sur ce problème depuis 3h et je n'arrive à rien :

voici l'url de mon site: http://www.sa-s.be/

J'aimerai ajuster l'alignement des informations : "Bienvenue Nom+prénom" et "Votre compte" en bas à droite sur ma bannière, là où j'ai éclaircis cette dernière afin de mieux visualiser l'affichage.

 

voici le code de mon CSS (blockuserinfo) :

 

/*#header_right #header_user {
float: right;
width: 535px;
text-align: right;
margin-right: 6px
}*/
#header_user p { color: #595a5e }
#header_user span { font-weight: bold }
#header_user ul { margin-top: 0.3em }
#header_user li {
float: right;
margin-left: 0.5em;
padding-top: 130px;
white-space: nowrap
}
#header_user #shopping_cart, #header_user #your_account { font-size: 0.9em }
#header_user li#your_account { margin-left: 0 }
#header_user #shopping_cart a, #header_user #your_account a {
background-repeat: no-repeat;
background-position: top left;
padding: 2px 0 4px 26px;
height: 20px;
text-decoration: none
}
#header_user #shopping_cart a { background-image: url('../../../img/icon/cart.gif') }
#header_user #your_account a {
background-image: url('../../../img/icon/my-account.gif')}

 

et mon header.php afin que vous voyez cmt j'ai intégrer ma bannière:

 

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
{if !$content_only}
 {if isset($restricted_country_mode) && $restricted_country_mode}
 <div id="restricted-country">
  <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
 </div>
 {/if}
 <div id="page">

 <!-- Header -->
 <div id="header">

<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} />
<div id="banniere">
<a href="/img/banniere.png">
 {$HOOK_TOP}
 </a>
 </div>
 </a>

 

j'ai mis dans le BO un logo de 1px transparent afin de laisser le code d'origine. (je me base sur le thème d'origine prestashop)

 

Merci de votre aide.

 

edit : mon code global.css pour l'affichage de la bannière:

 

/* global layout */
#banniere {
	background: transparent url('../img/banniere.png') no-repeat top left;
	float: left;
	height:150px;  /*XXX est la hauteur de votre bannière. */
	width: 981px;
}
/*#banniere a {
	text-decoration: none;
	display: block;
	height: 100%;
	width: 100%}*/
#page {
width: 982px;
margin: 0 auto 2px auto;
text-align: left
}
/*#header_logo {
background: transparent url('../img/banniere.png');
float: left;
height: 150px;
width: 981px;
display: block
}
img.logo {
float: left;
margin-top: 0.5em;
font-size: 2em;
font-weight: bold
}*/
/*#header_right {
float: left;
margin-bottom: 15px;
width: 783px;
text-align: right
}*/

Link to comment
Share on other sites
Stéphane Chonez Newbie

Stéphane Chonez

Posted
Posted

bonjour,

 

j'ai fais quelques essais grâce à Firebug (qu'il faut absolument installer quand on développe un projet ;-))

 

voici une proposition qui fonctionne chez moi !

 

code à remplacer

 

#header_user p { color: #595a5e; float:right; }
#header_user span { font-weight: bold }
#header_user ul { margin:0; padding:0; float:right; }
#header_user li {
float: right;
margin:0;
padding:0;
white-space: nowrap
}

 

ensuite tu ajoute un style pour #header_user que tu ajusteras avec un margin-top pour placer le bloc dans la zone blanche.

 

#header_user {margin-top:130px;}

 

par contre il m'a fallut supprimer un succession de balises <p></p> entre

<ul id="header_nav">

et

<p id="header_user_info">

 

à vérifier dans le code.

Link to comment
Share on other sites
Golgo Newbie

Golgo

Posted
  • Author
Posted

Bien sur que j'utilise firebug, sinon je n'aurais su faire déjà tout ca ;)

 

J'ai bien fait tes modifs, en effet, j'ai su descendre ds le bas de ma bannière le message de bienvenue + nom - prénom.

Je me suis dis que un margin-left en plus de ton code 

#header_user {margin-top:130px;}

, afin de regroupé avec "mon compte", a eu pour effet de le remettre à sa place initiale (en haut à gauche)

Qqch de bizarre: j'ai supprimé ma modif (margin-left) et là, le message ne redescend plus, même après avoir supprimé les fichiers de la compil smarty

 

Merci de ton attention en tt cas.

Link to comment
Share on other sites
Stéphane Chonez Newbie

Stéphane Chonez

Posted
Posted

je regarde en direct là et tu ajoutes à blockuserinfo.css (ligne 2) un margin-top :

 

 

 

#header_right #header_user {

 

 

float: right;

margin-right: 6px;

text-align: right;

width: 535px;

margin-top:130px;

}

 

ensuite tu supprime le margin-top à la balise li de blockuserinfo.css (ligne 11)

 

#header_user li {

float: right;

white-space: nowrap;

}

 

 

ça devrait fonctionner ;-)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...