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