Flux rss
Ils ont besoin de votre aide
Collection CommentÇaMarche.net
Rechercher : dans
Par : Mots clés Nom d'utilisateur
Messages sans réponse

HTML + CSS : positionnement

Reivax, le lundi 28 juillet 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 »
Posez votre question Répondre

1

Reivax, le mardi 29 juillet 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

2

Marden, le mercredi 30 juillet 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 mercredi 30 juillet 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 mercredi 30 juillet 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 mercredi 30 juillet 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 mercredi 30 juillet 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 mercredi 30 juillet 2003 à 14:42:28

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

   
Répondre à ted33

8

Reivax, le mercredi 30 juillet 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 mercredi 30 juillet 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 mercredi 30 juillet 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 mercredi 30 juillet 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 mercredi 30 juillet 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 mercredi 30 juillet 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 jeudi 31 juillet 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 jeudi 31 juillet 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 samedi 13 novembre 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
Posez votre question Répondre
Positionnement d'image en css.. Bonjour a tous, Alors voila j'ai tout simplement un problèeme de positionnement de mon image qui devrait être placer en haut au centre de ma page mais reste tout de même en haut a gauche... Voila mon code css : .baniere { background:... www.commentcamarche.net/forum/affich-2654520-positionnement-d-image-en-css
[CSS] positionnement d'une image bonjour a tous voila je suis en train de réaliser une présentation de page html avec les css j'ai pour commencer une bande sur toute la largeur ensuite en dessous une bande composé de 2 parties de meme longueur en dessous j'ai une colonne a gauche... www.commentcamarche.net/forum/affich-1822388-css-positionnement-d-une-image
Css / Positionner Du Texte bonjour, J'ai un probleme avec une page HTML avec CSS. J'ai une image d'arrière-plan, je dois positionner du texte precisement dans cette image, a un endroit défini. J'ai utilisé la propriété css "margin". Mais lorsque j'ouvre ma page html dans un... www.commentcamarche.net/forum/affich-1031307-css-positionner-du-texte
Placement image sur autre image - html/css (Résolu)Bonjour, j'aimerais savoir comment fait on pour positionner une image (un bouton par exemple réalisé sous photoshop) sur une autre image (en html/css). Concretement : j'ai réalisé une feuille de papier sous photoshop et j'aimerais placer en haut à... www.commentcamarche.net/forum/affich-4830813-placement-image-sur-autre-image-html-css
[design]extensible(HTML, CSS...)Salut :) Je viens d'apprendre l'HTML, le PHP et le CSS et je suis en train de créer un site. Je n'ai qu'un seul problème : je n'arrive pas à faire un design extensible (un design qui s'adapte à la taille de l'écran quoi^^). Voila merci d'avance pour... www.commentcamarche.net/forum/affich-1815743-design-extensible-html-css
[HTML&CSS]Probleme d'ecart entre imageBonjour a tous, Alors voila j'ai un petit problème mais qui m'embête quand même. Comme vous pouvez le voir sur l'aperçu mes images de menu on un espace entre elles, serait il possible de l'enlever que ce soit en CSS ou en HTML... www.commentcamarche.net/forum/affich-3117562-html-css-probleme-d-ecart-entre-image
Résultats pour HTML + CSS : positionnement
Positionner des éléments grâce aux CSSIl 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... www.commentcamarche.net/contents/css/cssposition.php3
CSS - Les couleursLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de... www.commentcamarche.net/contents/css/css-couleurs.php3
Déclaration d'une feuille de style (CSS)Dé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... www.commentcamarche.net/contents/css/cssimplant.php3
Résultats pour HTML + CSS : positionnement