Newsgroup: it.lavoro.professioni.webmaster
Titolo: Aiuto layout Css

Ciao a tutti,
sto facendo i primi passi nei css ma mi trovo veramente nei casini.
Sto ricontruendo un sito che ai tempi avevo fatto con le belle tabelle, ora 
volevo cimentarmi in un layout css.
Il layout č a 4 colonne una affiancata all'altra.
Ho fatto un content principale in modo che posso allineare tutto in centro 
allo schermo con all'interno 4 div, cosě:
<div id="content">
<div id="colonnasx">
Colonna 1
</div>
<div id="colonnasx2">
Colonna 2
</div>
<div id="colonnacentrale">
colonna centrale
</div>
<div id="colonnadx">
colonna destra
</div>
</div>
Attraverso il CSS setto un'immagine di background, nella prima colonna, 
questa č un'immagine di fondo piů grande della prima colonna e quindi dovrei 
vedere tutta l'immagine in background, il problema č che le colonne laterali 
sembrano non essere trasparenti e quindi vedo l'immagine solo nella prima. 
Ho provato a metterla nel div content in IE si vede ma firefox no.
Dove devo mettere l'immagine di fondo? Cosa devo impostare nel background 
delle altre colonne?
Altro problema, in una colonna mi trovo questa situazione che non riesco a 
risolvere con i CSS, o perlomeno non so cosa inventarmi:
 [IMG Freccia SX] Indientro - Avanti  [IMG Freccia DX]
Vorrei che anche le immagini siano link e quindi non posso metterle come 
fondo, questo blocchetto dovrebbe essere centrato in una colonna, e il testo 
deve essere allineato in verticale/centro con le immagini delle freccie, 
perchč queste sono piů alte.
Qualche suggerimento?
Garzie e ciao ciao

opss... ho dimenticato il css che sto utilizzando.
Ciao ciao
html, body {
margin: 0px;
padding: 0px;
font-family: Verdana;
font-size: 11px;
line-height: 18px;
}
#content {
 margin-right: auto;
 margin-left: auto;
 width: 795px;
 background-image: url(img/fondocuoco.jpg);
 background-repeat:no-repeat;
}
#colonnasx {
float:left;
padding: 0px;
width: 144px;
}
#colonnasx2 {
float:left;
padding: 0px;
width: 124px;
}
#colonnacentrale {
float:left;
padding: 0px;
width: 371px;
}
#colonnadx {
float:left;
padding: 0px;
width: 142px;
} 

 
Ciao

grazie per la risposta,
cosa molto bizzarra.. sotto questo messaggio incollo tutto.
Se nel css tolgo tutto il #colonnadx
il lavoro sembra essere corretto, ma come mai?? Se io nella pagina ho i 5 
div ma nel css solo 4?
PAGINA.HTM
<div id="content">
<div id="colonnasx">
Colonna 1
</div>
<div id="colonnasx2">
Colonna 2
</div>
<div id="colonnacentrale">
colonna centrale
</div>
<div id="colonnadx">
colonna destra
</div>
</div>
CSS:
html, body {
margin: 0px;
padding: 0px;
font-family: Verdana;
font-size: 11px;
line-height: 18px;
}
#content {
 margin-right: auto;
 margin-left: auto;
 width: 795px;
 background-image: url(img/fondocuoco.jpg);
 background-repeat:no-repeat;
}
#colonnasx {
float:left;
padding: 0px;
width: 144px;
}
#colonnasx2 {
float:left;
padding: 0px;
width: 124px;
}
#colonnacentrale {
background-color:#3300CC;
float:left;
padding: 0px;
width: 371px;
}
#colonnadx {
float:left;
padding: 0px;
width: 142px;
}
Per l'altro problema vorrei semplicemente
< IMMAGINE FRECCIA  scritta indietro - scritta avanti IMMAGINE FRECCIA >
Però l'immagine della freccia è più alta della scritta e la vorrei allineata 
in verticale tipo:
***                                               ***
*<*    INDIETRO        AVANTI  *>*
***                                               ***
Grazie per i suggerimenti 

 Garzie e ciao ciao
Di nulla 
Ciao
Francesco