Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    14

    background container fisso e content che si sposta?

    ho provato e riprovato, cercato e ricercato il forum alla ricerca di ispirazione ... alla fine getto la spugna.

    problema accade quando riduco le dimensioni della finestra del browser, a tutto schermo si vede bene su qualsiasi browser. In pratica il div contentarea resta dov'e' e tutto il resto si sposta.. vorrei che, tutto si spostasse o tutto restasse fermo.

    (il box con cornice rossa e' il box problematico, vabbe' che lo capite dal codice)

    sto lavorando in intranet quindi la pagina non e' disponibile sul web, e non ditemi di togliere di mezzo la table perche' il codice html e' generato da un applicativo su cui non posso mettere le mani, posso solo modificare il css per cambiare il layout della pagina (perche' abbiano usato una tabella li non si sa...., visto che poi tutto il resto e' fatto via css.. )

    codice CSS:
    Codice PHP:
    @charset "UTF-8";

    /***** GENERAL SETTINGS  ******/   /*** START ***/

    body {
        
    margin-top0px;
        
    margin-left0px;
        
    background-color#CCCCCC;
        
    margin-right0px;
        
    margin-bottom0px;
    }

    div.clearer {clearleftline-height0height0;}        
    /*** END ***/

    /****** HEADER *********/    /*** START ***/

    #header {
        
    text-aligncenter;
        
    height200px;
        
    background-imageurl(images/bg_top.jpg);
        
    background-positioncenter top;
        
    background-repeatno-repeat;
    }
    #content {
        
    background:url(images/bg_bottom.jpgrepeat-y;    
    \    
    background-positioncenter center;
        
    padding0px;
        
    margin0px;
        
    width:100%;
        
    position:relative;
        
    overflow:hidden;    
    }

    #contentarea {
        
    width670px;    
        
    margin-left200px;
        
    background-positiontop;
        
    padding-top0px;
        
    padding-right0px;
        
    padding-bottom0px;
        
    border:1px solid red;
        
    padding-left0px;  overflow:hidden;     
    }
    #contentarea td {
        
    vertical-aligntop;
    }
        
    #contentarea table {
            
    background-color:#fff;
        
    }
        
        
    #contentarea table.columns
        
    {            
            
    padding-left100px;
        }
            
    #contentarea table.columns td
            
    {
                
    vertical-aligntop;
            }
    /*** END ***/

    /****** FOOTER *********/    /*** START ***/
    #footer {
        
    background:#fff url(images/bg_bottom.jpg) repeat-y center;        
        
    margin0px;
        
    padding0px;
        
    clear:both;    
        
    width:100%;    
        
    font-size:0.7em;    
        
    text-aligncenter;            
    }        
    /*** END ***/ 
    codice HTML:

    Codice PHP:
    <!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>
    <
    title>test</title>
    <
    link rel="stylesheet" type="text/css" media="screen" href="./test.css" />
    </
    head>
    <
    body>
    <
    div id="header"></div>
    <
    div id="content">
        <
    div id="contentarea">
                <
    table class="columns" cellspacing="15" border="0">
                <
    tr><td>
    Lorem ipsum dolor sit ametconsectetuer adipiscing elitIn in diam at magna sollicitudin suscipitNullam et lorem mattis nulla commodo bibendumCurabitur est liberovehicula etlaoreet insollicitudin sit ametfelisPellentesque egestas urna sed odioDuis ut metusNam rutrumFusce quis augue sit amet lectus fermentum auctorDuis sagittis erat sed diamNunc iaculis quam ac nisiSed ullamcorper rutrum erosIn velitQuisque pharetravelit vel rhoncus pellentesquenunc quam ultricies estet mollis lectus purus non loremDonec nonummy pretium purusDonec scelerisque pharetra orciPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestasQuisque et massa et metus consequat molestieVestibulum venenatis cursus metusEtiam lectus.

    Nunc semNullam gravida ultrices arcuMauris vel libero non sapien cursus semperNullam vel diamDuis at duiSuspendisse consequat velit consectetuer sapienCras euismod gravida leoDuis sed purusAliquam aliquamturpis in laoreet dapibusjusto metus fringilla risusvel ultrices pede urna id odioCurabitur sed orciNulla condimentum nuncIn vestibulum pede id leoPhasellus ornare lacinia maurisNam pharetra pede ac quamSed sed magna non dui vulputate malesuadaNam interdumNullam lacusPraesent urna quamfermentum sedconsequat sedvehicula sit amettortorMorbi ultricesmagna nec condimentum mattisante lorem iaculis erosconsequat blandit libero purus in lacusMauris tempor ornare quam.

    Morbi purusMaecenas anteProin vehiculaSed a felis vitae risus vestibulum ullamcorperFusce convallismi auctor adipiscing imperdietsem metus condimentum sapieneget gravida erat sapien quis ipsumMauris elit duivenenatis nonfaucibus etvolutpat veltellusEtiam consequat quam non mauris ornare euismodMorbi molestie auctor semCurabitur eu diamVestibulum convallis malesuada orciCras turpisAliquam erat volutpatSuspendisse potentiNam quam purusvestibulum sedmalesuada sit ametlacinia necmauris.

    Quisque nonummy ultrices pedeSed mauris orcimolestie aeleifend velplacerat condimentumnibhAliquam facilisistortor non aliquet laoreetpede ligula sollicitudin elitsit amet euismod augue leo vel duiInteger eget elit at quam facilisis aliquamNulla molestiePraesent sodales nisi in nisiInteger a ligula id eros bibendum fermentumPhasellus semper cursus turpisPhasellus suscipit enim id justo congue facilisisMauris magnaPraesent mollis ipsum sit amet dolorSed tristique feugiat magna.

    Etiam porttitorMorbi elementum scelerisque orciCras accumsan arcu non quamNulla gravida turpis vel lectusAenean arcu metusmalesuada vitaesuscipit nonelementum attortorCum sociis natoque penatibus et magnis dis parturient montesnascetur ridiculus musDonec miCurabitur nuncAliquam venenatis faucibus maurisNulla odio eratscelerisque aornare facilisislacinia sit ametsem. Class aptent taciti sociosqu ad litora torquent per conubia nostraper inceptos hymenaeosSed vel justo nec eros viverra feugiatNunc id arcuPellentesque ullamcorperNunc euismod semper maurisVivamus id lectus sit amet lorem blandit imperdiet.

                </
    td></tr>
                </
    table>
        </
    div>
    </
    div>
    <
    div id="footer">
    Neque porro quisquam est qui dolorem ipsum quia dolor sit ametconsecteturadipisci velit..
    </
    div>
    </
    body>
    </
    html
    screenshot allegati

    grazie a chi puo' aiutarmi.
    Immagini allegate Immagini allegate
    Imagination is more important than knowledge. [A.Einstein]

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    14
    piccolo uppettino per me

    continuo la mia ricerca e i miei test ma non trovo soluzioni al problema...

    sembrerebbe un tipico problema di layout liquido .. ma non sono in grado di trovare il baco .. :|


    grasssssssie per eventuali aiuti
    Imagination is more important than knowledge. [A.Einstein]

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    663
    Se vuoi un tipo di layout fisso, le unità di misura nel tuo documento devono essere assolute (px, pt). Se vuoi un tipo di layout fluido le unità di misura devono essere relative (%, em).
    Se cominci a mischiare unità relative e assolute, avrai un risultato a metà.

    prova così:

    css:
    *
    {
    margin:0;
    padding:0;
    }
    html
    {
    font-size:100%;
    }
    body {
    background: #ccc;
    font-size:1em;
    }
    #container
    {
    width:100%;
    }
    #header {
    width:auto;
    text-align: center;
    height: 12.5em;/*200px*/
    background: url(immagine) center top no-repeat;
    }
    #content {
    background:url(immagine) center center repeat-y;
    width:100%;
    }
    #contentarea {
    width: 70%;
    margin-left: 20%;
    /*IE5*/
    voice-family: "\"}\"";
    voice-family: inherit;
    width:50%;
    }
    html>#contentarea
    {
    width:50%;
    }
    #contentarea table
    {
    border-collapse: collapse;
    border:0.06em solid red;
    background:#fff;
    }
    #contentarea table td
    {
    padding:2%;
    }
    #footer {
    background:#fff url(immagine) repeat-y center;
    clear:both;
    width:100%;
    font-size:0.7em;
    text-align: center;
    }

    html:
    <div id="container">
    <div id="header">
    </div>
    <div id="content">
    <div id="contentarea">
    <table id="colums">
    <tr>
    <td>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In in diam at magna sollicitudin suscipit. Nullam et lorem mattis nulla commodo bibendum. Curabitur est libero, vehicula et, laoreet in, sollicitudin sit amet, felis. Pellentesque egestas urna sed odio. Duis ut metus. Nam rutrum. Fusce quis augue sit amet lectus fermentum auctor. Duis sagittis erat sed diam. Nunc iaculis quam ac nisi. Sed ullamcorper rutrum eros. In velit. Quisque pharetra, velit vel rhoncus pellentesque, nunc quam ultricies est, et mollis lectus purus non lorem. Donec nonummy pretium purus. Donec scelerisque pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque et massa et metus consequat molestie. Vestibulum venenatis cursus metus. Etiam lectus.

    Nunc sem. Nullam gravida ultrices arcu. Mauris vel libero non sapien cursus semper. Nullam vel diam. Duis at dui. Suspendisse consequat velit consectetuer sapien. Cras euismod gravida leo. Duis sed purus. Aliquam aliquam, turpis in laoreet dapibus, justo metus fringilla risus, vel ultrices pede urna id odio. Curabitur sed orci. Nulla condimentum nunc. In vestibulum pede id leo. Phasellus ornare lacinia mauris. Nam pharetra pede ac quam. Sed sed magna non dui vulputate malesuada. Nam interdum. Nullam lacus. Praesent urna quam, fermentum sed, consequat sed, vehicula sit amet, tortor. Morbi ultrices, magna nec condimentum mattis, ante lorem iaculis eros, consequat blandit libero purus in lacus. Mauris tempor ornare quam.

    Morbi purus. Maecenas ante. Proin vehicula. Sed a felis vitae risus vestibulum ullamcorper. Fusce convallis, mi auctor adipiscing imperdiet, sem metus condimentum sapien, eget gravida erat sapien quis ipsum. Mauris elit dui, venenatis non, faucibus et, volutpat vel, tellus. Etiam consequat quam non mauris ornare euismod. Morbi molestie auctor sem. Curabitur eu diam. Vestibulum convallis malesuada orci. Cras turpis. Aliquam erat volutpat. Suspendisse potenti. Nam quam purus, vestibulum sed, malesuada sit amet, lacinia nec, mauris.

    Quisque nonummy ultrices pede. Sed mauris orci, molestie a, eleifend vel, placerat condimentum, nibh. Aliquam facilisis, tortor non aliquet laoreet, pede ligula sollicitudin elit, sit amet euismod augue leo vel dui. Integer eget elit at quam facilisis aliquam. Nulla molestie. Praesent sodales nisi in nisi. Integer a ligula id eros bibendum fermentum. Phasellus semper cursus turpis. Phasellus suscipit enim id justo congue facilisis. Mauris magna. Praesent mollis ipsum sit amet dolor. Sed tristique feugiat magna.

    Etiam porttitor. Morbi elementum scelerisque orci. Cras accumsan arcu non quam. Nulla gravida turpis vel lectus. Aenean arcu metus, malesuada vitae, suscipit non, elementum at, tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec mi. Curabitur nunc. Aliquam venenatis faucibus mauris. Nulla odio erat, scelerisque a, ornare facilisis, lacinia sit amet, sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed vel justo nec eros viverra feugiat. Nunc id arcu. Pellentesque ullamcorper. Nunc euismod semper mauris. Vivamus id lectus sit amet lorem blandit imperdiet.

    </td>
    </tr>
    </table>
    </div>
    </div>
    <div id="footer">
    Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..
    </div>
    </div>




    Le larghezze settale come vuoi tu, sempre in %. Ti ho anche semplificato alcuni passaggi, come nella table.
    Se invece vuoi renderlo fisso, le dimensioni, i padding ecc..dichiarali in px.

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    14
    in effetti e' logico che non si debba mixare le unita' di misura... perche' non ci ho pensato prima?!? forse leggere meglio le guide (sicuramente l'avran scritto da qualche parte)

    cmq grazie per la dritta, per ora sembra che funzioni bene... poi vedro' come si comporta sul server di produzione
    Imagination is more important than knowledge. [A.Einstein]

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.