Bloc "information utilisateur" flottant

[Arnaud06]

BOnjour,

J'ai un petit problème avec le bloc "information utilisateur", alors que je l'ai greffé dans le header, et que cela s'emboite parfaitement dans ma bannière sur mon écran "16/9" de mon pc portable, sur le 4/3 de mon bureau, il glisse sous la bannière (cf photo). Savez-vous comme le fixer en haut ?

Merci bcp

Arnaud

[Florent]

Salut,

as-tu trouvé la solution à ton problème ?

Merci

[SotEW]

Sa solution, ça a été de faire appel à Atch pour lui créer un nouveau design (http://www.jcpweb.fr)

Ce qui se passe dans ce site, c'est un float:left qui fait passer à la ligne dû à un ou plusieurs pixels en trop (le navigateur web n'ayant pas la place de positionner le bloc. il s'agit probablement ici de IE 6, qui confond et additionne les padding avec les margin, DONC il passe à la ligne.

Quel est ton problème, Florent ?

EDIT : Atch me murmure dans l'oreillette que ça pourrais aussi être l'image trop large qui dépasse et fait passer à la ligne.

[Florent]

Salut SotEW,

ça tombe bien que ce soit toi qui me réponde.
En fait, j'ai utilisé ton super module "Sotew's adds" pour positionner ma bannière (Haut de Page). Par contre, j'aurais voulu y intégrer le bloc user (compte + login) et le bloc langues.

Je pense avoir trouver une solution, peut-être pas très propre mais efficace. J'ai ajouté un margin-top négatif au #header, et ça marche.

Ai-je bien fait ?

[SotEW]

hmmm, une façon plus "propre" serait de mettre l'image en fond du body (ou de page) à l'aide du css avec un no-repeat, et donc de ne pas se servir de mon module, mais du fichier global.css


Plus de précision : supposons que tu as une image que je vais nommée "banniere.png". Place là dans le dossier /themes/tontheme/img/


ensuite tu ouvres ton fichier global.css, et tu édites aux alentours de la ligne 182 :

/* global layout */
#page {
   width: 980px;
   margin: 0 auto 2px auto;
   text-align:left;
}

à remplacer par :

/* global layout */
#page {
   background: transparent url(../img/banniere.png) no-repeat;
   width: 980px;
   margin: 0 auto 2px auto;
   text-align:left;
}

ça devrait être un peu mieux. (fait juste attention à la largeur de cette image)

[Florent]

Re,

Merci de me répondre aussi vite et aussi clairement.

Alors, j'ai fait comme tu as dit, sans utiliser ton module. Mais, il faut quand même que j'applique un margin-top positif au #header, pour que ma bannière ne glisse pas sous les colonnes Droite et Gauche.

[SotEW]

non, il faut que tu agrandisse le header afin qu'il dispose de toute la place nécessaire à l'affichage de ta bannière.

Regarde, toujours dans ton global.css, la section #header, tu dois avoir un height trop petit.

[Florent]

Alors, pour info, j'utilise le thème d'origine.

Je n'ai pas de height dans le #header. En l'ajoutant, ça décale complètement mes blocs langues et user vers le haut, qui pour info sont placés dans le Top.

[SotEW]

Tu as une boutique en ligne sur laquelle je pourrais jeter un oeil ?