Newsgroup: it.comp.www.html
Titolo: sfondo div con IE, FF, e Opera

Ciao a tutti
Ho un Div che racchiude altri 2 div affiancati (sinistra e content) che 
chiamo BACK.
Questo div mi serve "soltanto" a mettere uno sfondo che si ripete (repeat-y) 
sul lato sinistro creando cosě una finta colonna che raggiunga il footer nel 
caso in cui la parte sinistra sia piů corta di quella destra ... Non so se 
mi son spiegato...
In pratica se non mettessi uno sfondo "globale", lo sfondo della colonna di 
sinistra (DIV#left) si fermerebbe all'altezza variabile in quel momento 
lasciando spazio fino al footer (capita che il div#left sia piů corto del 
DIV#content).
Questa cosa dello sfondo nel div#Back  mi funziona ottimamente con FF e IE 
ma non con Opera dove lo sfondo proprio non appare e non capisco dove 
sbaglio...
ecco il css:
DIV#back {
 background-image: url(../immagini/Tile170px.gif);
 background-repeat: repeat-y;
 background-position: left bottom;
 min-height:400px;
}
DIV#left{
 width: 170px;
 padding: 0;
 margin-top: 0px;
 float: left;
 text-align: left;
}
DIV#content {
margin-left: 170px;
clear:right;
min-height:400px;}
e l'html :
<div id="back">
<div id="left">Bla bla bla</div>
<div id="content">Bla bla bla</div>
</div>
Grazie per l'aiuto
Ciao
J

 mi son spiegato...
Ti sei spiegato ma il problema non e' di immediata risoluzione, e tu hai
commesso qualche errore. Il piu' importante e' che non hai considerato il
fatto che gli elementi float non occupano spazio e quindi, quando inseriti
in un elemento contenitore, non fanno in modo che il bordo inferiore del
box del contenitore scivoli giu' quando i contenuti aumentano in altezza.
Ad ogni modo, te la faccio breve e ti segnalo questa soluzione al tuo
problema:
http://xoomer.virgilio.it/undertheskin/test_2cols/
Ho adattato (praticamente, copiato) quanto indicato sull'autorevole sito di
A List Apart all'indirizzo:
http://www.alistapart.com/articles/negativemargins/
Leggitelo, fa capire molte cose.
Ciao.
-- 
~Nando~ :-/__.oO
Apostolo della Prova

 Ciao.
Ciao, grazie :)
Sono andato a  vedere entrambi i codici e ho cercato di capire come 
lavorano.
Mi son basato su quello di alistapart e scremandolo dal problema dei margini 
negativi l'ho riadattato al  mio scopo e devo dire che funziona, anzi in più 
rispetto al codice css ho tolto la parte inerente al
.clearing {
  height: 0;
  clear: both;
}
poiche' nel mio caso non influisce sul comportamento. (in realtà non capisco 
come mai funziona a dovere senza) :))
In pratica ho dovuto aggiungere lo sfondo oltre che al div#left anche al 
div#content e poi nelle pagine che vanno nel content racchiudere sempre il 
contenuto in un div per mantenere lo sfondo fino al footer...
Mah! Comunque così mi funziona su FF, IE ed Opera
Grazie mille
Ciao
J

 come mai funziona a dovere senza) :))
Strano, quella div e' indispensabile... hai tolto solo la regola CSS o hai
tolto anche la div dal markup?
Ti va di postare il codice?


 Ti va di postare il codice?
Tolto sia nel css che nell'html.
Ecco qua:
CSS:
/* Definizione del div CORNICE che centra tutto orizzontalmente e fissa la 
dim. a 750px */
#cornice {
 width: 750px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 10px;
 margin-bottom: 0px;
 padding:0px;
 text-align:left;
 background-color: #FFFFFF;
}
/* Definizione del div BACK che colora la colonna di sinistra fino al footer 
*/
#back {
 background-image: url(../immagini/tile.jpg);
 background-repeat: repeat-y;
 background-position: left ;
}
/* Definizione del div LEFT , cioč la colonna di sinistra */
#left{
 width: 170px;
 padding: 0;
 margin-top: 0px;
 float: left;
 text-align: left;
}
/* Definizione del div CONTENT cioč lo spazio principale sulla destra nella 
pagina */
DIV#content {
 margin: 0px 0px 0px 174px;
 // margin-left:175px;
 min-height:400px;
 background-image: url(../immagini/tile2.jpg);
 background-repeat: repeat;
 background-position: left ;
 }
/* Definizione del div FOOTER */
#footer {
 float:left;
 width: 750px;
 height: 25px;
 padding: 0;
 vertical-align: middle;
 CLEAR: both;
 background-color: #336699;
 margin-top:4px;
}
HTML:
Io nei vari div uso un include php per caricare dinamicamente il 
contenuto...
...
<body >
<div id="cornice">
<div id="back">
<div id="left"><?php include("Logo.php"); ?><?php include("indiceleft.php"); 
?></div>
<div id="content"><?php include("pagine.php"); ?></div>
</div>
<div id="footer"><h2>
xxxxx.com
 - E-Mail: xxxx &copy; 2005</h2>
</div>
</div>
</body>
...
In pratica l'inclusione di pagine.php a seconda di una variabile mi richiama 
degli html, ad esempio il #content - con una variabile specifica - si 
riempie con  "main.html" a cui semplicemente ho dovuto aggiungere come tag 
di apertura e chiusura un div:
Main.html:
<div>
<p>Quello che voglio</p>
</div>
In questo modo funza...
Il div clearing non c'č proprio e nemmeno la classe nel css...
Boh, spero ti/vi possa servire
Ciao
J

 Il div clearing non c'è proprio e nemmeno la classe nel css...
Si', ho visto. Fai questo test: metti nella div #left parecchio testo, in
modo la sua altezza superi di un po' i 400px; nella div #content metti poco
testo, in modo che la sua altezza sia minore di quella della div #left
(meglio ancora, per capire bene cosa accade, che sia sufficientemente
minore di 400px). Verifica cosa succede, sia con Internet Explorer che con
Firefox. Se e' tutto ok, allora sto impazzendo...
Fammi sapere :-)


 ha scritto nel messaggio 
news:ca9eqd8ksdru.e266quevbj8n$.dlg@40tude.net...

Effettivamente mettendo molto ma molto testo nel div#left, il div#content 
sembra "attaccarsi"  (il colore di sfondo prevarica sullo sfondo bianco del 
body) a sinistra al div#left. Probabilmente immagino perchè il div "vuoto" 
serva a mantenere il distacco SEMPRE in ogni situazione. Per mia fortuna il 
div#left deve contenere pochi links ma cmq nel caso so cosa devo aggiungere 
per farlo funzionare con testi eventualmente lunghi in altezza.
Grazie mille
Ciao
J 

 Ciao
Sto imparando... e ogni cosa che imparo, la comunico a chi ne avesse
bisogno :)
