28173 sujets

CSS et mise en forme, CSS3

Tout bouge ... prbl de résolution :-)

Coucou,

j'ai deux problème :

-1- dans ma page, j'ai 1 image + 1 calque ( avec comportement Onmouse / afficher calque ) ... mais la position de mon calque varie suivant la résolution de l'écran ... comment éviter que mon calque se déplace ?

-2- dans cette même page, je voudrais ne plus afficher le trait bleu qui apparaît autour de la zone activée ... avec ie ( biensûr )
---------- Je dois placer un border=none ... mais comment faire ??? -------

Pouvez-vous m'aider concrétement ??
Un grand merci
Sandrine
Salut,

Un petit coup de boule de cristal ... Ah oui
Pour ton image, donne lui la propriété: relative ça servira de référence à la position absolute de ton bloc qui se placera alors en fonction de la position de l'image et non du body de ta page.

Alors le trait bleu, puisque ce n'est pas un cadre bleu, il faut donner la propriété text-decoration: none à ton lien et si c'est une image effectivement rajouter border: 0. Mais ma "boule" n'est pas encore bien réveillée ... J'suis pas sûr.
coucou,

D'avance Un GRAND merci pour votre aide Smiley smile



( 1 ) pour le cadre bleu ( résultat de la création d'une "area shape" ) qui apparaît autour de mon image quand je l'active avec IE 5.5, voici un exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
      img { border : none ; }
    </style>
</head>

<body>
<img src="green.png" width="104" height="65" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="15,15,60,41" href="#" /></map>
</body>
</html>

)))


[2] pour les calques qui bougent suivant la résolution de l'écran :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title>
<script type="text/javascript" language="JavaScript1.2" src="file:///sans titre/js/centeredPopup.js"></script>
<script type="text/javascript" language="JavaScript1.2" src="file:///sans titre/js/fullWindow.js"></script>
<script type="text/javascript" language="JavaScript" src="file:///sans titre/js/swfobject.js"></script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:65px;
height:29px;
z-index:1;
left: 550px;
top: 175px;
visibility: hidden;
}
#Layer2 {
position:absolute;
width:55px;
height:27px;
z-index:2;
left: 182px;
top: 85px;
visibility: hidden;
}
#Layer3 {
position:absolute;
width:109px;
height:64px;
z-index:3;
left: 392px;
top: 65px;
visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--


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; }
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<table width="98%" border="0" cellspacing="0" cellpadding="0" height="97%">
<tr>
<td>
<div align="center">
<div id="flashcontent" align="center">
<br>
<img src="image-catalogue-trait01-.png" width="640" height="350" border="0" usemap="#Map" id="Image1" onClick="MM_showHideLayers('Layer1','','hide')">
<div id="Layer3"><img src="catalogue-sex++.png" width="194" height="48"></div>
<div id="Layer2"><img src="mail-sex+.png" width="51" height="36"></div>
<div id="Layer1"><img src="liens-sex+.png" width="54" height="39"></div>
<br>
<br>
</div>
<script type="text/javascript">

</script>
<noscript>


</noscript>
</div>
</td>
</tr>
</table>
</div>

<map name="Map">
<area shape="rect" coords="290,103,414,142" href="catalogue.html" target="_parent" onMouseOver="MM_showHideLayers('Layer3','','show')" onMouseOut="MM_showHideLayers('Layer3','','hide')">
<area shape="poly" coords="399,210,513,203,517,206,505,251,402,275,362,265,348,259,344,253,350,248,388,244" href="liens++.html" target="_parent" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">
<area shape="poly" coords="204,117,195,106,195,94,200,87,207,85,210,85,215,89,218,94,219,100,217,104,217,109,215,113,226,119,237,126,242,139,244,155,245,167,235,190,233,195,231,200,231,204,232,212,232,247,233,256,234,268,233,279,232,291,231,298,241,310,241,314,234,314,229,311,228,308,225,308,223,306,224,303,225,298,221,276,220,258,218,242,215,231,213,225,210,237,209,246,210,255,210,266,208,275,207,284,207,292,207,295,209,299,207,303,204,304,203,306,198,310,193,311,190,310,190,306,198,297,199,282,196,268,195,253,194,243,193,230,192,214,191,201,190,192,194,182,194,179,188,168,185,156,183,144,182,136,193,125,201,119" href="mailto:vivo@neuf.fr" target="_parent" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')">
</map></body>

</html>



[/i][/i][/i][/i]
Salut, enfin, re
alors la boule ghost ne marchait pas si mal, pour ton lien un petit

a { text-decoration: none; }
img {border: 0; }


resoudra le problème. pour les div qui bougent il faudrait que tu mette ton div conteneur (celui qui est pour le moment affublé juste de align="center") en position: relative; et que tu positionnes tes div layer1 2 et 3 par rapport à lui, pour le moment ils sont en absolute par rapport à la page.

Pour le reste, comment te dire ça, il sera sain de tout reprendre... tu es sous un doctype transitionnel avec une syntaxe pas transitionnelle du tout du tout, truffées d'attributs qu'il faudrait passer dans des styles, de balises non fermées... ouaahh, tu dois avoir une version de dreamweaver qui date de ton IE5.5 Smiley smile parce, même si perso je préfère écrire à la mimine, en temps normal il génère un code qui colle au doctype qu'il utilise.

bon, ben après avoir compris pourquoi tu préfères mettre le code plutôt qu'une page à voir Smiley smile il ne me reste plus qu'à te souhaiter bonne réécriture, bon courage et

have swing
Sujet clos
Aller à