• C
    User Newbie •

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

    0
  • I
    User Attivo •

    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

    0
  • C
    User Newbie •

    Scusami Inverter puoi indicarmi cosa devo correggere nel css?

    Grazie ancora

    0
  • B
    User •

    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

    0
Effettua l'accesso per rispondere