• User Newbie

    Problema di compatibilità

    Vi chiedo aiuto per un problema che mi è sorto! Ho posizionato gli elementi in una pagina con i CSS e sul mio pc ed altri visualizza perfettamente!... però su mac con risoluzione 2560px x 1280px non viene esattamente come si visualizza sul mio pc, in pratica non viene centrata nella pagina la struttura del sito stesso che risulta essere spostata più verso sinistra!

    Il sito in questione è bedandbreakfastnoto.it gentilmente aiutatemi a capire il problema... grazie a tutti voi.


  • Ciao, il problema è nel div "position", cioè quello che fa da container al sito.
    Se non c'è qualche motivo particolare per usare il posizionamento Absolute puoi andare a cambiarlo con qualcosa simile a questo:

    position: relative;
    width: (larghezza);
    margin: (margine superiore) auto;

    esempio:

    #position {
    position: relative;
    width: 900px;
    margin: 15px auto;
    }
    

  • User Newbie

    ragazzi non riesco a risolvere e la cosa è urgentissima sono disposto via email di darvi il codice css.. o di postarlo qui....

    lo posto così vedete il problema..
    [html]
    html {border:0;}
    body { background-color:#11111b; background-image:url(/struttura/pattern.png); background-repeat:repeat-x; border:0; font-family: tahoma, arial, sans-serif; font-size:14px;}
    #position {position:absolute; top:20%; left:20%; }
    #header {background-image:url(/struttura/header.png); background-repeat:no-repeat; width:730px; height:268px; z-index:1; margin-bottom:15px;}
    #logo {background-image:url(/struttura/logo.png); background-repeat:no-repeat; width:250px; height:156px; position:absolute; top:-78px; left:240px; z-index:2;}
    #body {background-image:url(/struttura/body.png); background-repeat:no-repeat; width:730px; height:530px;}
    #bodytariffe {background-image:url(/struttura/corpo1.png); background-repeat:no-repeat; width:730px; height:730px;}
    #foother {background-image:url(/struttura/foother.png); background-repeat:no-repeat; width:730px; height:64px; margin-top:15px;}
    a {text-decoration:none; color:#372ddf;}
    a:hover {color:#333333;}
    #mail {padding-left:200px; padding-top:5px; }
    #info {padding-left:75px; position:relative; top:205px;}
    #avs {position:relative; left:250px;}
    #lefttext {position:relative; left:270px; font-size:12px;}
    #copyright {font-size:9px; padding-left:120px; }
    img {border:0;}
    #menu {position:absolute; top:28.2%; width:730px; left:1%; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:bold;}
    #menu2 {position:absolute; top:23.1%; width:730px; left:1%; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:bold;}
    .menu1 {position:relative; margin-left:3%; display:inline;}
    a:hover.link {color:#fff;}
    a.link1 {color:#000000; text-decoration:none;}
    .introduzione {position:relative; left:25px; text-align:justify; width:325px; line-height:18px;}
    #testopagstru2 {position:relative; left:25px; text-align:justify; width:325px; line-height:18px;}
    .liste {position:relative; text-align:justify; width:315px; line-height:18px;}
    #testodovesiamo {position:absolute; left:25px; width:325px; text-align:justify; bottom:350px;}
    #immaginepagstruttura {position:absolute; left:365px; bottom:210px; width:350px; height:263px;}
    #title {position:relative; left:130px;}
    #tabcontattaci {position:relative; left:220px; top:50px;}
    input, select {font-size: 11px;}
    #legenda {font-weight:500; position:relative; left:40px; top:30px;}
    #altabassa {font-weight:500; position:absolute; left:40px; top:380px;}
    .alignV {vertical-align:middle;}
    #tariffe {position:absolute; top:380px; left:435px; text-align:center;}
    #periodi {position:absolute; top:750px; left:40px; text-align:center;}
    td.format {padding:2px 20px; background-color:#fff;}
    iframe {position:absolute; left:375px; top:440px;}
    #mappainter {position:relative; left:440px; top:275px;}
    #positiongallery {position:absolute; left:425px; bottom:315px;}
    #imgfolclore {position:relative; top:0; left:80px;}
    #imgfolclore1 {position:relative; top:0; left:150px;}
    #imgfolclore2 {position:relative; top:20px; left:180px;}
    #catedral {position:absolute; left:2px; top:17px; width:726px; height:226px;}
    #format {position:relative; left:25px; width:650px; text-align:justify}
    .linkamici {position:relative; top:40px; left:25px;}
    .contactus {color:#FFFFFF;}
    [/html]

    il problema è questo in questo modo visualizza correttamente.. ma se io prendo un computer con un alta risoluzione il corpo della pagina mi appare staccato da sotto verso sopra, e spostato.. come mai? voi avete detto di mettere position relative.. ma poi si fa un casino


  • User Newbie

    mi sa che l'ho sistemato... vi dico cosa ho fatto ...
    #position {position:absolute; whidt:900px; margin: 15px auto; top:20%; left:20%;} ditemi se è giusto (lo spero)


  • User Newbie

    non si è risolto il problema... HELP


  • Se devi mantenere per forza il posizionamento absolute una soluzione potrebbe essere questa:

    #position {
    left:50%;
    margin:15px 0 0 -365px;
    position:absolute;
    top:20%;
    width:730px;

    }


  • User Newbie

    sul winzoooz. o su qualsiasi computer con una risoluzione nella media è tutto apposto adesso ho uppato e sul mio pc non mi da problemi, vediamo sul suo se gli crea problemi. Comunque grazie per l'aiuto che mi state dando..;)


  • User Newbie

    [editi]no ho sbagliato..[/edit]