background falsa colonna

**Balamb Seed** · 09-04-2010, 15:40

salve a tutti
spero di non postare un problema già risolto, ho provato a cercare nei post ma non ho visto risultati

il problema è il seguente:
sto sviluppando la mia prima pagina web impaginata con i css

è una pagina con un layout a 2 colonne con questa struttura

codice:

 
<body>   
  <div id:"telaio">       
     <div id:"margine superiore"></div>       
     <div id:"titolo"></div>        
     <div id:"falsacolonna">         
         <div id:"menu"></div>         
         <div id:"contenuto"></div>  <!-- il div con float right che contiene i contenuti   
     </div>
   <div id:"margineinferiore"></div>    
  </div> 
</body>

questo invece è il codice del css

codice:

 
#margineinferiore {background: url(Immagini/Generale/bordoinferiore.gif); clear: both;
                        height:  15px; width: 1000px}  

#titolo {background:    url(Immagini/Generale/logo.jpg); height: 200px; width: 1000px}  

#telaio {left: 50%; margin-left: -500px; margin-right: auto; min-height: 50%; 
            position: relative; width: 1000px}  

#menu {float: left; width: 200px} 

#contenuto {float: right; width: 800px}  

#menutitolo {color: yellow; font:  italic 12px arial; font-size: 12px; font-style: italic; 
                  margin: 5px}  

#menutesto {color: white; font:    italic 12px; font-family:    arial; font-size: 12px;
                   font-style: italic} 

a.menu:link {color: white; text-decoration: none;}  

a.menu:visited {color: white; text-decoration: none;} 

h1 {color: red; font-size: 15pt; font-style: italic; text-align: center}  

h2 {color: black; font-size: 12pt; font-style: italic; margin:         5px; text-align: left}  

h3 {color: black; font-size: 10pt; margin:        5px; text-align: left} 

h4 {color: black; font-size: 12pt; font-style: italic; margin:         5px; text-align: center}  

#falsacolonna {background:    url(immagini/generale/sfondofalsacolonna.jpg);
                      background-repeat: repeat-y; height: 100%; width: 1000px}

in pratica in IE funziona tutto ma in firefox non mi visualizza la falsa colonna a meno che non imposto nel foglio di stile il valore height, però anche impostandolo al 100% quando i contenuti impongono la scrollbar lo sfondo della falsa colonna si ferma alla dimensione impostata

come si può risolvere il problema??

**Outshine84** · 09-04-2010, 15:50

io proverei a sotituire ai : gli = ... non so se cambi qualcosa per i browser ma è una sintassi non così comune

codice:

<body>   
  <div id="telaio">       
     <div id="margine superiore"></div>       
     <div id="titolo"></div>        
     <div id="falsacolonna">         
         <div id="menu"></div>         
         <div id="contenuto"></div>  <!-- il div con float right che contiene i contenuti   
     </div>
   <div id="margineinferiore"></div>    
  </div> 
</body>

e nei css metterei height: auto;

codice:

#falsacolonna {background:    url(immagini/generale/sfondofalsacolonna.jpg);
                      background-repeat: repeat-y; height: auto; width: 1000px}

**Balamb Seed** · 12-04-2010, 07:57

scusa per i : è stato un errore mio nel digitare il codice html nel post, nel codice originale uso i =.

per l'idea di impostare la proprieta height auto nel css ci avevo già pensato ma non ho risolto nulla, mi da gli stessi problemi.

ho provato anche a sostituire il file jpg (che una volta mi aveva fatto uno scherzo simile con un jpg difettoso) ma senza risultati

ho notato che stranamente se però tolgo il div falsa colonna e imposto il background della falsa colonna sul div telaio funziona tutto anche se così facendo i bordi arrotondati in alto e in basso vanno a farsi benedire

**Mich_** · 12-04-2010, 09:03

Non vedo il clear all'interno di "falsacolonna". Dove ci sono dei float e` necessario che vengano "chiusi" con il clear, altrimenti i blocchi flottanti escono dal flusso logico dei blocchi non float.

Vedi ad esempio:
[Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float
Simple Clearing of Floats
The New Clearfix Method

**Balamb Seed** · 12-04-2010, 09:51

seguendo il tuo consiglio ho inserito la proprietà clear: both sul div falsacolonna.

nonostante questo le cose non cambiano

se inserisco height 100% mi mette lo sfondo fino a dove non servono le scroll bar

se inserisco height auto o non inserisco la proprietà height non mi fa vedere lo sfondo di peso

da quello che ho capito sembra che il div falsa colonna non veda il contenuto dei div interni come suo e quindi non avendo contenuto il browser non visualizza neanche lo sfondo però non so come fare a gestire la cosa

**Mich_** · 12-04-2010, 11:01

Non e` sul div "falsacolonna" che devi dare il clear, ma in un blocco posto all'interno del div, prima della fine di esso.

Oppure (come suggerito dai link postati) all'oggetto
#falsacolonna:after

**Balamb Seed** · 12-04-2010, 15:26

siete grandi!! ora funziona tutto

grazie mille per l'aiuto, e scusatemi per i link del post precedente (quando ho letto la risposta ero di corsa e non li avevo visti

)

Discussione: background falsa colonna

Strumenti discussione

Ricerca discussione

Visualizza

background falsa colonna

Permessi di invio