- Home
- Categorie
- Coding e Sistemistica
- Coding
- Problema con i Layer Css
-
Problema con i Layer Css
Salve ragazzi stavo provando a creare un sito: ssannunziatapietradefusi.it (riguarda la mia Parrocchia).
Premetto che non ho dimistichezza con i CSS.IL mio problema riguarda i Layer.
In pratica tutto funziona perfettamente nella risoluzione 1024x768(quella del mio pc dove creo il sito),ma quando visualizzo il sito su altri monitor e con altre risoluzioni mi sballa tutto. Io uso Dreamweaver Mx.
C'è qualcuno di buona volontà che mi puo dire quale errore commetto??
La bozza del sito è questa:
ssannunziatapietradefusi.it/file/progetto-sito-annunziata2.jpg
Vi Ringrazio....HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Parrocchia Maria SS Annunziata Pietradefusi</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="MM_preloadImages('img/taststoria_on.jpg')">
<div id="box">
<div id="Layer1"><img src="img/tasthome.jpg" width="111" height="61"> </div>
<div id="Layer2">
<div align="left"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Storia','','img/taststoria_on.jpg',1)"><img src="img/taststoria.jpg" alt="Storia" name="Storia" width="102" height="63" border="0"></a>
</div>
</div> <div align="left"> </div>
<div align="center">
<table width="75%" border="0" align="center">
<tr>
<td><img src="img/bannertop.jpg" width="900" height="213"></td>
</tr>
<tr>
<td><p> </p>
<p align="center"><img src="img/incostr.gif" width="79" height="40"></p>
</td>
</tr>
<tr>
<td><img src="img/bannerinf.jpg" width="900" height="97"></td>
</tr>
</table>
</div>
</div>
</body>
</html>CSS ==>style.css
/* CSS Document */
#box{
position: fixed;
}
#Layer1{
z-index: 1;
position:absolute;
left:84px;
top:218px;
bottom: 10px;
width: 98px;
height: 55px;
visibility: inherit;
vertical-align: 72%
}
#Layer2{
z-index: 1;
position:absolute;
left:217px;
top:232px;
width:77px;
height:26px;
visibility: inherit;
overflow: visible;text-align: center; /ripristina l' allineamento/
}
-
il problema si presenta perchè utilizzi il poszionamente assoluto per inserire dove vuoi tu i layer.
Il posizionamento assoluto, se non controllato bene, prende come punto di riferimento l'angolo superiore sinistro della pagina e utilizzando i pixel sposta il layer nel punto in cui si desidera.
Il problema è che i monitor hanno differenti risoluzioni e quindi se per te 84px equivalgono al centro della pagina, per me (che ho una risoluzione del monitor piu alta) equivalgono a meno della metà della pagina.Ti conviene studiare un ppò di html più farai più in fretta a finire il sito
guida: giorgiotave.it/guida_html/sommario.php
-
Scusami Inverter puoi indicarmi cosa devo correggere nel css?
Grazie ancora
-
potresti cominciare ad inserire il tutto in un div posizionato in modo relativo e con dimensioni definite, così almeno ogni riferimento assoluto partirà da questo div e non dall' angolo sinistro in alto del monitor