Newsgroup: it.comp.www.html
Titolo: Trasformare una tabella in css

Ho una tabella con due colonne e una riga e vorrei trasformarla. Visto 
che la tabella mi serve per contenere una immagine a sinistra di 72 px 
per 72px e la cella di destra contiene un testo, sto provando a fare la 
conversione con i fogli di stile:
 
Ad esempio:
 
   <table  width="100%">
   <tbody>
     <tr>
       <td colspan="2" rowspan="1">
       <table width="100%">
         <tbody>
           <tr>
             <td width="144">INFORMATICA</td>
             <td align="center">I computer nell'era moderna</td>
           </tr>
         </tbody>
       </table>
       </td>
     </tr>
     <tr>
       <td align="center" valign="middle" height="82" width="74"><img 
title="computer" src="images/pc.jpg" border="0">
       </td>
       <td>Al giorno d'oggi il computer č indispensabile e trova il suo 
impiego nei piů disparati settori.</td>
     </tr>
   </tbody>
   </table>
 
Avevo pensato di usare questo css per ogni una delle tabelle:
 
http://cssdesk.com/QqVhZ
 
 
ma ho incontrato vari problemi, ad esempio non riesco a fare stare 
l'immagine a larghezza fissa con il testo che occupi il rimanente spazio 
fino ad arrivare al 100%. Mi piacerebbe ci fosse
width: 100%-72px;
 
Poi non riesco ad allineare il testo verticalmente centrando come con 
valign delle tabelle. e non ho capito se esiste nowrap come con le tabelle.
 
Se il link non funziona questo č il codice:
 
#content {
   overflow:auto;
   width: 100%;
   border: 1px solid black;
   background: gray;
   margin: 2em auto;
}
 
#left, #right {
 
   margin:0px;
   padding: 0px;
   background: white;
}
 
#left {
   width: 72px;
   float:left;
   vertical-align:text-top;
}
#right {
   width: 70%;
   float:right;
}
 
***
 
<div id="content">  <div id="left">
<div id="object1">some stuff</div>
 
</div>  <div id="right">
<div id="object3">unas cosas</div>
<div id="object4">mas cosas para ti
mas cosas para ti
mas cosas para ti
mas cosas para ti
mas cosas para ti
mas cosas para ti
mas cosas para ti
mas cosas para ti</div>
</div></div>
 
 
Mi pare molto complicato sostituire le tabelle, eppure ho sentito dire 
che č deprecato usarle per allineare il testo.
 
-- 
Sandro kensan 
www.kensan.it
 geek site
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

Ho trovato:
 
.right-col {background:#ffa;}
.left-col {background:#faa;}
.center-col {background:#faf;}
 
.container {float:left; width:100%; margin-right:-100px;}
.container2 {margin-right:110px;}
.left-col  {float:left; width:100px; display:inline;}
.center-col {margin-left:110px; }
.right-col {float:right; width:100px;}
 
***
 
<div class="right-col">
	width = 100px<br>
	right-col
</div>
<div class="container">
	<div class="container2">
		<div class="left-col">
			width = 100px<br>
			left-col
		</div>
		<div class="center-col">
width = 100% - 100px -100px<br>
center-col
		</div>
	</div>
</div>
<div class="right-col">
	width = 100px<br>
	right-col
</div>
 
 
Però non ho compreso minimamente come si tratta gestisce la "linea" 
sotto la quale porre una linea di testo, per esempio:
 
<div class="right-col">
	right-col<br>
	right-col<br>
	right-col<br>
	right-col<br>
</div>
<div class="container">
	<div class="container2">
		<div class="left-col">
			left-col
		</div>
		<div class="center-col">
                         center
		</div>
	</div>
</div>
 
precipitevolissimevolmente<br>
 
non mi mette la parola sotto tutte le colonne ma un po' a caso in uno 
spazio libero. Avete un link che mi spieghi come tirare una linea e 
mettere il testo sotto tutte le colonne? Ho provato a mettere un div o 
uno span ma non funziona.


 spazio libero.
 
Ho trovato una soluzione:
 
.intervallo {float:left;width:100%;height:10px;}
 
<div class="intervallo"></div>
precipitevolissimevolmente<br>
 
è la soluzione migliore?


 Ho una tabella con due colonne e una riga e vorrei trasformarla. 
 
Io vedo due colonne e due righe, nel tuo codice.
 
Quello che vuoi ottenere somiglia a questo:
 
INFORMATICA   I computer nell'era moderna
 
IIII
IIII  Al giorno d'oggi...
IIII
 
Giusto?
 
Ti servono i bordi attorno a ogni cella o solo attorno al tutto?
 
Io farei cosi`:
 
<div class="all">
 <hgroup>
  <h1>Informatica
  <h2>I computer nell'era moderna</h2>
 </hgroup>
 
 <div class="row">
  <img src="..." />
  <span>Al giorno d'oggi</span>
 </div>
</div>
 
 
Nel css:
 
 
div.all { border: 1px solid #000; }
 
div.all hgroup h1 { width: 144px; display: inline; text-transform: 
uppercase;}
 
div.all hgroup h2 { display: inline; }
 
div.all div.row { clear: both; }
 
div.all div.row img { width: 72px; float: left; display: block;}
 
div.all div.row img { display: block; margin-left: 82px; }
 
 
Fare il nowrap e allineare verticalmente e` complicato, ma sbattendosi un 
po' forse ci si riesce.
 
Parti da qui e vedi dove vai a finire. :)
 
Bye.


 div.all div.row img { display: block; margin-left: 82px; }
 
Ho cercato di modificare il codice ma sono troppo distante da quel che 
mi piacerebbe, in particolare non so aggiungere la colonna di destra, 
gli elementi sono posizionati molto male e non saprei correggere la 
posizione.
 
Invece lavorando sul modello che ho fatto vedere in precedenza sono 
arrivato a qualche cosa di abbastanza buono ma con qualche difetto:
 
Faccio vedere il link:
http://www.kensan.it/tmp/prova.html
 
questo è invece il css:
http://www.kensan.it/tmp/prova.css
 
 
Quel che non riesco a fare è separare i vari blocchi, ci ho provato con 
la barra gialla che però non è una soluzione valida. Infatti si vede che 
il div grigio che contiene il testo "La musica d'oggi" deborda 
superiormente fino al div in azzurro.
 
Potrei coprire il div grigio debordante con una barra bianca ma non mi 
piace come soluzione, dovrebbe essercene una semplice. Hai suggerimenti?
 
Poi ho fatto il div grigio scuro in fondo alla pagina che fa stare 
"sotto" la scritta "precipitevolissimevolmente" ma non fa spessore e 
infatti la scritta si sovrappone alla barra in grigio scuro, anche qui 
non ho trovato, ancora, soluzioni.
-- 
Sandro kensan 
www.kensan.it
 geek site


 superiormente fino al div in azzurro.
 
Risolto, bastava togliere il punto in modo da rendere il selettore del 
css indipendente (non ho capito bene il perché). Ecco il nuovo codice:
 
http://www.kensan.it/tmp/prova2.html
 
http://www.kensan.it/tmp/prova2.css
 
 
Un ultimo difetto riguarda il campo grigio in alto a destra con la 
scritta "La musica d'oggi 1" che ha inspiegabilmente una altezza 
inferiore di 2 pixel quando dovrebbe essere uguale a tutti gli altri 
campi grigi.
 
Per ovviare al problema ho aggiunto una righina nera alta 2 pixel sotto 
il div ma non è una buona soluzione: consigli?
 
Se tolgo la righina nera l'immagine in alto si sposta a destra sotto "La 
musica d'oggi 1" ed è un vero disastro.


 musica d'oggi 1" ed è un vero disastro.
 
Il problema si risolve togliendo il div senza contenuto che mette una 
riga nera prima delle tre colonne: left, center e right:
 
<div class="riga"></div>
.riga {background:#555;}
.riga {float:left;height:10px; width:100%;}
 
-- 
Sandro kensan 
www.kensan.it
 & 
www.qiqi.it
 geek site
