tabella al 100%

[Rubberick]

Ciao ragazzi dovrei fare una semplicissima tabella formata da 3 celle, ad ogni cella voglio assegnare un background



Mi sono accorto pero' che se assegno alla cella centrale il 100% questa invade anche le altre cellette accanto, l'unica soluzione che mi viene in mente e' di piazzare una gif trasparente della dimensione della cella per far si che il box centrale non invada le altre 2.

<table cellpadding="0" cellspacing="0" width="800">
<tr>
<td background="media/web_07.png" width="160" height="62">[img]media/pixel.gif[/img]</td>
<td background="media/web_08.png" height="62" width="100%"></td>
<td background="media/web_09.png" width="160" height="62"></td>
</tr>
</table>

Dato che siamo nell'era dell'xhtml e vorrei cercare di evitare una scrittura sporca delle pagine... c'e' modo di risolvere il tutto in modo + pulito o con dei div?

PS: i valori background, height, width etc sono solo perche' ci sto ancora lavorando poi passo tutto a css e ci piazzo gli id

[Rubberick]

quanto sono scemo invece di usare la table posso usare direttamente 3 div, solo che scritti cosi' non si attaccano lateralmente vanno a finire a capo come posso metterli tutti sulla stessa riga?

<div style="background-image:url(media/web_07.png); height:62px; width:160px;"></div><div style="background-image:url(media/web_08.png); height:62px;"></div><div style="background-image:url(media/web_09.png); height:62px; width:160px;"></div>

[maurelio79]

Tramite css dovresti dargli l'attributo float.
Questo è il codice html:

<div id="content">
<div id="contentleft"></div>
<div id="center"></div>
<div id="contentright"></div>
</div> 

Questo il css:

div#content {
    width: px;
    height: px;
  }


div#contentleft {
    float: left;
    width: px;
    height: px;
  }


div#contentright {
    float: right;
    width: px;
    height: px;
  }

div#center {
    width: px;
    height: px;
  } 

Prova e poi dimmi.

[Rubberick]

ho provato funziona ma purtroppo non lo posso usare in quanto lo sfondo per le 3 sarebbe costituito da png a 24 bit in trasparenza, utilizzare il float porta il div floattato a sovrastare il div centrato, sebbene testo e contenuto interno "partano" all'inizio subito dopo il div flottato, il background del centrale inzia al pixel zero, in sostanza si sovrappongono il background del floattato e del centrale come se fossero 2 layer uno sull'altro

a meno di non trovare il modo per far si che anche il bg sia compreso in un area del tipo left:+160 e right:-160 non posso usare questa soluzione

[maurelio79]

Aspè, aspè che non ho ben capito...

Originariamente inviato da Rubberick
ho provato funziona ma purtroppo non lo posso usare in quanto lo sfondo per le 3 sarebbe costituito da png a 24 bit in trasparenza, utilizzare il float porta il div floattato a sovrastare il div centrato, sebbene testo e contenuto interno "partano" all'inizio subito dopo il div flottato, il background del centrale inzia al pixel zero, in sostanza si sovrappongono il background del floattato e del centrale come se fossero 2 layer uno sull'altro

a meno di non trovare il modo per far si che anche il bg sia compreso in un area del tipo left:+160 e right:-160 non posso usare questa soluzione

Non capisco, hai dato le larghezze hai div? Lo sfondo di quale div si sovrappone a quale div?

[Rubberick]

ti preparo un'img e ti faccio vedere...

[Rubberick]

ecco qua, guarda qui c'e' la versione con la tabella che funziona come dovrebbe e quella invece con i div che non funziona

[maurelio79]

Mmhmm, prova a mettere al div centrale un margin-left pari alla larghezza del div di sx.

Comunque l'immagine non è molto esplicativa.

Hai messo le larghezze ai div? Lo sfondo è un'immagine che si ripete giusto? Semmai posta il codice html e css.

[Rubberick]

ok perfetto, con il margin left si risolve, devo solo capire come mai il floating right mi va a capo ^^

[Rubberick]

sara' perche' forse non ho specificato la width di quello centrale? ma a me serve sia praticamente tutto lo spazio meno quello dei 2 float.. quindi non posso specificarlo in pixel..

<div style="width:600px; height:62px;"><div style="float:left; width: 160px; height:62px; background-image:url(media/web_07.png); display:table-cell;"></div><div style="height:62px; background-image:url(media/web_08.png); margin-left:160px;"></div><div style="float:right; width: 160px; height:62px; background-image:url(media/web_09.png);"></div></div>