Jump to content
VBzh

Liens login fixe dans le top au défilement de la page?

Recommended Posts

Bonjour à tous

C'est mon premier post sur ce forum car j'ai besoin d'aide, plusieurs jours que je pédale dans la semoule.. désolé si je ne post pas au bon endroit.

Voilà j'ai mis une barre dans le top qui reste fixe au défilement de la page, juste au-dessus du header.
Sur cette barre sont présents les liens "s'identifier" puis une fois loggé "mon compte" - "déconexion".

Comment faire pour que ces liens reste fixe sur cette même barre dans le top ?
Dois-je regarder dans blockuserinfo.css  ?

Dans : ... /themes/montheme/css/style/ mon theme.css

j'ai bien essayé de mettre   position : fixed; mais cela m'affiche une erreur.

( voir screenshot)
merci 

 

PS: je peux laisser l'url de ma boutique si besoin

post-731522-0-86308300-1385589949_thumb.jpg

Share this post


Link to post
Share on other sites

Votre barre est surement en position fixed, mais vos lien ne sont pas vraiment dans cette barre (html-ement parlant !).

Vous les positionnez dans la barre surement à l'aide de margin-top négatif ou de position absolute, exact ?

 

Du coup, en fixed, la barre reste, mais tout ce qui n'est pas dans cette barre va monter au scroll tout de même.

 

Laissez un lien de la boutique pour plus de précision.

Share this post


Link to post
Share on other sites
Votre barre est surement en position fixed,

 

oui ! elle est bien en position fixed

#bandeau_header {
  position:fixed;
  width: 100%;
  height: 34px;
  background:url(img/bg_fonds.png) repeat-x bottom left transparent;
  top: 0;
  left: 0;
  z-index: 5;
}

#header_logo {position:fixed; margin-top: 0 ; margin-bottom: 10px;}

#header.topheight, #header .topheight a { line-height: 28px;}
#header .topcolor a, #header_right   #currencies_block_top  p {color:#ffffff;}
#header .topcolor a:hover {color: #24458d;}

mais vos lien ne sont pas vraiment dans cette barre (html-ement parlant !).

Vous les positionnez dans la barre surement à l'aide de margin-top négatif ou de position absolute, exact ?

 

 

c'est là mon probleme, je ne saurais pas vous répondre puisque je ne sais pas où aller pour positionnez les liens.

 

dans blockpermanentlinks.css

/* block top links */
#header_user_info {
    float: right;
    font-size: 12px;
    height: 26px;
    margin-top: 0;
    padding: 0;
    text-align: right;
    width: 220px;	

	
}

#header_user_info a.logout {
  padding: 0 20px 0 0;


}

le lien de la boutique

 

Merci beaucoup d'avoir pris le temps de jeter un oeil.

Share this post


Link to post
Share on other sites

Alors, bien tout placé en HTML, cela serait galère a cause du système de HOOK de prestashop.
Par contre :

#header_user_info a.login, #header_user_info a.logout {
   position:fixed;
}

A mettre dans votre fichier CSS. Et votre lien "Se connecter"/"Se déconnecter", ne bougera plus également !

Edited by Szed (see edit history)

Share this post


Link to post
Share on other sites

Effectivement ça fonctionne en ajoutant cette ligne. Les liens sont bien fixe.

 

argh !  Par contre petit probleme que j'avais deja rencontrer..  "s'identifier" se décale vers la droite et une fois loggué les liens se mettent l'un sur l'autre...

 

voir screenshots

 

Capture.PNG

Capture2.PNG

 

Share this post


Link to post
Share on other sites

Il faut simplement travailler leur positionnement à l'aide de top/bottom/left/right.

Share this post


Link to post
Share on other sites

de cette façon il y a juste le lien "deconnexion" qui reste fixe, le lien "mon compte" lui l'est pas..

#header_user_info a.login, #header_user_info a.logout {position:fixed;}

"s'identifier" lui reste fixe mais est décalé vers la droite, je devrais pouvoir facilement le replacer en travaillant avec top/bottom/left/right.

 

 

Si par contre j'efface tout et qu'a la place je met ça comme ça:

#header_user_info {position:fixed;}

tout reste fixé comme il faut sauf que c'est centré au milieu et ca fais remonter le menu, le panier et le body.

Share this post


Link to post
Share on other sites

Oui, il faut adapter un peu dans tout les cas :)

Ca ne se fera pas en une simple ligne de css.

 

Partir sur : #header_user_info {position:fixed;} est peut être plus intéressant.

Il suffit juste d'ensuite le positionner à droite (par contre, en position:fixed, tu positionne par rapport à la largeur de ta page - mais vous pouvez l'aligner la ou vous souhaiter en lui spécifiant un width:620px), et de rabaisser le panier via un margin-top par exemple. 

  • Like 1

Share this post


Link to post
Share on other sites

et bien au final j'ai juste mis   #header_user_info {position:fixed;}

 

ça ma tout décalé, le menu, le panier, le slider  et tout du coup j'ai juste mis un margin-top partout ou c'etait décalé dans global.css et tout fonctionne ! 

 

reste plus qu'a aligné les liens a droite au dessus le panier et c'est bon.

 

Merci beaucoup pour ton soutien Szed

Share this post


Link to post
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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More