Problema layout 2 colonne sfondo trasparent

**world war** · 26-04-2009, 23:33

codice:

div#container {
	position:relative;
	margin:0 auto;
	width:850px;
	background:url(../images/table_background_full/table_background_center.png) repeat-y;
}

div#content_left {
	width:20%;
	float:left;
}

div#content_right {
	width:80%;
	float:right;
}

Con questo codice avrei fatto un contenitore in cui all'interno ci sono 2 colonne; il contenitore avrebbe uno sfondo trasparente.
Su IE 7/8 funziona tutto perfettamente mentre su FF 3 (il 2 non l'ho provato) non si vede lo sfondo; ho provato anche a settare background: transparent alle 2 colonne ma continua il problema.

C'è qualche soluzione per il mio problema?

**Mich_** · 27-04-2009, 09:54

Non ci sono gli elementi per poter dare una risposta ragionata.

Tiro ad indovinare.
Hai sbagliato il path.

Il percorso del file deve essere relativo al file CSS, non al file HTML (pero` IE riconosce anche se il percorso e` relativo al file HTML)

**world war** · 27-04-2009, 13:34

Quali sono gli elementi mancanti per indicarli e trovare una soluzione?

Il path dell'immagine è già riferito al CSS quindi è giusto.

**Mich_** · 27-04-2009, 15:16

Altro errore frequente:
mancanza del clear
Hai usato il float nei blocchi interni ad un contenitore: prima della fine del contenitore e` necessario un blocco conil clear (eventualmetne da inserire come consigliato in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float).

Se ancora non va, la cosa piu` semplice e` se posti li link.

In alternativa serve:
- il codice (X)HTML relativo al pezzo che da` il problema
- la DTD usata
- il codice CSS dei tag <body> e <html>
- in quali browser hai testato

**world war** · 27-04-2009, 16:55

Forse non ho inserito il clear, comunque ecco il codice XHTML e CSS completo

codice:

	<div id="tableindexcontainer">
		<div id="tableindextop"></div>
		<div id="tableindexcenter">
			
		</div>
		<div id="tableindexfooter">
		
		</div>
	</div>
 
	<div id="top"></div>
	<div id="container">
	<div id="content_left">
 
	
 
	</div>
	<div id="content_right">
	
 
	
 
	
	</div>
	</div>
	<div id="footer">
		
	</div>

codice:

body {
	margin:0;
	padding:0;
	font-family:"Trebuchet MS", Arial, sans-serif;
	font-size:80%;
	color:#FFF;
	background:#FFF url(../images/background_2.jpg) top center no-repeat fixed;
}

div#top {
	clear:both;
	width:850px;
	height:13px;
	background:url(../images/table_background_full/table_background_top.png) no-repeat;
	margin:0 auto;
}

div#container {
	position:relative;
	margin:0 auto;
	width:850px;
	background:url(../images/table_background_full/table_background_center.png) repeat-y;
}

div#content_left {
	width:20%;
	float:left;
	background:transparent;
}

div#content_right {
	width:80%;
	float:right;
	background:transparent;
}

div#footer {
	clear:both;
	width:850px;
	height:45px;
	background:url(../images/table_background_full/table_background_footer.png) no-repeat;
	margin:0 auto;
}

/*header*/

div#tableindexcontainer {width:960px; margin:0 auto; position:relative;}

div#tableindextop {clear:both; background:url(../images/table_index_full/table_index_top.png) no-repeat; height:30px;}

div#tableindexcenter {clear:both; background:url(../images/table_index_full/table_index_center.png) repeat-y;}

div#tableindexfooter {
	clear:both;
	background:url(../images/table_index_full/table_index_footer.png) no-repeat;
	height:91px;
	padding-top:25px;
}

**Mich_** · 27-04-2009, 17:10

A cosa serve il posizionamento nel #container? Se non sai rispoondere toglilo.

Nel body (e probabilmente anche nell'html) manca:
width: 100%;

E in effetti ti manca il clear.
Quello che c'e` nel footer serve per il footer, ma non per allungare il #container.
In pratica nel tuo codice hai il #container vuoto, dato che i blocchi flottati vengono esclusi dal flusso della formattazione. E se il blocco e` vuoto, anche l'immagine di sfondo non viene vista.

Devi quindi applicare il clear, ad esempio come consigliato nella pillola citata, al blocco
#container:after { ... }

**world war** · 27-04-2009, 20:27

Grazie mille, funziona perfettamente.

Discussione: Problema layout 2 colonne sfondo trasparent

Strumenti discussione

Ricerca discussione

Visualizza

Problema layout 2 colonne sfondo trasparent

Permessi di invio