HTML + CSS : positionnement

Fermé
Reivax - 28 juil. 2003 à 18:57
 Eventreur - 13 nov. 2004 à 16:04
Salut !
Dans un site web, j'aurais aimé savoir comment je pouvais positionner très précisément un élément dans un page. Je m'explique : je souhaite qu'un menu s'affiche quand l'utilisateur passe le curseur à un endroit.
Le problème, c'est que selon la taille de la fonte utilisée par le browser, la zone sensible va bouger; j'aimerais que mon menu s'affiche en conséquent. Je ne peux donc pas utiliser la propriété "position:absolute" des feuilles de style.

En utilisant d'autres propriétés, comme "relative", cela marche mieux, mais un autre problème survient : le menu ne s'affiche pas en surrimpression, mais décale tous les autres éléments.

Si vous avez des idées, merci de m'aider !!

Reivax.

12 réponses

*up*
c'est pas assez clair ce que je dis ?
Siouplait, juste une réponse, même si c'est pour me dire "j'ai rien compris à ton problème..." Et j'essaierai de faire mieux...
0
Marden
Messages postés
1072
Date d'inscription
dimanche 11 février 2001
Statut
Membre
Dernière intervention
29 janvier 2006
208
30 juil. 2003 à 10:48
N'y aurait-il pas moyen du côté de l'attribut de style "z-index" ?
0
Non, j'ai pas réussi avec z-index non plus...
Mais quand je regardes des pages sur le web, les seules qui arrivent à contourner le problème sont celles qui fixent la taille des caractères, ce que je ne veut pas faire...
Toutes les autres ont le même décalage qui apparait si on change la taille.
Donc en attendant de trouver vraiment mieux, je vais faire comme si personne ne changeait cette taille...

Merci quand même !
0
non je comprends pas trop ton probleme.je ne comprends pas du moins, ce que la taille de la fonte viens faire dans ton probleme.si tu utilises position:absolute; left:30px; cela s'affichera tjs à 30 pixel du bords gauche que tu utlises helvetica ou autre choses ... non ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Oui, seulement imagine que je veux positionner cet objet de sorte que ses bordures correspondent pile à celles d'un autre objet...
Si on change la taille de la police, c'est la bordure de l'autre objet qui va bouger... Et donc celui que je positionne avec position:absolute n'est plus aligné...
0
d'accord mais position:relative ne fais pas l'affaire car tu as un probleme de surrimpression.Qu'es ce que tu entends par là.Un bout de ton code serait le bienvenu
0
ou donnes nous des pages web qui font ce que tu cherches à faire.
0
Bon, voilà un exemple explicite de ce qui ne va pas.
Merci de ta patience ^^

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script language="javascript">

function switch_menus(itemID,nbMenus)
{
var item;
for (var i=1;i<=nbMenus;i++) {
item = document.getElementById(i);
item.style.display="none";
}

item = document.getElementById(itemID);
item.style.display='';
}

function hide_menus(itemID,nbMenus)
{
var item;
for (var i=1;i<=nbMenus;i++) {
item = document.getElementById(i);
item.style.display="none";
}
}


</script>
</head>
<body>

<table width="500"><tr><td>
<table border="0" cellspacing="0">
<tr>
<td onMouseOver="switch_menus('1',2)" style="border-width:3px; border-style:solid; border-color:black;">Menu 1</td>
<td>
<div id="1" align="center" style="display:none; border-width:3px; border-style:solid; border-color:black; position: relative; top:0px; left:0px; background-color:red" onmouseout="hide_menus('1',2)">grmblmblm<br />Je fais tout decaler !!<br />Paaaaas bien !</div>
</td>
</tr>
<tr>
<td onMouseOver="switch_menus('2',2)" style="border-width:3px; border-style:solid; border-color:black;">Menu 2</td>
<td>
<div id="2" align="center" style="display:none; border-width:3px; border-style:solid; border-color:black; position: absolute; top:40px; left:70px; background-color:red" onmouseout="hide_menus('1',2)">
ploumploum<br />En augmentant la taille de la police, je suis plus la ou je devrais...<br />ploumploum
</div>
</td>
</tr>

</table></td>

<td>Salut, j'aimerais ne pas devoir être <i>trop</i>
décalé, moi...</td>
</tr></table>
</body>
</html>
0
bon, je crois voir ce que tu veux faire . ok le menu1 pose un probleme, il décale tout en effet. Mais le 2 est sympa il marche bien qu'es ce qui ne te plais pas ??
Que tu changes la taille de la fonte dans le div ploumploum ne change rien , il sera juste plus grand . ou alors j'ai rien compris
0
Non, je parlais de changer la taille de la police au niveau utilisateur, directement dans le browser. Pas dans le code.
(Dans Mozilla : View -> Text Zoom -> 200% par exemple)
0
bon j'ai bien compris ton probleme, mais hélas je ne vois de solution. Cela n'avance que moi, mais je suis pas sur en fait que ce soit possible.En effet, si on change la taille de la police, les dimensions de la cellule vont changer.Le probleme, c'est que les valeurs height et width de la cellule en question, sont des propriétées du navigateur et donc innaccessible . Même un document.getElementById("Menu1").getAttribute('height') ne retournera qu'un null a moins que ce soit toi qui le fixe avec une valeur 100 par example domage cela t'aurais permis d'avoir un point de repere par menu.Mais bon je peux me tromper.
Je serai toi, je n'utiliserai que des div.Le mix table et div n'est pas tres bon je pense.Autant à une epoque on disais de laisser tomber les frames pour les tableaux mais maintenant c'est les tableaux pour les div.En tout cas s'y tu y arrive tiens moi au courant ca m'interesse .
0
OK merci beaucoup, je penserais à toi...
Mais je pourrais pas me passer des tables, parce que je suis sensé intégrer ça, entre autre, à du code déjà existant... :(

++ !

Reivax
0
Ok, je vais etudier le code et voir si je peux te repondre. Dans tous les cas merci de ton aide
0
J'ai pu utiliser ton truc pour faire le menu mais je n'arrive pas a rendre les rubriques actives.
Si j'introduis un element (un lien par exemple) dans les sous menus ils disparaissent alors ke je n'ordonne aucunne action allant dans ce sens. ALors j'ai les menus sans pouvoir les utiliser.
0
Ah oui en effet...
Il semblerait que le "onmouseout" d'un élément considère comme "out" tout autre élément, y compris les éléments fils......

Quelqu'un a une idée pour contourner/résoudre ce problème ?
0
J'ai une petite idée de comment tu peux réussir a palier ton problème. Je vaiks peut être avoir l'ai ridicule mais il me semble que lorsque l'on fixe la taile de la police via un attribut CSS (style="font-size: taillepx" ici il me semble), même si l'internaute change sa police sur son navigateur celle ci ne sera pas redimmensionné grâce à la définition CSS.

Je suis à 80% certain de ce que j'avance. Essaye.
0