Rechercher : dans
Par :

HTML + CSS : positionnement

Dernière réponse le 13 nov 2004 à 16:04:01 Reivax, le 28 jui 2003 à 18:57:31 
 Signaler ce message aux modérateurs

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.

Meilleures réponses pour « HTML + CSS : positionnement » dans :
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beaux, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...

2

Reivax, le 29 jui 2003 à 18:45:13

*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...

Répondre à Reivax

Marden, le 30 jui 2003 à 10:48:52

N'y aurait-il pas moyen du côté de l'attribut de style "z-index" ?

Répondre à Marden

3

Reivax, le 30 jui 2003 à 13:33:32

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 !

Répondre à Reivax

4

ted33, le 30 jui 2003 à 13:39:06

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 ?

Répondre à ted33

5

Reivax, le 30 jui 2003 à 13:48:50

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é...

Répondre à Reivax

6

ted33, le 30 jui 2003 à 14:35:48

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

Répondre à ted33

7

ted33, le 30 jui 2003 à 14:42:28

Ou donnes nous des pages web qui font ce que tu cherches à faire.

Répondre à ted33

8

Reivax, le 30 jui 2003 à 15:11:32

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>

Répondre à Reivax

9

ted33, le 30 jui 2003 à 15:28:13

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

Répondre à ted33

10

Reivax, le 30 jui 2003 à 15:34:07

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)

Répondre à Reivax

11

ted33, le 30 jui 2003 à 16:21:03

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 .

Répondre à ted33

12

Reivax, le 30 jui 2003 à 16:24:38

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

Répondre à Reivax

13

Willy, le 30 jui 2003 à 16:38:38

Ok, je vais etudier le code et voir si je peux te repondre. Dans tous les cas merci de ton aide

Répondre à Willy

14

Willy, le 31 jui 2003 à 14:01:45

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.

Répondre à Willy

15

Reivax, le 31 jui 2003 à 17:14:03

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 ?

Répondre à Reivax

16

 Eventreur, le 13 nov 2004 à 16:04:01

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.

Répondre à Eventreur
Collection CommentÇaMarche.net