background container fisso e content che si sposta?

**pingala** · 05-03-2008, 17:37

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-top: 0px;

    margin-left: 0px;

    background-color: #CCCCCC;

    margin-right: 0px;

    margin-bottom: 0px;

}



div.clearer {clear: left; line-height: 0; height: 0;}        

/*** END ***/



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



#header {

    text-align: center;

    height: 200px;

    background-image: url(images/bg_top.jpg);

    background-position: center top;

    background-repeat: no-repeat;

}

#content {

    background:url(images/bg_bottom.jpg) repeat-y;    

\    background-position: center center;

    padding: 0px;

    margin: 0px;

    width:100%;

    position:relative;

    overflow:hidden;    

}



#contentarea {

    width: 670px;    

    margin-left: 200px;

    background-position: top;

    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    border:1px solid red;

    padding-left: 0px;  overflow:hidden;     

}

#contentarea td {

    vertical-align: top;

}

    #contentarea table {

        background-color:#fff;

    }

    

    #contentarea table.columns

    {            

        padding-left: 100px;

    }

        #contentarea table.columns td

        {

            vertical-align: top;

        }

/*** END ***/



/****** FOOTER *********/    /*** START ***/

#footer {

    background:#fff url(images/bg_bottom.jpg) repeat-y center;        

    margin: 0px;

    padding: 0px;

    clear:both;    

    width:100%;    

    font-size:0.7em;    

    text-align: center;            

}        

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

</body>

</html>

screenshot allegati

grazie a chi puo' aiutarmi.

**pingala** · 06-03-2008, 10:35

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

**gengix** · 06-03-2008, 13:47

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.

**pingala** · 06-03-2008, 15:30

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

Discussione: background container fisso e content che si sposta?

Strumenti discussione

Ricerca discussione

Visualizza

background container fisso e content che si sposta?

Permessi di invio