creare una tabella 3x3 con i div con alt e larg fissa meno l'alt di una riga

[romaluca]

Devo creare una tabella 3x3

------------------
| | | |
-------------------
| | | |
-------------------
| | | |
-------------------

L'altezza e la larghezza delle celle sono tutte fisse meno la l'altezza della seconda riga.
Come devo fare?
Grazie

[Al_katraz984]

Dipende cosa ci devi inserire in quella tabella..

[ricman]

Originariamente inviato da romaluca
L'altezza e la larghezza delle celle sono tutte fisse meno la l'altezza della seconda riga.

Diamo per scontato che non vuoi metterci dei dati tabellari...

Per esempio puoi usare 3 div principali che sono le tue tre "righe"

<div style="height:100px; background-color:#99CC33 ">11111111111111111111111</div>
<div style="background-color:#009966 ">22222222222</div>
<div style="height:100px; background-color:#996699 ">3333333333333</div>

e poi dentro ogni riga ci metti il contenuto che vuoi.

[Al_katraz984]

Che poi se sono dati tabellari usa le tabelle..

oppure:

<div id="primo">
<span></span><span></span><span></span>
</div>
<div id="centrale">
<span></span><span></span><span></span>
</div>
<div id="ultimo">
<span></span><span></span><span></span>
</div>


Ogni <div> è una riga e gli <span> sono le celle..

Agiiungi un CSS cosi

div#primo, div#ultimo {
height: 100px;
width: auto;
}

div#centrale {
height: auto;
}

Molto alla buona.. cmq..

[romaluca]

ho provato questa soluzione:
<div id="basetabella">


<div class="riga">
<div class="topleft"></div>
<div class="top"></div>
<div class="topright"></div>
</div>

<div class="rigacenter">
<div class="left"></div>
<div class="center">Ciao</div>
<div class="right"></div>
</div>


<div class="riga">
<div class="downleft"></div>
<div class="down"></div>
<div class="downright"></div>
</div>
</div>


Questa è la parte css:

#basetabella {top:0;left:0;position:absolute;width:600px;height :30px;padding:0px;text-align:left;}

.riga {position:relative;width:600px;height:10px;margin: 0px;padding:0px;}

.rigacenter {position:relative; width:600px;height:20px;margin:0px;padding-left:0px;padding-top:0px;padding-right:0px;}

.topleft {position:absolute;width:10px;height:10px;margin-left:0px;background-image: url(interfaccia/topleft.gif);}
.top {position:absolute;width:580px;height:10px;margin-left:10px;background-image: url(interfaccia/top.gif); background-repeat: repeat-x;}
.topright {position:absolute;width:10px;height:10px;margin-left:590px;background-image: url(interfaccia/topright.gif);}

.left {position:absolute;width:10px;height:20px;margin-left:0px;background-image: url(interfaccia/left.gif);background-repeat: repeat-y;padding-bottom:0px; }
.center {position:absolute;width:580px;height:10px;backgro und-color:#FFFFFF;margin-left:10px;padding-bottom:10px;padding-left:10px;}
.right {position:absolute;width:10px;height:20px;margin-left:590px;background-image: url(interfaccia/right.gif);background-repeat: repeat-y; padding-bottom:0px;}

.downleft {position:absolute;width:10px;height:10px;margin-left:0px;background-image: url(interfaccia/downleft.gif);}
.down {position:absolute;width:580px;height:10px;margin-left:10px;background-image: url(interfaccia/down.gif);background-repeat: repeat-x; }
.downright {position:absolute;width:10px;height:10px;margin-left:590px;background-image: url(interfaccia/downright.gif);}


Solo che ora devo mettere l'altessa della rigacenter nn fissa ma che si ridimensiona a seconda del contenuto che sta dentro la cella center.
Qualcuno sa come devo farE?
Grazie

[Al_katraz984]

METTI UN

height: auto

[romaluca]

Ho messo cosi:
#basetabella {position:relative;width:600px;height:auto;padding :0px;text-align:left;margin:0 auto;}

.riga {position:relative;width:600px;height:10px;margin: 0px;padding:0px;}

.rigacenter {position:relative; width:600px;height:auto;margin:0px;padding-left:0px;padding-top:0px;padding-right:0px;}

.topleft {position:absolute;width:10px;height:10px;margin-left:0px;background-image: url(interfaccia/topleft.gif);}
.top {position:absolute;width:580px;height:10px;margin-left:10px;background-image: url(interfaccia/top.gif); background-repeat: repeat-x;}
.topright {position:absolute;width:10px;height:10px;margin-left:590px;background-image: url(interfaccia/topright.gif);}

.left {position:absolute;width:10px;height:auto;margin-left:0px;background-image: url(interfaccia/left.gif);background-repeat: repeat-y;padding-bottom:0px; }
.center {position:absolute;width:570px;height:auto;backgro und-color:#FF00FF;margin-left:10px;padding-bottom:10px;padding-left:10px;}
.right {position:absolute;width:10px;height:auto;margin-left:590px;background-image: url(interfaccia/right.gif);background-repeat: repeat-y; padding-bottom:0px;}

.downleft {position:absolute;width:10px;height:10px;margin-left:0px;background-image: url(interfaccia/downleft.gif);}
.down {position:absolute;width:580px;height:10px;margin-left:10px;background-image: url(interfaccia/down.gif);background-repeat: repeat-x; }
.downright {position:absolute;width:10px;height:10px;margin-left:590px;background-image: url(interfaccia/downright.gif);}

ora la cella center ha le dimensioni gioste per contenere il testo
Ma le altre celle nn considerano + quella centrale e l'ultimariga sta subito dopo la prima riga e nn sopo la seconda.
Come devo fare?

[Al_katraz984]

Guarda.. Secondo me stai facendo tanto tanto casino x niente..

Forse se spieghi quello ke ci devi mettere dentro ti aiuto meglio..

Xke se la tua idea è quella di fare un layout ci sono metodi molto piu efficaci per farlo..

[romaluca]

devo fare una "cornice"

nella cella centrale ci va testo e antri elementi.
Nelle altre ci vanno le immagini

NEgli angoli ci vanno delle immagini gif che comprendono trasparenze quindi nel livello sotto ci deve essere l'immagine dello sfondo.
Spero di essermi spiegato

Praticamente è tipo quello che spiegano i diversi tutorials che si trovano in giro cercando "css angoli arrotondati"
Solo nn vanno bene nel mio caso perche in corrispondenza delle trasparenze dei miei angoli si vedono le immagini top,down,left,right

[Al_katraz984]

ma i nifty-corner non vanno bene???

prova a cercare sul sito ci sono...