Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    Posizionare il logo nella stessa posizione per la varie risoluzioni

    ciao a tutti, il mio problema è il seguente:
    dovrei realizzare un sito con il logo in alto a sx che esce dalla struttura.
    Il mio problema è che con risoluzioni diverse il posizionamento cambia.

    Allego il codice css e html

    html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="stili/stili.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="oneColFixCtrHdr">
    <div id="container">
    <div style="height:60px;"></div>
    <div id="menu"><div align="right"><? echo topMenu1(); ?></div></div>
    <div id="header">[img]img/Home.jpg[/img]</div>

    <div id="apDiv1">[img]img/logo.png[/img]</div>



    <div id="menu2"></div>
    <div id="mainContent">
    </div>
    <div id="footer"><div align="left">


    &copy; xxxxxx 2009 - Partita Iva xxxxxxxxx</p></div>
    </div>
    </div>
    </body>
    </html>




    css:


    #apDiv1 {
    /*position:absolute;
    width:200px;
    height:137px;
    z-index:1;
    left: 20%;
    top: -4px;
    */
    display:block; top:0px; left:21%; width:130px; position:absolute; padding:0px; text-align:center;
    html{ height:100%;}
    body {
    font: 76% Verdana, Arial, Helvetica, sans-serif;
    background: #ffffff;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
    }
    .oneColFixCtrHdr #container {
    width: 720px;
    background: #FFFFFF;
    margin: 0 auto;

    text-align: left;
    }

    .oneColFixCtrHdr #mainContent {
    padding: 0;
    background: #FFFFFF;
    }
    .oneColFixCtrHdr #footer {
    padding: 0 10px;

    }
    .oneColFixCtrHdr #footer p {
    margin: 0;
    padding: 10px 0;
    font-size:10px;
    }

    Avete qualche suggerimento?
    grazie mille
    Immagini allegate Immagini allegate

  2. #2
    Utente di HTML.it L'avatar di ispuk
    Registrato dal
    Jan 2009
    Messaggi
    1,026
    devi usare dimensioni in %

    se usi i pixels all'aumentare della risoluzione si sfasa

  3. #3

    sovrapposizione logo [risolto]

    grazie ispuk, anche con le percentuali la posizione non rimane la stessa, stamattina però ho risolto, ho aggiunto un livello princ prima di container che ho fatto diventare relative.

    subito dopo princ ho messo il div con il logo, ed il tutto funziona perfettamente.
    Posto il codice:

    <div id="princ"><div id="apDiv1">[img]img/logo.png[/img]</div>
    <div id="container">

    #apDiv1 {
    /*position:absolute;
    width:200px;
    height:137px;
    z-index:1;
    left: 20%;
    top: -4px;
    */
    top:0px; left:40px; width:130px;position:relative; z-index:99;margin:0;height:130px;
    }
    .oneColFixCtrHdr #container {
    width: 720px;
    background: #FFFFFF;

    margin: 0 auto;
    position:relative;
    text-align: left;
    top:-70px;
    }
    .oneColFixCtrHdr #princ {
    width: 900px;
    background: #FFFFFF;
    margin: 0 auto;

    text-align: left;
    }

    grazie mille per il supporto

  4. #4
    Utente di HTML.it L'avatar di ispuk
    Registrato dal
    Jan 2009
    Messaggi
    1,026
    bene meglio cosi!

    però dal codice che hai postato il primo div (princ)non ha il tag di chiusura </div>


    forse l'hai messo dopo

    controlla

  5. #5
    per nn postare tutto il codice ho messo solo le prime righe... ;-)

  6. #6
    Utente di HTML.it L'avatar di ispuk
    Registrato dal
    Jan 2009
    Messaggi
    1,026
    ehehe mi sembrava strano infatti

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.