Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2014 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  <DIV> : problème de position absolue et relative [résolu]

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

<DIV> : problème de position absolue et relative [résolu]

n°204647
smaragdus
whores, drugs & J.S. Bach
Posté le 29-08-2002 à 15:19:49  profilanswer
 

Voila, j'ai fait un effet de transition d'images (avec fadein/fadeout) mais j'ai un problème :
 
Dams ma page, j'ai :
* une grande image principale
* plusieurs petites images (des boutons pour faire simple) qui apparaissent au dessus selon la position du pointeur. Chaque image est donc dans un calque.
 
j'ai utilisé des calques (avec DIV) en position absolue pour placer mes boutons mais c'est pas top si je veux centrer l'image principale. J'aimerais pouvoir placer mes boutons relativement à l'image principale d'où problème.
 
Comment procéder ? Utiliser Javascript pour calculer les positions absolues (comment ?) ? Découper les images dans des tableaux (beuark) ?  Faire carremment un applet java plutôt qu'une solution magouillée javascript+html ?
 
(à noter : je prévois de tout générer en PHP par la suite)
 
Merci d'avance pour vos réponses et vos avis.


Message édité par smaragdus le 29-08-2002 à 18:43:39
mood
Publicité
Posté le 29-08-2002 à 15:19:49  profilanswer
 

n°204660
gm_superst​ar
Appelez-moi Super
Posté le 29-08-2002 à 15:27:17  profilanswer
 

Le but c'est que les petites images se déplacent en suivant le curseur :??:
 
J'ai pas tout compris en fait...

n°204694
smaragdus
whores, drugs & J.S. Bach
Posté le 29-08-2002 à 15:50:39  profilanswer
 

gm_superstar a écrit a écrit :

Le but c'est que les petites images se déplacent en suivant le curseur :??:
 
J'ai pas tout compris en fait...




 
Non. Les positions sont fixes (puisque les calques sont en position absolue) mais les boutons apparaissent lorsque le pointeur (de la souris bien entendu) passe au dessus (utilisation des onMouseOver et OnMouseOut)

n°204718
gm_superst​ar
Appelez-moi Super
Posté le 29-08-2002 à 16:15:56  profilanswer
 

Bon si je résume, tu as plein de petites images et tu veux mettre une grande image dessous. Comme ça :

+--+ +--+ +--+ +--+ +--+ +--+
|  | |  | |  | |  | |  | |  |
+--+ +--+ +--+ +--+ +--+ +--+
+---------------------------+
|                           |
|                           |
|                           |
|                           |
+---------------------------+


 
Le tout centré dans la page.
 
Les images c'est comme du texte, donc on les centre avec text-align: center;
 
donc ce que tu peux faire c'est créer un premier <div> qui fait 100% de la largeur et qui a la propriété text-align: center;
 
Ensuite, dans ce <div> tu crées un deuxième <div> qui fait lui aussi 100% de la largeur et dans lequel tu mets tes petites images.
Après ce deuxième <div> tu mets la grande image.
 
Pas besoin de positionnement absolu ou relatif, tout rentre dans le flux normal, ou alors j'ai loupé un épisode...


Message édité par gm_superstar le 29-08-2002 à 16:17:32
n°204723
smaragdus
whores, drugs & J.S. Bach
Posté le 29-08-2002 à 16:21:13  profilanswer
 

gm_superstar a écrit a écrit :

Bon si je résume, tu as plein de petites images et tu veux mettre une grande image dessous. Comme ça :

+--+ +--+ +--+ +--+ +--+ +--+
|  | |  | |  | |  | |  | |  |
+--+ +--+ +--+ +--+ +--+ +--+
+---------------------------+
|                           |
|                           |
|                           |
|                           |
+---------------------------+


 




 
Tu fais exprès de pas comprendre : j'ai dit que mes boutons etaient au DESSUS de l'image pas en HAUT de l'image.
J'ai bien précisé qu'il s'agissant d'une transition.
 

n°204734
youdontcar​e
Posté le 29-08-2002 à 16:29:55  profilanswer
 

tu fais un <div> / une <table> de la taille de ton image, tu mets celle-ci en fond (css background-image: url('..';)), tu mets tes images par-dessus ... en utilisant une table si tu veux des trucs bien spécifiques.
 
sinon oui, tu peux faire du js. mais va falloir être plus précis sur ta façon de positionner tes images.


Message édité par youdontcare le 29-08-2002 à 16:30:40
n°204761
gm_superst​ar
Appelez-moi Super
Posté le 29-08-2002 à 17:00:29  profilanswer
 

Smaragdus a écrit a écrit :

Tu fais exprès de pas comprendre : j'ai dit que mes boutons etaient au DESSUS de l'image pas en HAUT de l'image.
J'ai bien précisé qu'il s'agissant d'une transition.



Oui oui je fais exprès de pas comprendre et de me taper un dessin et d'essayer de déchiffrer ce que tu dis...
 
Bref... si tu veux utiliser le postionnement relatif, tu pars de ce que j'ai dit et tu applique ces propriétés de style à ta grande image :
 

position: relative;
top: -100px; /*ça fait remonter l'image de 100px; sur les boutons*/


 
Il faudra peut-être utiliser un z-index pour mettre DESSUS les boutons.
 
Le positionnement relatif permet de déplacer des boîtes par rapport à la position qu'elles aurait eu si elle n'avaient pas été déplacées.


Message édité par gm_superstar le 29-08-2002 à 17:01:20
n°204873
smaragdus
whores, drugs & J.S. Bach
Posté le 29-08-2002 à 18:32:49  profilanswer
 

youdontcare a écrit a écrit :

tu fais un <div> / une <table> de la taille de ton image, tu mets celle-ci en fond (css background-image: url('..';)), tu mets tes images par-dessus ... en utilisant une table si tu veux des trucs bien spécifiques.
 
sinon oui, tu peux faire du js. mais va falloir être plus précis sur ta façon de positionner tes images.




 
C'est bon, j'ai enfin trouvé la propriété pour récuperer la position absolue d'une image (offsetLeft et offsetTop). Ca me permet ensuite de positionner les calques relativement à l'image avec un p'tit coup de javascript.


Message édité par smaragdus le 29-08-2002 à 18:44:43

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  <DIV> : problème de position absolue et relative [résolu]

 

Sujets relatifs
[C++ BUILDER]Utilisation de TImage [RESOLU]probleme de droits avec mySQL
[visual C++] problème "simple" avec les editbox[résolu][poo/c++] héritage, constructeur et destructeurs
Suite de mes nombreux probleme ......[c++bder] capture mouvement(pas position) souris
Au secours problème sur excelProbleme d'un newbie en php ( forum )
[Java] Remplacer un string par un string (Résolu)un autre probleme se pose .......
Plus de sujets relatifs à : <DIV> : problème de position absolue et relative [résolu]


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR