[Opera 7 & 8] Position absolue dans conteneur relatif

**Sub0** · 13/08/2005, 23h10

Salut!

Je souhaite poser dans l'angle supérieur gauche d'une image un Div, tout en conservant la mise en page "inline". Cela fonctionne bien avec IE, Mozilla et FireFox, mais avec Opera, les Divs ne suivent pas leur image lors d'un redimensionnement de la page... Ils ne se positionnent même pas sur leur image lors du chargement.

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<style>
span { position:relative; left:0px; top:0px; display:inline; }
img  { position:relative; left:0px; top:0px; border:5px solid blue; }
div  { position:absolute; left:0px; top:0px; border:2px solid red; }
</style>
<body>
<center>
 
1
 
<span>
<img alt="" src="http://sub0.developpez.com/vac.gif"/>
  <div>d1</div>
</span>
 
2
 
<span>
<img alt="" src="http://sub0.developpez.com/vac.gif"/>
  <div>d2</div>
</span>
 
3
 
</center>
</body>
</html>

Merci d'avance pour votre aide.

**m312** · 13/08/2005, 23h32

Hum j'ai remarqué tres recemment que Opera 8 avait quelques problemes avec les "position: relative", a mon avis c'est la dessus que ca doit se jouer ...

**Sub0** · 14/08/2005, 01h32

Poaww !! Ça me gave ces navigateurs qui marchent comme ils veulent !!

Vivement que les éditeurs acceptent une normalisation parce que là, c'est du grand n'importe quoi !

En tous les cas, merci m312 pour ta réponse.
Savez-vous si ce problème se produit avec d'autres browsers, genre Konqueror, Safari ou Gecko svp ?

**m312** · 14/08/2005, 08h43

Envoyé par Sub0

Poaww !! Ça me gave ces navigateurs qui marchent comme ils veulent !!

Vivement que les éditeurs acceptent une normalisation parce que là, c'est du grand n'importe quoi !

Je ne peut qu'etre d'accord, moi qui pensait que tout respectait les standards

Par contre j'ai jamais eu l'occasion que de comparer IE et Opera, pour la simple raison que c'est les deux navigateurs que j'utilise :/

**Sub0** · 15/08/2005, 15h35

A force, j'ai réussi à trouver une solution pour Opera : display:inline-table;
-> Problème : Ça ne fonctionne plus avec les autres navigateurs !

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
<style>
span { position:relative; display:inline-table; } 
img  { position:relative; left:0px; top:0px; border:5px solid blue; }
div  { position:absolute; top:0px; border:2px solid red;  }
</style>
</head>
<body>
<center>
 
1
 
<span>
  <img alt="" src="http://sub0.developpez.com/vac.gif"/>
  <div>d1</div>
</span>
 
2
 
<span>
  <img alt="" src="http://sub0.developpez.com/vac.gif"/>
  <div>d2</div>
</span>
 
3
 
</center>
</body>
</html>

Poser un div sur une image...

**naholyr** · 16/08/2005, 00h37

Envoyé par Sub0

Poaww !! Ça me gave ces navigateurs qui marchent comme ils veulent !!

Vivement que les éditeurs acceptent une normalisation parce que là, c'est du grand n'importe quoi !

En tous les cas, merci m312 pour ta réponse.
Savez-vous si ce problème se produit avec d'autres browsers, genre Konqueror, Safari ou Gecko svp ?

Globalement tu as 4 grands navigateurs : Firefox, Safari, Opera, IE. Konqueror, Firefox, K-Meleon, etc... utilisent tous le même moteur de rendu : Gecko (Gecko n'est pas un navigateur mais un moteur de rendu), par contre ils n'utilisent pas tous la même version....

**ilood** · 16/08/2005, 11h02

Salut,

Il existe une norme html, celle du w3c. Opéra il me semble est très chatouilleux quand au respect de ces normes.
Hors d'après ce que je vois tu ne les respecte pas

Une balise de type bloc ne peut etre contenue par une balise de type in-line.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<span>
<img alt="" src="http://sub0.developpez.com/vac.gif"/>
  <div>d1</div>
</span>

Le code ci dessus n'est pas dans le respect des normes. Et jouer avec du css sur un code html invalide, promet des résultats très aléatoires, la preuve

**Sub0** · 16/08/2005, 11h57

Envoyé par ilood

Une balise de type bloc ne peut etre contenue par une balise de type in-line.

Ok, je vois...
En réalité, j'ai besoin de dessiner un cadre autour d'une image qui possède déjà une bordure. Je veux faire apparaitre ce cadre lorsque l'image possèdera le focus (elle aura un hyperlien) et également lorsque la souris passera sur cette image (hover). Seulement, je dois absolument garder la mise en page in-line.

Mon idée était de poser un div sur l'image, mais apparemment, cela ne semble pas trop possible. Une autre idée, est de mettre l'image dans une cellule de tableau et d'utiliser la bordure de la cellule pour dessiner ce cadre... Qu'en pensez-vous ?

Je dois obtenir un code compatible avec le maximum de navigateurs, en particulier IE, Opera, Mozilla, FireFox et Netscape7.

Aidez-moi s'il vous plait.

**ilood** · 16/08/2005, 12h20

Envoyé par Sub0

Seulement, je dois absolument garder la mise en page in-line.

C'est pour que les images apparaissent l'un à coté de l'autre que tu souhaite imperativement garder la mis een page inline ?
Sinon pour aligner deux bloc l'un à coté de l'autre tu peux passer par un float left.

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
<style>
div.deco { left:0px; top:0px; float: left }
img  { left:0px; top:0px; border:5px solid blue; }
a { display: block; width: 74px; border: 2px solid #fff; }
a:hover {  border: 2px solid red }
</style>
<body>
<div class="deco">
<a href="#"><img src="http://sub0.developpez.com/vac.gif" alt="" border="0"/></a>
</div>
<div class="deco">
<a href="#"><img alt="" src="http://sub0.developpez.com/vac.gif" /></a>
</div>
 
</body>

J'ai peut etre mal compris

Autre solution au lieu de passer par le selecteur a:hover tu utilises un onmouseover qui applique un style de bordure au span. Ca t'evitera de mettre l'image dans une balise <a></a>, de devoir la passer en block etc.
J'ai pas trop le temps de developper l'idée, mais je repasserai pour poster un exemple s'il faut.

**Sub0** · 16/08/2005, 12h34

Merci ilood.

Ton code est intérressant, seulement mes images ne sont plus centrées dans la page à présent...

Pour résumé, je cherche à mettre 2 images côté à côté, centrées dans la page.
Ces images possèdent une bordure et un hyperlien avec un cadre de focus...

Envoyé par ilood

Une balise de type bloc ne peut etre contenue par une balise de type in-line.

Le problème est là justement...

Merci d'avance pour ton aide.

**etarip** · 16/08/2005, 12h38

Apres avoir développé un site, j'ai testé sur différant navigateur et différant os.
Le site est construit uniquement avec des div, sur pc (2000 et xp), il est affiché correctement sur I.E. et firefox (dernieres versions), sur mac os 9 et 10, l'affichage n'est correct que sur safari (qui utilise un moteur mozilla (ou netscape) si je ne m abuse).

La seule solution a ma connaissance pour que l'affichage soit le même partout est de passer par des tableaux ... perspective pas tres inovante ...

**ilood** · 16/08/2005, 13h00

Si ce n'ets plus qu'un problème de centrage, tu ajoute un bloc conteneur et tu le centre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div style="width: 156px; margin: 0 auto;">
 
<div class="deco"><a href="#"><img src="http://sub0.developpez.com/vac.gif" alt="" border="0"/></a></div>
<div class="deco"><a href="#"><img alt="" src="http://sub0.developpez.com/vac.gif" /></a></div>
 
</div>

**Sub0** · 16/08/2005, 13h33

Ton code fonctionne avec tous mes navigateurs sauf IE où les images restent à gauche de la page...
Autrement, c'est exactement ce dont j'ai besoin!

Je cherche donc à résoudre ce problème avec IE et ce sera bon.
Merci.

[EDIT]
Le texte qui devrait être entre les images est placé au-dessus de celles-ci !!
Je perd la mise en page "inline", donc ce ne va pas, dommage.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
1
<div class="deco">
<a href="#"><img src="http://sub0.developpez.com/vac.gif" alt="" border="0"/></a>
</div>
2
<div class="deco">
<a href="#"><img alt="" src="http://sub0.developpez.com/vac.gif" /></a>
</div>
3

Voici une capture de ce que je souhaite obtenir au centre de la page :

**Sub0** · 16/08/2005, 14h21

Avec le code suivant, j'obtiens un résultat satisfaisant avec IE.
Avec les autres navigateurs, le cadre n'entoure pas l'image. Voici ce que j'obtiens :

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
<style>
a       { border:2px solid white;display:inline;  }
a:hover { border:2px solid red; }
img     { border:2px solid blue; }
</style>
 
<body style="background-color:white;">
<center>
1
<a href="#"><img alt="" src="http://sub0.developpez.com/vac.gif"/></a>
2
<a href="#"><img alt="" src="http://sub0.developpez.com/vac.gif"/></a>
3
</center>
</body>

**Sub0** · 16/08/2005, 15h06

Grâce à ilood, j'ai réussi à mettre au point le code suivant.
Apparemment, ça fonctionne avec tous les navigateurs :

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
16
17
18
19
20
<html>
<head>
<style>
a       { border:2px solid white; font-size:32px; display:inline; }
a:hover { border:2px solid red; }
img     { border:2px solid blue; position:relative; top:8px; }
</style>
<!--[if IE]><style> img { top:0px; }</style><![endif]-->
</head>
 
<body style="background-color:white;">
<center>
1
<a href="#"><img alt="" src="http://sub0.developpez.com/vac.gif"/></a>
2
<a href="#"><img alt="" src="http://sub0.developpez.com/vac.gif"/></a>
3
</center>
</body>
</html>

Note pour IE, j'ai été obligé d'ajouter une modification du style avec la directive appropriée... La hauteur du cadre est définie grâce à font-size (c'est vraiment du bidouillage !!). Je n'ai pas trouvé le moyen de définir cette valeur automatiquement, c'est-à-dire qu'il faudra connaitre à l'avance la hauteur de l'image pour renseigner cette propriété... Avec Javascript, je peux éventuellement me servir d'offsetHeight... Mais bon, faut rajouter du Javascript et c'est pas super...
Pareil pour la valeur de la propriété "top" qui vaut 8px dans cet exemple. Je ne sais pas pourquoi c'est 8 qui convient et comment je vais faire pour déduire cette valeur avec Javascript...

Qu'en pensez-vous ? C'est complètement nul, non ?

**Sub0** · 16/08/2005, 15h47

Merci d'avance pour votre aide.

**Sub0** · 16/08/2005, 23h16

Bonsoir.

J'ajoute le tag résolu, malgré que l'on a pas trouvé la solution au problème. De toutes façons, comme l'a dit ilood « Une balise de type bloc ne peut etre contenue par une balise de type in-line. » cela ne nous laisse pas le choix. Pour mon appli, je pense dessiner la bordure avec PHP et ainsi l'intégrer directement dans l'image... La propriété border de l'image sera donc libérée et pourra me servir pour afficher le focus et le hover.

Je vous remercie pour votre participation à ce topic, à+

[Opera 7 & 8] Position absolue dans conteneur relatif

HTML

Discussions similaires

Partager

Partager