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

    AIUTO problema posizionamento layout misto

    Ciao a tutti,
    ho bisogno di posizionare un layout, centrato orizzontalmente nella pagina, come segue:

    - top: altezza fissa di 70px e posizionato sempre in alto
    - content: altezza fissa di 482px, deve essere sempre centrato verticalmente nella pagina, a qualsiasi risoluzione. Se la risoluzione dell'utente è inferiore alla somma della sua altezza e quella del top deve agganciarsi sotto al top e non scomparire in alto.
    - footer: altezza fissa di 40px e posizionato sempre al bottom della pagina, a qualsiasi risoluzione. Se però la risoluzione è inferiore alla somma della sua altezza, dell'altezza del content e dell'altezza del top, deve agganciarsi sotto al content.

    Finora ho buttato giù il seguente codice, che però mi fa scomparire il content in alto se la risoluzione è minore e il footer rimane sempre bottom, invece di agganciarsi al content.

    Sto sbattendo la testa da ore!! Aiutatemi vi prego...grazie!!



    CODICE HTML

    <!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>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="top"></div>
    <div id="container">
    <div id="content"></div>
    <div id="footer"></div>
    </div>
    </body>
    </html>


    CSS

    html, body {
    width: 100%;
    height: 100%;
    }
    div#top {
    margin: 0 auto;
    width: 950px;
    height: 70px;
    overflow: hidden;
    }
    div#container {
    clear: both;
    margin: 0 auto;
    width: 950px;
    overflow: hidden;
    }
    div#content {
    position: absolute;
    top: 50%;
    margin-top: -241px;
    width: 950px;
    height: 482px;
    }
    div#footer {
    position: absolute;
    bottom: 5px;
    width: 950px;
    height: 40px;
    }

  2. #2
    Utente di HTML.it L'avatar di ispuk
    Registrato dal
    Jan 2009
    Messaggi
    1,026
    ciao non ho capito bene comunque ho modificato un pò il tuo codice prova a vedere se è quello che cerchi(copia e incolla questi codici nelle tue pagine o creane delle nuove)

    index.html
    codice:
    <!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>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="top">TOP</div>
    <div id="content">CONTENT</div>
    <div id="footer">FOOTER</div>
    </div>
    </body>
    </html>
    style.css
    codice:
    html, body {
    margin:0 auto;
    }
    div#container {
    background-color:#00CCCC;
    margin: 0 auto;
    width: 950px;
    overflow: hidden;
    }
    div#top {
    background-color:#999999;
    margin: 0 auto;
    height: 70px;
    overflow: hidden;
    }
    div#content {
    height: 482px;
    margin: 0 auto;
    }
    div#footer {
    background-color:#9999FF;
    height: 40px;
    margin: 0 auto;
    }
    ho inserito dei background-color ai css per visionare meglio il layout ovviamente puoi toglierli e fare ciò che vuoi.
    Sia con IE che con FF e sembra sempre centrato ma occhio che tu usi gli overflow e non ricordo che effetto abbiano successivamente

    ciao

  3. #3
    Ho provato e ho visualizzato il tuo risultato, ma probabilmente mi sono spiegato male io!
    Il content deve alzarsi in base all'altezza della finestra e il footer deve stare subito sotto.

    ESEMPIO
    Se lo spazio nella finestra del browser è 1024x718px. Gli elementi DIV dovranno avere le seguenti dimensioni:
    - TOP: width: 950px; height: 70px;
    - CONTENT: width: 950px; height: 608px; (608px = 718px (altezza spazio browser) - 70px (altezza top) - 40px (altezza footer)
    - BOTTOM: width: 950px; height: 40px;

  4. #4
    Utente di HTML.it L'avatar di ispuk
    Registrato dal
    Jan 2009
    Messaggi
    1,026
    non so se si può fare in html ciò che chiedi credo sia più facile con javascript

    magari mi sbaglio ma non credo si possa far andare al di sopra della finestra del browser qualcosa usando html

    ti serve qualche script tipo questo http://javascript.html.it/script/ved...tomaticamente/

    a quel punto la pagina si apre sempre con la parte del content centrata con la scrollbar che scorrendo in alto ti visualizza il div top e scorrendo in basso ti visualizza il footer

    poi dovresti usare dimensioni in % on in em

    magari qualcuno più preciso di me lo sa sicuramente,ma non credo sia fattibile in html

  5. #5
    Io non voglio nulla di tutto ciò!

    Se si cerca su Google come posizionare un DIV verticalmente al centro della pagina, tutti rispondono che si deve utilizzare il posizionamento assoluto, settando i margini in negativo.
    Fin qui tutto bene, ma se il DIV da centrare è largo 1000px mentre la finestra del browser è 800, i 200 pixel vengono persi a sinistra del browser.

    Quello che voglio io è che se la finestra è minore di 1000px mi escano le scrollbar e non perda alcun contenuto!

  6. #6
    Utente di HTML.it L'avatar di ispuk
    Registrato dal
    Jan 2009
    Messaggi
    1,026
    si hai ragione capisco male purtroppo

    ma allora è un problema di risoluzione??vuoi che il layout sia fisso per ogni risoluzione?

    se fosse cosi basta che usi dimensioni in %

    traduci tutte le dimensioni in px in %

  7. #7
    Ho trovato la soluzione, però non mi funziona in IE 6. Vi prego di aiutarmi....sto impazzendo!!

    HTML

    <!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>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="testata">TOP</div>
    <div id="container">
    <div id="content">
    <div id="subcontent">CONTENT</div>
    </div>
    <div id="footer">FOOTER</div>
    </div>
    </div>
    </body>
    </html>


    CSS

    html, body {
    width: 100%;
    height: 100%;
    }
    div#wrapper {
    position:relative;
    height: 100%;
    margin: 0 auto;

    }
    body>div#wrapper {
    height:auto;
    min-height:100%;
    }
    div#testata {
    margin: 0 auto;
    padding: 25px 0;
    width: 950px;
    overflow: hidden;
    }
    div#container {
    clear: both;
    margin: 25px auto 0;
    width: 950px;
    height: 100%;
    }
    div#content {
    width: 950px;
    min-height: 482px;
    height: auto !important;
    height: 482px;
    }
    div#subcontent {
    position: absolute;
    top: 50%;
    margin-top: -241px;
    width: 950px;
    height: 482px;
    background: #FFFF99;
    }
    div#footer {
    position: absolute;
    bottom: 5px;
    width: 950px;
    }

  8. #8
    Utente di HTML.it L'avatar di ispuk
    Registrato dal
    Jan 2009
    Messaggi
    1,026
    cerca su google "commenti condizionali"

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 © 2025 vBulletin Solutions, Inc. All rights reserved.