18041 sujets

Questions générales et questions de débutants

Positionner calque flottant

bonjour, je débute en css, et je bute sur un truc certainement tout simple.

voila, je voudrais au survol d'un texte, afficher un calque et qu'en cliquant sur un texte contenu dans ce calque, qu'il se ferme. je le fais avec les comportements de dream, mais en redimensionnant la fenêtre de mon navigateur, (IE6) le calque masque ce qu'il y a en dessous ou a côté.

je souhaite donc le faire en CSS, mais surout pouvoir positionner mon calque en fonction de la position d'un élément sur ma page du texte par exemple (ne pas positionner en fonction des bords Ht et Gauche).

on me dit d'utiliser un calque flottant en relatif ??? Smiley langue

si quelqu'un pouvait me filer un coup de main ... ce serait sympa - merci

le code utilisé :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible' Smiley decu v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body bottommargin="33%" onclick="MM_showHideLayers('Layer1','','show')">
<div id="Layer1" style="position:absolute; left:30%; top:10%; width:292px; height:251px; background-color:#CCCCCC; layer-background-color:#CCCCCC; border:1px none #000000; z-index:1; visibility: hidden;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">&nbsp; </p>
</div>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="10%">&nbsp;</td>
<td width="10%">&nbsp;</td>
<td width="10%">&nbsp;</td>
<td width="22%">&nbsp;</td>
<td width="48%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>emplacement texte 02</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>emplacement texte 01</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="#" onClick="MM_showHideLayers('Layer1','','hide')">afficher</a> </p>
<p>&nbsp;</p>
<p><a href="#" onClick="MM_showHideLayers('Layer1','','show')">fremer</a></p>
</body>
</html>[b][/i][/i][/i]
Sujet clos
Aller à