[CSS]Blocco che non si allunga a fine pagina

**UnNamed** · 02-07-2004, 19:22

Inserisco qui il codice della pagina:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<html>
<head>
<title>NEWBLACKHORIZONT</title>
<style type="text/css">@import url(stile.css);</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body background="image/sfondo.gif">
  <div id="container">
    <div id="upper">NEWBLACKHORIZON<font color="#FF0000">T</font> NewBlackHorizont videogames and magazines site - WEBMASTERING BY ECHOS GROUP - 2004 Tutti i contenuti, loghi, recensioni appartengono ai legittimi proprietari
    </div>
    <div id="logobar">
      <div id="bar"> </div>
      <div id="menu">
       </div>
      <div id="foto"></div>
      <div id="state"></div>
    </div>
    <div id="logo"> </div>
    <div id="desc"> 

       <table style="background: url(image/copertina.jpg) no-repeat; width:100%; margin:0px;"><tr><td>

         <div style="margin: 60px 0px;">
         <h1> TITOLO 1</h1>
         <h2> SOTTOTITOLO </h2>
         </div>

         <div style="margin: 60px 0px;">
         <h1> TITOLO 1</h1>
         <h2> SOTTOTITOLO </h2>
         </div>

         <div style="margin: 60px 0px;">
         <h1> TITOLO 1</h1>
         <h2> SOTTOTITOLO </h2>
         </div>

         <div style="margin: 60px 0px;">
         <h1> TITOLO 1</h1>
         <h2> SOTTOTITOLO </h2>
         </div>

         <div style="margin: 60px 0px;">
         <h1> TITOLO 1</h1>
         <h2> SOTTOTITOLO </h2>
         </div>

         <h2> ED IN PIU':</h2>
         <h2> SOTTOTITOLO </h2>
         <h2> SOTTOTITOLO </h2>
         <h2> SOTTOTITOLO </h2>
         <h2> SOTTOTITOLO </h2>
         <h2> SOTTOTITOLO</h2>

	<table width="100%" style="border:0px;"><tr><td>
         <div class="box" style="width:160px; float:left;">
           <div class="box" align="center">
              <div class="tit">BOX</div>
              [img][/img]
           </div> 
           <div class="box">
               dsf
           </div>
        </div>

        <div class="box" style="width:160px; float:right;">
           <div class="box" align="center">
              <div class="tit">BOX</div>
              [img][/img]
           </div> 
           <div class="box">
             dff
           </div>
        </div>
	</td></tr></table>
         
      </td></tr></table>


    </div>
    <div id="block">
      <div class="box">
         <div class="tit">ULTIMI ARTICOLI</div>
         [prova]prova

      </div>
      <div class="box" align=center>
         <div class="tit">TOP OF THE DAY</div>
         prova

      </div>
      <div class="box">
         <div class="tit">NAVIGATION BAR</div>
         HOME

         NEWS

        RIVISTE

         <div class="boxint">
           Game Power

           Console Mania

           C+VG

           Guida Videogiochi

           Zzap!

           The Games Machine

           Super Console

           Mega Console

         </div>
        SISTEMI

         <div class="boxint">
           Atari

	   Commodore

           Nec

           Nintendo

           Sega

           SNK

           Sony

           altri>

         </div>
         RECORD

      FORUM
 
         PARTECIPA
 
      </div>
      <div class="box">
        <div class="tit">LINK UTILI</div>
        Project Ring

      The First Place

        Retrogaming.it

      Progetto Zzap!

         Emuguide

        Multiplayer

      </div>
    </div>
    <div id="bottom">PROVA</div>
    <div id="footer">NewBlackHorizont Site - Anno 2004 - Tutti i diritti sono dei legittimi proprietari</div>
  </div>
</body>
</html>

E qui il relativo css

codice:

/*allineamento centrale del sito, adatto anche pr IE 5.x*/
html,body{
    text-align: center;   /*centra in IE 5.x */
    margin: 0px auto;
    padding: 0px;
    height:100%;
    }

/*contenitore principale, contiente tutto il sito, valido anche per gli altri browser*/
div#container{
    width: 960px;
    margin: 0px auto;   /*centra negli altri browsers*/
    text-align: left;   /*ripristina l' allineamento*/
    } 

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

a:hover {
color: yellow;
text-decoration: none;
}


/*contenitore con infomazioni generiche, occupa tutto lo spazio del body*/
#upper{
        background-color:black;
        color:white;
        margin: 0px;
        padding: 0px;
        height:12px;
        font:9px Arial,sans-serif;
      }

/*contenitore del logo superiore*/
#logobar{
        background-color:#B0C0C0;
        float:left;
        width:810px;
        height:120px;
        }

#bar{
     background:#666666 url(image/bar.gif) repeat-x;
     height:24px;
     border-left:1px solid black;
     border-bottom:1px solid black;
    }
 
/*barra dei menù superiore*/
#menu{
      background:#999999;
      height:18px;
      margin:0px;
      padding:0px;
     }

/*barra di posizione nel sito*/
#state{
      background-color:blue;
      height:12px;
      font: bold 10px Arial,sans-serif;
      }

/*foto generica che cambia da pag a pag*/
#foto{
      background: url(image/foto.jpg) no-repeat;
      background-color:black;
      height:50px;
      border:2px solid green;
     }

      
/*logo destro*/
#logo{
      background color:blue;
      float:left;
      height:120px;
     }


/*blocco centrale*/
#desc{
      float:left;
      width:810px;
      margin:0px;
      height:100%;
     }

#block{
      background: red url repeat-y;
      width:150px;
      float:right;
      padding: 0px;
      height:100%;
      }

.box{
     background:#CCCCCC  repeat-y;
     margin:4px;
     border:1px solid black;
     font: 10px/10px Arial,sans-serif;
    } 

.boxint{
     margin:2px 0px 2px 4px;
     font: 10px/10px Arial,sans-serif;
    } 

.tit{
     background-color:#CC9999;
     font: bold 11px Arial,sans-serif;
     color:white;
    }

#footer{
       clear:both;
       text-align:center;
       background-color:#666666;
       font: bold 11px Arial,sans-serif;
       color:white;
       height:15px;
      }

#bottom{
       clear:left;
       width:auto;
       background-color:black;
       text-align:center;
       font: bold 13px Arial,sans-serif;
       color:white;
       height:15px;
      }

#descint{
        background-color:#CCCCCC;
        margin:10px;
        font: 12px/12px Arial,sans-serif;
        border:2px solid white;
	
       }

#info{
      background: url(image/blocklog.jpg) repeat-y;
      float:left;
      margin:3px;
      border:2px solid white;
      width:170px;
      }
   

h1 {font: bold 30px/10px Arial,sans-serif;}

h2 {font: bold 20px/5px Arial,sans-serif;}

table { 
        font: 12px/12px Arial,sans-serif;
        margin:10px;
        border:2px solid white;
       }

Notate il blocco a destra contornato di rosso. Per crearlo ho usato il div id blocco. Secondo le mie capacità mentali, il sudetto blocco dovrebbe allungarsi fino a fondo pagina, invece rimane delle dimensioni del suo contenuto. Ho inserito height 100% (ho provato anche impostando auto) ma non è servito a niente. Dove sto sbagliando?

**floyd46** · 02-07-2004, 19:48

ciao
non hai una pagina in rete in modo tale che possiamo vedere quello che viene fuori?
Analizzare il codice.......

**UnNamed** · 02-07-2004, 20:15

ho provato a metterla su altervista, ma non mi fa funzionare il css.
Consigliami un host gratuito, così ti mostro la pagina

(prima avevo supereva che fungeva benissimo, ma ora funziona solo per chi il loro abbonamento)

**flanza** · 02-07-2004, 20:28

Originariamente inviato da UnNamed
ho provato a metterla su altervista, ma non mi fa funzionare il css.
Consigliami un host gratuito, così ti mostro la pagina

(prima avevo supereva che fungeva benissimo, ma ora funziona solo per chi il loro abbonamento)

Su Altervista funzionano i CSS!
Almeno a me...

**UnNamed** · 02-07-2004, 20:44

bog, comunque questa è la pagina:

http://goteki.altervista.org/index.html

**floyd46** · 02-07-2004, 23:14

onestamente non si capisce nulla dalla pagina che hai segnalato a quale problema ti riferisci.

**UnNamed** · 02-07-2004, 23:25

Niente, la pagina non ne vuole sapere di caricarsi, dovreste fare un piccolo sforzo di copia/incolla sul vostro computer per vedere il problema

**UnNamed** · 03-07-2004, 18:45

sono finalmente riuscito a trovare un host al caso mio. Ho uppato la pagina, dateci un occhiata per favour

http://utenti.lycos.it/radiantsilvergun/

**Jerry Masslo** · 03-07-2004, 19:03

non si vede lo stesso niente in ogni caso, ti rispondo senza guardare il codice, i div sono indipendenti al contrario delle colonne delle tabelle a meno di annidamenti in cui quello interno trascina quelli più esterni, rimediare con l'height non assicura quello che vorresti sempre solo in certi casi. a questo tipo di cose si può ovviare con vari sistemi il più semplice dei quali è non dare sfondo al div che si vuole più lungo del suo contenuto e darlo invece a un contenitore dipendente da un altro div che si allunga e lo allunga e in questo modo il div che a te interessa rimane lo stesso corto ma non il suo sfondo.

**floyd46** · 03-07-2004, 20:23

Originariamente inviato da UnNamed
sono finalmente riuscito a trovare un host al caso mio. Ho uppato la pagina, dateci un occhiata per favour

http://utenti.lycos.it/radiantsilvergun/

non si vede la pagina, ma solo pubblicità!!
ciao

Discussione: [CSS]Blocco che non si allunga a fine pagina

Strumenti discussione

Ricerca discussione

Visualizza

[CSS]Blocco che non si allunga a fine pagina

Re: [CSS]Blocco che non si allunga a fine pagina

Permessi di invio