due table affiancate??

[Peter_Pan]

Salve ho questo problema, devo creare due o più tabelle affiancate, ma quando nel codice html scrivo le due table, me le mette una sotto l'altra, c'è un metodo per evitare ciò, per semplicità vi posto il codice:

<TABLE cellSpacing=0 cellPadding=0 width=72 border=0>
                              <TR style="CURSOR: hand">
									<TD width=17>[img]homePage_file/btn_inizio.gif[/img]</TD>
									<TD style="FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #99cc00; FONT-FAMILY: Arial, Helvetica, sans-serif" width=40 bgColor=#333333>Salva</TD>
									<TD width=15>[img]homePage_file/btn_fine.gif[/img]</TD>
								</TR>
							</TABLE><TABLE cellSpacing=0 cellPadding=0 width=72 border=0>
                              <TR style="CURSOR: hand">
									<TD width=17>[img]homePage_file/btn_inizio.gif[/img]</TD>
									<TD style="FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #99cc00; FONT-FAMILY: Arial, Helvetica, sans-serif" width=40 bgColor=#333333>Salva</TD>
									<TD width=15>[img]homePage_file/btn_fine.gif[/img]</TD>
								</TR>
							</TABLE>

Questi sono in pratica due pulsanti formati da due table, e dovrebbero trovarsi una affianco l'altra, invece la seconda si trova sotto la prima..

[floyd46]

ciao
le tabelle sono elementi di blocco, ERGO, non puoi mettere una accanto all'altra. Necessariamente esse vanno una sotto l'altra.
Fai la prova a mettere due titoli H1, accanto: riesci? non credo.

Ammenochè tu non ti crei una tabella-contenitore;
la dividi in 2 celle;
in quella di sinistra ci metti una tabella;
in quella di destra ci metti la seconda tabella;

Ti voglio far notare una cosa: vedi quante volte ho scritto "tabella" qui?
Alla stessa maniera avrai decine e decine di <tr>, <td> INUTILI nella pagina che non servono a nulla. Codice sporco, in poche parole.

Lasciale stare e passa ai CSS + XHTML.
ne guadagni in salute ed avreai una pagina molto + leggera e manutenibile se devi apportare modifiche.
Floyd

[Mich_]

Il discorso del markup semanticamente corretto e` molto importante; a mio parere molto piu` importante del posizionamento dei vari blocchi nella pagina.

Comunque due oggetti di tipo block si possono affiancare, con l'uso di float.

Certo che implementare i CSS in quel codice HTML non e` facile: troppe formattazioni HTML che possono andare in conflitto (e si ritorna al discorso di prima).

[Peter_Pan]

mi puoi fare un esempio sulla base del codice che ti ho postato?
Ti spiego ho creato in vb.net un controllo personalizzato, praticamente è come se avessi modificato l'input type button con una grafica personale, scrivo sempre inpuit type button, ma mi viene fuori un button che ha la mia grafica, solo che questo button viene renderizzato in html come una table, in modo tale che la parte iniziale e finale del mio button siano delle immagini e il corpo centrale un td con uno sfondo e uno stile di testo. Per quaeto motivo non posso creare una tabella con due celle che contiene i due button, quindi per fare sta cosa se la volessi fare come dici tu, come la scrivo??

[Mich_]

Non si puo` partire da qul codice. Ha troppi bachi e cose da cambiare.
Tutte le formattazioni HTML sono da togliere, poi occorre scriver il codice correttamente secondo la sintassi (nel tuo codice e` del tipo HTML2, quando i CSS non c'erano ancora).

Forse il codice HTML che lo sostituisce potrebbe essere:

<div class="butt">

Salva</p></div>
<div class="butt">

Salva</p></div>

Con il CSS:

.butt {
  padding: 17px auto 15px auto;
  margin: auto;                 /* da verificare */
  border: 0;
  width: 40px !important;       /* browser conformi; */
  width: 72px;                  /* browser IE */
  height: 22px;
  color: #9c0;
  font: bold 12px Arial Helvetica sans-serif;
  background: #333 url(sfondo.gif) no-repeat;
  cursor: pointer;
}

Lo sfondo deve essere unico e inglobare ilpezzo sinistro e il destro lasciando uno spazio trasparente in mezzo

Potrebbe anche essere necessario usare un tag <a> al posto del <div>, ma non conoscendo per cosa servono i bottoni, non posso saperlo.

[Peter_Pan]

il problema è che non posso creare un'unica immagine, perchè se nel button ci scrivo modifica e se invece scrivo modifica dell'aggregato, capirai bene che l'immagine di fondo non va bene, il motivo di dividere l'immagine i tre pezzi è che in questo modo posso creare un button di qualsiasi dimensioni senza che l'immagine di fondo diventi orribile ridimensionandola.
ti allego un immagine per farti un esempio con il sistema della table io ho due pulsanti di dimensioni diversi ma che si vedono bene entrambi, se facessi un'unica immagine non potrei fare ciò

[Mich_]

Allora devi per forza inserire dei pezzi (pero` con i CSS3 si potranno fare piu` immagini per lo sfondo).

A quel punto non ha senso definire tutto in maniera fissa: il pezzo centrale prendera` la dmensione della scritta.

Ecco un esempio:

<a class="butt"><span class="pre"> </span><span>Salva</span><span class="post"> </span></div>

Con il CSS:

.butt {
  line-height: 1.2em;
  color: #9c0;
  font: bold 1em Arial Helvetica sans-serif;
  background: #333;
  /*cursor: pointer;*/
}
.butt span {
  /*eventuali altre caratteristiche*/
}
.butt .pre {
  background: #333 url(sfondo_pre.gif) no-repeat;
  width: 17px;
}
.butt .post {
  background: #333 url(sfondo_post.gif) no-repeat;
  width: 15px;
}

Ho supposto (a differenza di prima) che il bottone vada inserito dentro un testo, quindi ho eliminato il <div> ed usato invece un tag <a>

[Peter_Pan]

forse siamo sulla strada giusta il codice che mi hai postato va quasi bene, ho apportato le seguenti modifiche, ma ancora non va bene e non riesco a sistemarlo mi daresti una mano??

.butt {
  line-height: 1.0em;
  color: #9c0;
  
  font: 1em Arial ;
  font-size: 14px;
  /*font: bold 1em Arial Helvetica sans-serif;*/
  background: #333;
  /*cursor: pointer;*/
  
}
.butt span {
  width:100;
  /*eventuali altre caratteristiche*/
}
.butt .pre {
  background: #FFF url(btn_inizio.gif) no-repeat;
  width: 17px;
  height:22px;
}
.butt .post {
  background: #FFF url(btn_fine.gif) no-repeat;
  width: 15px;
  height:22px;
}

html

<a class="butt"><span class="pre"> </span><span>Salva</span><span class="post"> </span></a>

ti allego anche l'immagine del risultato

[Mich_]

Anzitutto correggi gli errori:
a)
font: 1em Arial ;
font-size: 14px;
qui definisci prima la altezza del font uguale al contenitore (1em) e poi la ridefinisci 14px

b)
font: 1em Arial ;
Definisci il font fisso (arial): se non c'e` nel browser viene preso il font default; la definizione precedente ( Arial Helvetica sans-serif ) era piu` corretta.

c)
width:100;
100 cosa? se sono pixel, devi scrivere 100px

Poi devi dare dimensioni espresse nella stessa unita` di misura: stai mescolando px, em, altro: la cosa crea confusione (e si vede).

Potrebbe essere necessario definire diversamente lo sfondo nei blocchi laterali, e definire l'allineamento dell'immagine di sfondo: dovrebbe essere centrata in verticale (vedi background-position).

Ce l'hai un reference per i CSS? Ad esempio: http://www.w3schools.com/css/css_reference.asp .

[Peter_Pan]

nonostante le modifiche non riesco a sistemarlo, mi dareste una mano??

.butt {
  line-height: 1.0em;
  color: #9c0;
  font: 1em Arial ;
  /*font-size: 14px;*/
  /*font: bold 1em Arial Helvetica sans-serif;*/
  background: #333;
  /*cursor: pointer;*/
  
}
.butt span {
  width:100px;
  /*eventuali altre caratteristiche*/
}
.butt .pre {
  background: #FFF url(btn_inizio.gif) no-repeat;
  background-position: top left;
  width: 17px;
  height:22px;
}
.butt .post {
  background: #FFF url(btn_fine.gif) no-repeat;
  background-position: top left;
  width: 15px;
  height:22px;
}
.tt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

Allego anche risultato