[ CSS ] Come raggiungo questo?

[Bukowski]

Salve a tutti,
ho un piccolo dilemma con i CSS ...

Devo raggiungere un risultato come questo:
[QUOTE]
.tableless {
border: 1px solid #FF0000;
}

<table width="216" height="79" border="0" cellpadding="1" cellspacing="1" class="tableless">
<tr>
<td height="21" bgcolor="#FF0000">Titolo del box </td>
</tr>
<tr>
<td bgcolor="#FF0000"></td>
</tr>
</table>



QUOTE]

E' ovvero una tabella con un bordo ESTERNO di 1 px (questo è l'effetto che vorrei creare) e 2 celle suddivise, appunto, da questo bordo "interno" bianco. Spiegarlo non è facile ... ho postato il codice proprio per farvelo vedere.

Come raggiungo un risultato uguale usando SOLO i css?
Mi sto impiccando!

Grazie

[Francis87]

border-spacing: 1px;
padding: 1px;

[Bukowski]

Originariamente inviato da Francis87

border-spacing: 1px;
padding: 1px;

Grazie .. non conoscevo proprio il border-spacing!!!

Accidenti quante cose ancora da imparare!

[Francis87]

non si finisce mai
verissimo!

[Bukowski]

Abbiamo cantanto vittoria troppo presto

#box {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	background: #FF0000;
	padding: 1px;
	border: 1px solid #FF0000;
	border-spacing: 1px;
	border-collapse:separate;
}

non va .. non separa ...
Dagli esempi che trovo in giro mi sembra che il border spacing venga usato insieme ad una tabella .. io invece non vorrei proprio usarle

Che ne pensi?

[Bukowski]

up

[delfina blu]

.titolo {
   font: normal 10px Verdana, Arial, Helvetica, sans-serif;
   background: #FF0000;
   padding: 1px;
   border: 1px solid #FF0000;
   margin: 1px 0px 0px 0px;
   width: 216px;
   height: 21px;
}
.corpo{
   font: normal 10px Verdana, Arial, Helvetica, sans-serif;
   background: #FF0000;
   padding: 1px;
   border: 1px solid #FF0000;
   margin: 1px 0px 0px 0px;
   width: 216px;
   height: 50px;
}

<div class="titolo">Titolo</div>
<div class="corpo">Corpo</div>

spero di aver capito giusto

[Bukowski]

Magari .. manca il bordo 1px attorno a tutta la "cella"

Mi sa che dovrò nidificare il DIV dentro altri 2 ... uffa.
A sto punto me tengo le tabelle?

[delfina blu]

<style>
.titolo {
   font: normal 10px Verdana, Arial, Helvetica, sans-serif;
   background: #FF0000;
   padding: 1px;
   border: 1px solid #FF0000;
   margin: 1px 0px 0px 0px;
   width: 216px;
   height: 21px;
}
.corpo{
   font: normal 10px Verdana, Arial, Helvetica, sans-serif;
   background: #FF0000;
   padding: 1px;
   border: 1px solid #FF0000;
   margin: 1px 0px 0px 0px;
   width: 216px;
   height: 50px;
}
.contorno{
   border: 1px solid #000000;
   width: 216px;
}
</style>

<div class="contorno">
<div class="titolo">Titolo</div>
<div class="corpo">Corpo</div>
</div>

nn parlare di tabelle che poi arriva piero

[Bukowski]

E' che non m'andava di fare 3 DIV per 1 solo BOX considerando che poi questi box sono 7 diversi tra loro per colore e grandezza ...
nun me passà piu!!!

Questo è uno di quei casi in cui converrebbe usare le tabelle .. no?