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

[VBzh]

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

[Szed]

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.

[VBzh]

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.

[Szed]

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 November 28, 2013 by Szed (see edit history)

[VBzh]

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

 

 

[Szed]

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

[VBzh]

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.

[Szed]

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. 

[VBzh]

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