Discussion :

[BnA]

Bonjour!

J'essaie de positionner une "zone de login" dans mon header. Avec FireFox et ce code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
#login{
float:right;
position:relative;
height:100px;
width:320px;
top:50px;
right:30px;
overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;
}

Le positionnement est correct, mais foire totalement sous IE (le header est poussé vers le bas).

Pour vous faire une idée: http://dhabrelin.ovh.org/drupal/

Merci d'avance pour votre aide!

[DanielCosta]

Moi j'aurais fais un truc genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
machintruc
{
width:300px; /* largeur de ta zone*/
height:100px; /*hauteur de ta zone*/
 
top:100px; /*à 100px du haut*/
right:100px; /*et 100 de léa droite*/
 
position:absolute; /* :) */
 
background-color:red; /*juste pour te repérer*/
 
z-index:500 /*avant tout autre élément*/
}

[BnA]

Ouais mais ça ne convient pas, parce que si je le mets en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

position:absolute;

, mon <div> se positionne par rapport à la droite de la fenêtre, et pas par rapport à la droite de mon élément parent.

Ce qui fait que lorsqu'on redimenssionne la fenêtre, mon <div> se déplace aussi, et n'est plus à l'emplacement auquel il doit être...

[DanielCosta]

C'est pour ça que dans les normes d'accésibilitées au web il y a mis qu'un site doit pouvoir s'adapter à toutes les résolutions

[BnA]

Sauf que mes patrons ont décidé de faire un site fixed width pour minimum 1024.

Je n'ai donc pas le choix.

Et ta solution ne convient donc malheureusement pas...

Pas d'autres idées??

Merci d'avance!

[DanielCosta]

Ben tu peux faire aussi un design extensible pour au minimum 1024...

Donc reprend ma method et réfléchis :

Si on met un right:0px; c'est parsqu'on connais pas le leftxpx; car c'est un design extensible,

Maintenant que l'on sait le left:0px; tu fais la largeur du site - la largeur du div - l'espace de droite et tu as ton positionement

[BnA]

Jveux bien suivre ta méthode, mais elle ne marche pas: mon <div> se positionne par rapport à l'extrème droite de mon écran.

J'ai une résolution de 1440x900, et avec ton exemple, mon bloc se situe à 100px de la droite.

Jusque là, OK, mais si je redimensionne ma fenêtre, mon bloc restera à 100px de la droite, et donc, se superposera avec d'autres éléments (qu'il ne doit pas superposer).

Screenshots:

(top: 70px; right:265px)

1440x900:


1024x768:



Voilà, j'espère que tu vois le problème maintenant. Et j'ai beau retourner ta méthode dans tous les sens, je vois pas comment jpourrais arriver à ce que j'ai envie...

Je rappelle qu'avec le code que j'ai, ça marche sous FF mais pas sous IE. Voici un screen du pb sous IE.

Bref, je suis toujours preneur d'une idée qui me conviendrait.

[DanielCosta]

Ben tu peux faire aussi un design extensible pour au minimum 1024...

Donc reprend ma method et réfléchis :

Si on met un right:0px; c'est parsqu'on connais pas le leftxpx; car c'est un design extensible,

Maintenant que l'on sait le left:0px; tu fais la largeur du site - la largeur du div - l'espace de droite et tu as ton positionement

[Candygirl]

BnA, le positionnement absolu se fait raport au plus proche ancêtre positionné et, par défaut, la fenêtre du navigateur. D'après tes screen, c'est la fenêtre qui sert de référent chez toi.

Tu dois donner un position:relative à l'élément que tu souhaites voir comme référence pour ton positionnement absolu, typiquement le header ou le conteneur. De cette manière tes éléments seront positionnés raport au contenur ou au header et seront donc placés correctement lors d'un changement de résolution.

[BnA]

CandyGirl >> Parfait, ça marche comme je le voulais! Merci!!


DanielCosta >> J'ai pas l'habitude de ça, parce que developpez.net est un forum d'entraide, mais bon, faudrait voir à être un peu moins antipathique (et plus clair) dans tes explications, et pas prendre les gens pour des cons quand ils te disent que ça ne marche pas...