Allungare la pagina automaticamente

**Maccio_87** · 30-01-2012, 21:59

Buonasera, ho un sito strutturato a tre colonne con menù verticale a destra, contenuti al centro e novità e aggiornamenti a destra. Vorrei sapere come posso fare per allungare la parte dei contenuti in base ai contenuti e se possibile far allungare anche le due colonne al loro fianco. Questo è il codice html e css ma nn ci riesco.

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<style>

@import url(home.css);

</style>



</head>

<body>

<center><script type="text/javascript">

/* <![CDATA[ */

google_color_border = "ffff00";

google_color_bg = "000000";

google_color_link = "660066";

google_color_url = "660066";

google_color_text = "ffffff";

google_ui_features = "rc:6";

document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=728X90/r='+new Date().getTime()+'"><\/s'+'cript>');

/* ]]> */

</script></center>



<div id="container">

<div id="header"></div>



<div id="menu">

    <ul>

        [*][url="index.php"]Home[/url]        

        [*][url="cerca_tesserati.php"]Tesserati[/url]

        [*][url="cerca_nazionali.php"]Nazionali[/url]

        [*][url="partite.php"]Partite[/url]

        [*][url="albo_d_oro.php"]Albo d'oro[/url]

        [*][url="marcatori.php"]Marcatori[/url]

        [*][url="notizie.php"]Notizie[/url]

    [/list]

</div>



<div id="contenuti">

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.eurocalcio2012.altervista.org&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true";></iframe>



<center><font size="5">[b]AGGIORNAMENTI[/b]</font></center>

<center><font size="3" face="arial" color="#5a065e">[b]

Il sito è completo!

Nella sezione partite potete visualizzare tutte le partite giocate nei gironi e nei playoff, oltre che tutti i nuovi gironi della fase finale.

Nella sezione tesserati potete ricercare un giocatore o un allenatore di una delle nazionali partecipanti. 

Nella sezione squadre potrete trovare tutte le squadre partecipanti con la lista dei tesserati, dei trofei vinti e delle magliette (Polonia e Ucraina non hanno i giocatori perchè non hanno fatto le qualificazioni).

Nella sezione marcatori ci sono tutte le statistiche che volete sui giocatori.

Nella sezione albo d'oro potete visualizzare tutte le edizioni precedenti (vincitori della manifestazione e finalisti).

Nella sezione notizie potete leggere tutte le notizie relative a Euro 2012

Presto verrà sistemata la home page



</div>

<div id="aggiornamenti"></div>



<div id="footer">

<center>[url="login.php"]Accedi al pannello di controllo[/url]</center>

</div>



</div>

</body>

</html>

Codice PHP:


body {

    background-image: url("immagini/Sfondo.png");

    } 

#container {

        width: 900px;

        height: auto; !important;

        min-height:840px;

        height: 840;

        margin: auto;

        position: relative;

        }

#header {

        width: 900px;

        height: 250px;

        background-image: url("immagini/Header.png");

        

    }



#menu {

        width: 150px;

        position: absolute;

        left:0px;

        top:250px;

        background-color:white;

    }

#menu ul {    

        list-style-image: url("immagini/pallone.png");

        margin-top: 10px;

        

        }

#menu ul li {

        text-decoration: none;

        padding: 0px;

        margin: 0px;

        

        }

#menu ul a {

        text-decoration: none;

        padding: 0px;

        

        }

#menu ul a:hover {

        text-decoration: none;

        padding: 0px;

        color: #88079b;

        

        }





#contenuti {

        width: 600px;

        height: auto; !important;

        min-height:810px;

        height: 810;

        background-color: white;

        position: absolute;

        top: 250px;

        left:150px;

        

        }

#aggiornamenti {

        width: 150px;

        position: absolute;

        right:0px;

        top:250px;

        background-color:red;

        text-align:left;

    }

#footer {

        width: 900px;

        height: 30px;

        background-image: url("immagini/Footer.png");

        position: absolute;

        bottom: 0px;

        clear: both;

    }

#footer a {

        text-decoration: none;

        color: white;

        font-size: 12px;

        font-weight: bold;

                

        }

**Mich_** · 31-01-2012, 09:22

Cerca nel forum con la chiave
false colonne

**Ht28** · 01-02-2012, 18:24

Questo doppio a che serve?

codice:

 
min-height:840px; 
        
height: 840;

Se vuoi tenere un'altezza minima che si allunga in automatico usa min-height, l'altro non serve.

**Ht28** · 01-02-2012, 18:24

Questo doppio a che serve?

codice:

 
min-height:840px; 
        
height: 840;

Se vuoi tenere un'altezza minima che si allunga in automatico usa min-height, l'altro non serve.

**Mich_** · 01-02-2012, 18:32

codice:

        height: auto; !important;
        min-height:840px;
        height: 840;

Questo e` l'hack per far capire il min-height anche ad IE (quirks mode).

**Maccio_87** · 03-02-2012, 13:58

Ho risistemato un pò il codice ma c'è un problema, sono riuscito a fare in modo di allungare il div dei contenuti usando la tecnica delle false colonne tuttavia se inserisco testo questa funziona allungandomi il div, al contrario se inserisco una galleria immagini questa mi sfora dal div sia dei contenuti sia del container. Questo è il nuovo codice:

Codice PHP:




<html>

<head>

<style>

@import url("prova.css");

</style>

</head>



<body>

<div id="container">

<div id="header">

    <ul>

        [*][url="index.html"]<span>Home</span>[/url]

        [*][url="azienda.html"]<span>L'azienda</span>[/url][*]

        [*][url="dovesiamo.html"]<span>Dove siamo</span>[/url]

        [*][url="contatti.html"]<span>Contatti</span>[/url]

    [/list]

</div>



<div id="slide">

<div id="verticale">

    <ul>

        [*][url="cucina.html"]Cucine[/url]

        [*][url="librerie.html"]Librerie[/url]

        [*][url="armadi.html"]Armadi[/url]

        [*][url="camere.html"]Camere[/url]

        [*][url="bagni.html"]Bagni[/url]

        [*][url="ristoranti.html"]Ristoranti[/url]

        [*][url="porte.html"]Porte e infissi[/url]

    [/list]

</div>

<div id="video">[img]armadi/03.jpg[/img]</div>

</div>



<div id="centro">

<div id="gallery">

    <ul>

        [*][url="armadi/bianco.jpg"][img]armadi/miniature/bianco.png[/img][/url]

        [*][url="armadi/bianco2.jpg"][img]armadi/miniature/bianco2.png[/img][/url]

        [*][url="armadi/carr.jpg"][img]armadi/miniature/carr.png[/img][/url]

        [*][url="armadi/carr2.jpg"][img]armadi/miniature/carr2.png[/img][/url]

        [*][url="armadi/DSCN0394.JPG"][img]armadi/miniature/armadio.png[/img][/url]

        [*][url="armadi/IMG_1257.JPG"][img]armadi/miniature/armadio2.png[/img][/url]

        [*][url="armadi/Immagine 019.jpg"][img]armadi/miniature/019.png[/img][/url]

        [*][url="armadi/Nuova immagine4.JPG"][img]armadi/miniature/imm04.png[/img][/url]

        [*][url="armadi/Nuova immagine.JPG"][img]armadi/miniature/imm01.png[/img][/url]

        [*][url="armadi/Nuova immagine3.JPG"][img]armadi/miniature/imm03.png[/img][/url]

        [*][url="armadi/specchi.jpg"][img]armadi/miniature/specchi.png[/img][/url]

        [*][url="armadi/specchi2.jpg"][img]armadi/miniature/specchi2.png[/img][/url]



        [*][url="armadi/bianco.jpg"][img]armadi/miniature/bianco.png[/img][/url]

        [*][url="armadi/bianco2.jpg"][img]armadi/miniature/bianco2.png[/img][/url]

        [*][url="armadi/carr.jpg"][img]armadi/miniature/carr.png[/img][/url]

        [*][url="armadi/carr2.jpg"][img]armadi/miniature/carr2.png[/img][/url]

        [*][url="armadi/DSCN0394.JPG"][img]armadi/miniature/armadio.png[/img][/url]

        [*][url="armadi/IMG_1257.JPG"][img]armadi/miniature/armadio2.png[/img][/url]

        [*][url="armadi/Immagine 019.jpg"][img]armadi/miniature/019.png[/img][/url]

        [*][url="armadi/Nuova immagine4.JPG"][img]armadi/miniature/imm04.png[/img][/url]

        [*][url="armadi/Nuova immagine.JPG"][img]armadi/miniature/imm01.png[/img][/url]

        [*][url="armadi/Nuova immagine3.JPG"][img]armadi/miniature/imm03.png[/img][/url]

        [*][url="armadi/specchi.jpg"][img]armadi/miniature/specchi.png[/img][/url]

        [*][url="armadi/specchi2.jpg"][img]armadi/miniature/specchi2.png[/img][/url]



        [*][url="armadi/bianco.jpg"][img]armadi/miniature/bianco.png[/img][/url]

        [*][url="armadi/bianco2.jpg"][img]armadi/miniature/bianco2.png[/img][/url]

        [*][url="armadi/carr.jpg"][img]armadi/miniature/carr.png[/img][/url]

        [*][url="armadi/carr2.jpg"][img]armadi/miniature/carr2.png[/img][/url]

        [*][url="armadi/DSCN0394.JPG"][img]armadi/miniature/armadio.png[/img][/url]

        [*][url="armadi/IMG_1257.JPG"][img]armadi/miniature/armadio2.png[/img][/url]

        [*][url="armadi/Immagine 019.jpg"][img]armadi/miniature/019.png[/img][/url]

        [*][url="armadi/Nuova immagine4.JPG"][img]armadi/miniature/imm04.png[/img][/url]

        [*][url="armadi/Nuova immagine.JPG"][img]armadi/miniature/imm01.png[/img][/url]

        [*][url="armadi/Nuova immagine3.JPG"][img]armadi/miniature/imm03.png[/img][/url]

        [*][url="armadi/specchi.jpg"][img]armadi/miniature/specchi.png[/img][/url]

        [*][url="armadi/specchi2.jpg"][img]armadi/miniature/specchi2.png[/img][/url]

        

    [/list]

</div>



<span style="position: absolute; top: 5px; left: 110px; color: #e8dca0; font-size: 18px;">Novità</span>

<div id="scorrevole">

<marquee direction="up" scrollamount="2" height="80%"><span style="color: white;">Allestimento esposizione in sede</span></marquee>

</div>



<span style="position: absolute; top: 135px; left: 100px; color: #e8dca0; font-size: 18px;">Ultimi lavori</span>

<div id="ultimilavori">

Mobile bagno in rovere



[img]bagni/miniature/15.png[/img]

</div>





</div>



<div id="footer"></div>

</div>

</body>



</html>

Codice PHP:




html,body {

        margin: 0;

        height: 100%;

        background-color: #7c6958; 

        font-family:"Times New Roman", Times, serif;

    }



#container {

        width: 900px;

        height: auto !important;

        min-height: 980px;

        height: 980px;

        margin: 0 auto;

    }

#header{ 

        width: 900px; 

        height: 150px;

        background-image: url(headernuovo.png); 

    }



#header ul{

    list-style:none;

    overflow:hidden;

    height:125px;

    margin: 0px;

    padding:20px 20px 0px 500px;

    border-bottom:5px solid #352118;

    }

    #header li{

    display:inline;

    }

    #header li a{

    display:block;

    float:left;

    width:70px;

    height:40px;

    margin:85px 2px 0px 2px;

    border-top:5px solid #352118;

    border-right:5px solid #352118;

    border-left:5px solid #352118;

    text-decoration:none;

    text-align:center;

    text-transform:uppercase;

    font-family:arial;

    font-size:11px;

    font-weight:bold;

    color: #352118;

    background-color: #efe9dd; 

    }

#header  a:hover{

    height:110px;

    margin-top:15px;

    }

#header li a span{

    display:block;

    margin-top:5px;

    padding:0px;

    background-color: #ba9e6f; 

    }

#header  a:hover.item1{

    background: url(home1.png) #efe9dd no-repeat center;

    

    }

    #header a:hover.item2{

    background: url(chisiamo1.png) #efe9dd no-repeat center;

    }

    #header  a:hover.item3{

    background: url(dovesiamo1.png) #efe9dd no-repeat center;

    }

    #header  a:hover.item4{

    background: url(contatti1.png) #efe9dd no-repeat center;

    }



#slide {

        width: 900px;

        height: 360px;

        background-color: #efe9dd;

        position: relative;

    }



#video {

            width: 600px;

            height: 350px;

            position: absolute;

            top: 5px;

            right: 5px;

            overflow: hidden;

        }

#verticale {

                width: 200px;

                position: absolute;

                top: 50px;

                left: 50px;

                border-top: 1px solid;

                border-color: #352118;

                

            }

#verticale li {

                margin-bottom: 10px;

            }

            

#verticale ul {

                width: 120px;

                margin-left: 30px;

                padding: 0px;

                list-style-image: url(pallinolista.png);

                

                

            }

#verticale a {

                text-decoration: none;

                font-size: 16px;

                color: #352118;

                font-weight: bold;

                text-align: center;

                

            }

#verticale a:hover {

                        color: #b0491b;

                    }



#centro {

                width: 900px;

                height: auto !important;

                min-height: 590px;

                height: 590px;

                position: relative;

                background-image: url("images/centro.png");

    }



#gallery {

                margin: 10px;

                width: 605px;

                height: auto !important;

                min-height: 590px;

                height: 590px;

                position: absolute;

                left: 295px;

                

        }

#gallery ul {

                list-style: none;

                margin-left: 40px;

                padding: 0px;

            }

#gallery li {

                display: inline;

                

            }

#gallery a {

                display: block;

                float: left;

                border: 4px solid;

                border-color: white;

                margin: 10px;

                color: white;

            }

#gallery a:hover {

                    border-color: #ebdaa2;

                    

                }

            





#scorrevole {

                width: 200px;

                height: 100px;

                position: absolute;

                top: 30px;

                left: 50px;

                border-top: 1px solid;

                border-color: white;

            }

#ultimilavori {

                width: 200px;

                height: 90px;

                position: absolute;

                top: 160px;

                left: 50px;

                border-top: 1px solid;

                border-color: white;

                color: white;

                padding-top: 5px;

        }









#footer {

                width: 900px;

                height: 30px;

                position: absolute;

                

                background-image: url(footer.png);

                color: white;

                font-size: 12px;

        }

Ho impostato una height auto e una min-height al div gallery proprio come il div centro e il div container ma non finziona.Come posso risolvere?

**Maccio_87** · 04-02-2012, 17:25

Nessuno che può aiutarmi?

Discussione: Allungare la pagina automaticamente

Strumenti discussione

Ricerca discussione

Visualizza

Allungare la pagina automaticamente

Permessi di invio