Tabella per la gestione dei contenuti

[Valeria75]

Ciao, partendo dal presupposto che non è corretto utilizzare le tabelle per impostare i contenuti ma è necessario usare i CSS,
come posso trasformare una tabella di questo tipo:



<table width="200" border="0" cellpadding="0" cellspacing="4">
<tr>
<td width="24">1</td>
<td width="62">immagine</td>
<td width="100">testo testo </td>
</tr>
<tr>
<td bgcolor="#CCCCCC">2</td>
<td bgcolor="#CCCCCC">immagine</td>
<td bgcolor="#CCCCCC">adasfdsa</td>
</tr>
<tr>
<td>3</td>
<td>immagine</td>
<td>fdgsdge</td>
</tr>
<tr>
<td bgcolor="#CCCCCC">4</td>
<td bgcolor="#CCCCCC">immagine</td>
<td bgcolor="#CCCCCC">bdsdbdsd</td>
</tr>
</table>


in CSS?

 

[dead]

Una tabella 3x4 con i div è fattibile ma un po' complicata.

Secondo me comunque stai sbagliando l'approccio. Non puoi ragionare come facevi con le tabelle, perchè i div NON SONO tabelle e non si può fare una traduzione pari pari come se stessi traducendo dall'italiano all'inglese.
Devi piuttosto analizzare l'informazione che vuoi presentare e trovare il modo più corretto di presentarla.

Leggendo il tuo codice hai degli elementi costituiti da: numero, immagine, descrizione, da presentare su righe successive.

Premetto che dovrei saperne di più sugli scopi, ma io imposterei la presentazione con elenchi numerati, e sfruttando le classi, con i CSS gli do l'aspetto che preferisco. Capisci il concetto?


<ol class="lista">
<li class="elemento">
<img alt="descrizione immagine" src="miaimmagine.jpg" class="immagine" />
<span class="testo">qui metto il mio testo...</span>
</li>
<li class="elemento">
<img alt="descrizione immagine" src="miaimmagine.jpg" class="immagine" />
<span class="testo">qui metto il mio testo...</span>
</li>
<li class="elemento">
<img alt="descrizione immagine" src="miaimmagine.jpg" class="immagine" />
<span class="testo">qui metto il mio testo...</span>
</li>
<li class="elemento">
<img alt="descrizione immagine" src="miaimmagine.jpg" class="immagine" />
<span class="testo">qui metto il mio testo...</span>
</li>
</ol>

 

[Valeria75]

Grazie per la risposta!!!

Ma quindi se dovessi gestire X differenti colonne come imposterei i vari allineamenti di ogni colonna??

Mi spiego: con due colonne è piu semplice, imposto l'align di un elemento...

Ma se ho X colonne da gestire tramite DIV? una allinata a DX, una al Centro, una a SX ecc??

Grazie ancora

 

[dead]

Se hai più di tre colonne, o sono dei veri e propri dati (quindi si usa una tabella), oppure devi trovare un impostazione alternativa.

Ripeto: non devi cercare di simulare una tabella se i tuoi dati non sono tabellari. Cerca un'altro modo di presentarli.

Se posti il link cercherò di essere più specifico, ma senza dettagli non saprei dirti di più.

 

[Valeria75]

Ora faccio alcune prove. Ma per fare in modo che un HTML di questo tipo (tuo post)

<img alt="descrizione immagine" src="miaimmagine.jpg" class="immagine" />
<span class="testo">qui metto il mio testo...</span>

abbia sempre una lunghezza prestabilità per ognuna delle due "colonne" (aree), come posso fare? Intendo: l'immagine potrebbe variare in dimensione, idem il testo... io vorrei avere un'area fissa per l'immagine ed una fissa per il testo, per fare in modo che testo e immagine sia sempre allineati!

Grazie ancora

 

[Valeria75]

Potresti darmi quest'ultimo sul posizionamento fisso della "spaziatura" indipendentemente dal contenuto?

Grazie ancora

 

[lukeonweb]

Nel caso in cui l'immagine cambia di dimensione il problema si crea anche con una tabella...

 

[Valeria75]

In una tabella potresti impostare il width di una specifica colonna; tu mi risponderai: anche con i CSS!

Ok

ma se ho 3 ipotetiche informazioni da visualizzare in colonna, tramite div non posso fare

<div id=1>
<div id=2>
<div id=3>

impostando 3 width, in quanto i div andranno a capo e non si affiancheranno tra loro

 

[dead]

Ora faccio alcune prove. Ma per fare in modo che un HTML di questo tipo (tuo post)

<img alt="descrizione immagine" src="miaimmagine.jpg" class="immagine" />
<span class="testo">qui metto il mio testo...</span>

abbia sempre una lunghezza prestabilità per ognuna delle due "colonne" (aree), come posso fare? Intendo: l'immagine potrebbe variare in dimensione, idem il testo... io vorrei avere un'area fissa per l'immagine ed una fissa per il testo, per fare in modo che testo e immagine sia sempre allineati!

Grazie ancora

Se l'immagine è più grossa dello spazio assegnato non ci stà, ne con le tabelle ne coi div.
Puoi usare un codice di questo tipo:

<style type="text/css"><!--
.a {width:20%;}
.b {width:79%; overflow:auto; height:auto;}
.c {width:39%;}
.d {width:60%;}
.a,.b,.c,.d { float:left;}
--></style>

<div>
<div class="d">
<div class="a">1</div>
<div class="b"><img alt="descrizione" src="miaimmagine.gif" /></div>
</div>
<div class="c">pippo pippo</div>
</div>


l'overflow lo puoi mettere auto se vuoi le barre di scorrimento se l'immagine è più grossa dello spazio assegnato, oppure hidden se vuoi che la parte in eccesso scompaia.

Ogni volta che ripeti il codice sopra crei una nuova riga.

Tieni conto che la somma delle width a+b e c+d, più eventuali margin, padding e bordi, NON deve superare 99%

ciao.

 

[Valeria75]

Grazie per l'aiuto!!