[HTML] Div dimensioni

Tommy · 05-08-2010, 18:48

Premetto che è una cosa insensata tutto questo ma..

Codice:

<html>

<head> </head>

<body>

	<div style="background:yellow;">
		
		<table width="80%" border="1">
		<tr>
		
			<td> A </td>

			
			<td> B </td>
		
		</tr>
	
	</div>

</body>

</html>

E' possibile fare in modo che la larghezza (width) del div sia come quella del suo contenuto ovvero la table ? Tutto questo diciamo dinamicamente cioè una volta la table è 100%, una volta 60% ecc, però la defnizione dello style del div rimane la stessa e si adatta alla larghezza del contenuto interno..

Se provate infatti tale codice vedere una tabella grande 80% e il div continua (lo si vede dallo sfondo colorato).. Io vorrei che si fermasse alla fine della larghezza della table come spiegato prima non conoscendo a priori la grandezza della table

Ricordo che non ha senso tutto questo ma è una domanda cosi per sapere un po..

MEMon · 05-08-2010, 19:01

Prova un "display:table-cell" nel div.

Ovviamente dare una dimensione in % alla tabella non ha senso, visto che la % è riferita alla dimensione del contenitore, che da tua richiesta dovrà cambiare in relazione al contenuto...

MEMon · 05-08-2010, 19:07

Mi correggo, su IE non funziona, prova una "float:left" quello dovrebbe essere crossbrowser.

Poi devi gestire la cosa in modo intelligente però.

dojolab · 05-08-2010, 19:49

Quote:

Originariamente inviato da MEMon

Mi correggo, su IE non funziona, prova una "float:left" quello dovrebbe essere crossbrowser.

Poi devi gestire la cosa in modo intelligente però.

LOL...

metti anche* un width: auto sul div

MEMon · 05-08-2010, 22:50

Quote:

Originariamente inviato da dojolab

LOL...

metti un width: auto sul div

L'hai provato prima di spararla così?

Considera che width:auto è di default, cioè se non metti nulla il browser utilizza quella... ora ti senti un po' meno "fenomeno"?

DanieleC88 · 05-08-2010, 22:58

Ma scusa, se il tuo obiettivo è di coprire l'80% della larghezza della pagina e di rendere il div grande quanto la table, perché non applichi la restrizione sulla larghezza al div e invece espandi al massimo la table?

Codice:

<html>
<head> </head>
<body>
	<div style="border: 1px solid red; width: 80%;">
		<table style="width: 100%;" border="1">
		<tr>
			<td> A </td>
			<td> B </td>
		</tr>
	</div>
</body>
</html>

MEMon · 05-08-2010, 23:03

Quote:

Originariamente inviato da DanieleC88

Ma scusa, se il tuo obiettivo è di coprire l'80% della larghezza della pagina e di rendere il div grande quanto la table, perché non applichi la restrizione sulla larghezza al div e invece espandi al massimo la table?

Codice:

<html>
<head> </head>
<body>
	<div style="border: 1px solid red; width: 80%;">
		<table style="width: 100%;" border="1">
		<tr>
			<td> A </td>
			<td> B </td>
		</tr>
	</div>
</body>
</html>

Ci sono molti motivi per cui uno vorrebbe il contenitore che si adatta al contenuto, ma magari lui lo voleva sapere solo a scopo "didattico".

Comunque sia la tua risposta è l'esatto contrario di quello che vuole ottenere

(ma almeno funziona...

)

DanieleC88 · 05-08-2010, 23:12

Ah non lo so se fosse per uno scopo didattico, sta di fatto che quel che chiedeva (coprire l'80% della larghezza e rendere il div e la table di dimensioni uguali), secondo me, lo si può esprimere in quel modo in maniera molto più "naturale", senza ambiguità o trucchetti vari...

dojolab · 06-08-2010, 07:05

Quote:

Originariamente inviato da MEMon

L'hai provato prima di spararla così?

Considera che width:auto è di default, cioè se non metti nulla il browser utilizza quella... ora ti senti un po' meno "fenomeno"?

Prego? (e mi riferisco principalmente alla parte finale del messaggio).

A prescindere che so che width: auto è di default anche se ci sarebbe un bel discorso da fare su IE dato che anni fa avevo un problema simile e ad occhio lo avevo risolto forzando di nuovo la width su IE, ma sicuramente è un caso completamente diverso, data l'ora in cui ho risposto e la fretta che avevo (ma giustamente tu non lo puoi sapere, e lasciando da parte questo discorso un attimo chiariamo al volo qualche punto:

a) io non mi sento fenomeno e non mi sono mai sentito fenomeno per quanto riguarda QUALSIASI cosa; evita quindi, perché primo NON mi conosci e non sai che persona sono.

b) se una persona cerca di dare il suo contributo non vedo per quale motivo un altro utente come te (che evidentemente non sei nessuno per giudicare e dare 'titoli' ad altri utenti) si permette certe libertà.

Detto questo la chiudo qui e ti saluto, ti lascio nel tuo 'sapere' e il 'fenomeno' evita di mandarti gentilmente a quel paese (e la faccina sorridente puoi anche evitarla

) in quanto forse ha un filino più di rispetto in più di te nei confronti delle altre persone.

Ciao!

Tommy · 06-08-2010, 08:25

Quote:

Originariamente inviato da DanieleC88

Ah non lo so se fosse per uno scopo didattico, sta di fatto che quel che chiedeva (coprire l'80% della larghezza e rendere il div e la table di dimensioni uguali), secondo me, lo si può esprimere in quel modo in maniera molto più "naturale", senza ambiguità o trucchetti vari...

Come ho specificato il div può essere utilizzato cosi come fatto (naturalmetne lo style lo scrivo in un css a parte) in varie pagine con contenuti diversi (di tipo e dimensione)..

Modificare come hai fatto è ok, ma la richiesta era un altra.. premesso il poco senso del tutto

dojolab · 06-08-2010, 08:56

Se puoi usare i Pixels come larghezza prefissata (al posto della percentuale) puoi provare questo che dovrebbe andare ovunque:

Codice:

<style>
	table.tabella {width: 500px; margin: 0px; border: 1px solid #000;}
	div#test {background-color:#eee; width:auto; float: left; display: inline;}
</style>

<div id="test"> 
	<table class="tabella">
	<tr>	
		<td>A</td>	
		<td>B</td>
	</tr>
</div>

Per la larghezza in percentuale ho avuto modo di Googlare e leggere qualche discussione sembra non esserci una soluzione pulitissima cross-browser :|.

Però lascio la parola chi ha più esperienza in questo campo di me.

Tommy · 06-08-2010, 08:59

Ti ringrazio per la ricerca che hai fatto e l'informazione..

Diciamo che l'esperimento era proprio non cambiare le dimensioni dei contenuti interni e agire solo su css..

dojolab · 06-08-2010, 09:01

Quote:

Originariamente inviato da Tommy

Ti ringrazio per la ricerca che hai fatto e l'informazione..

Diciamo che l'esperimento era proprio non cambiare le dimensioni dei contenuti interni e agire solo su css..

In che senso scusa?
Qui agisci sul CSS :P

Tommy · 06-08-2010, 09:03

Quote:

Originariamente inviato da dojolab

In che senso scusa?
Qui agisci sul CSS :P

Si perchè la table l'hai messo tu in un css, ma come vedi dal mio codice la width la setto direttamente su html dove la utilizzzo

dojolab · 06-08-2010, 09:04

Quote:

Originariamente inviato da Tommy

Si perchè la table l'hai messo tu in un css, ma come vedi dal mio codice la width la setto direttamente su html dove la utilizzzo

Ok, afferrato.
Ma ti cambia qualcosa definirla in un CSS o nel codice?

Tommy · 06-08-2010, 09:07

Quote:

Originariamente inviato da dojolab

Ok, afferrato.
Ma ti cambia qualcosa definirla in un CSS o nel codice?

Si.. è una brutta la cosa che chiedo (magari non c'è soluzione) e so che non ha senso però

dojolab · 06-08-2010, 09:10

Quote:

Originariamente inviato da Tommy

Si.. è una brutta la cosa che chiedo (magari non c'è soluzione) e so che non ha senso però

Niente è brutto, se non puoi fare altrimenti... devi fare così.
Una alternativa è definirla con JQuery :/ applicando un CSS 'volante' alla tabella (e questo lo puoi definire nel codice... prima di ogni tabella)

Codice:

$('table.CLASSE').class('la_classe_definita_nel_css');

Volendo potresti agire sui parametri anche ma è la medesima cosa di cambiarli in HTML. Questa soluzione te l ho offerta qualora tu dovessi stampare le tabelle in un ciclo o in maniera randomica con ciascuna le loro dimensioni!

Tommy · 06-08-2010, 09:12

Quote:

Originariamente inviato da dojolab

Niente è brutto, se non puoi fare altrimenti... devi fare così.
Una alternativa è definirla con JQuery :/ applicando un CSS 'volante' alla tabella (e questo lo puoi definire nel codice... prima di ogni tabella)

Codice:

$('table.CLASSE').class('la_classe_definita_nel_css');

Volendo potresti agire sui parametri anche ma è la medesima cosa di cambiarli in HTML. Questa soluzione te l ho offerta qualora tu dovessi stampare le tabelle in un ciclo o in maniera randomica con ciascuna le loro dimensioni!

Ti ringrazio ma niente.. diciamo che posso solo agire sul css del div

dojolab · 06-08-2010, 09:14

Quote:

Originariamente inviato da Tommy

Ti ringrazio ma niente.. diciamo che posso solo agire sul css del div

Sullo style intendi?

Tommy · 06-08-2010, 09:15

Quote:

Originariamente inviato da dojolab

Sullo style intendi?

Si si lo style del div

05-08-2010, 18:48	#1
Tommy Senior Member Iscritto dal: Sep 1999 Città: Pistoia Messaggi: 618	[HTML] Div dimensioni Premetto che è una cosa insensata tutto questo ma.. Codice: <html> <head> </head> <body> <div style="background:yellow;"> <table width="80%" border="1"> <tr> <td> A </td> <td> B </td> </tr> </div> </body> </html> E' possibile fare in modo che la larghezza (width) del div sia come quella del suo contenuto ovvero la table ? Tutto questo diciamo dinamicamente cioè una volta la table è 100%, una volta 60% ecc, però la defnizione dello style del div rimane la stessa e si adatta alla larghezza del contenuto interno.. Se provate infatti tale codice vedere una tabella grande 80% e il div continua (lo si vede dallo sfondo colorato).. Io vorrei che si fermasse alla fine della larghezza della table come spiegato prima non conoscendo a priori la grandezza della table Ricordo che non ha senso tutto questo ma è una domanda cosi per sapere un po.. __________________ CPU: AMD Phenom II X3 720 BE - MOBO: Asrock AS790GXH/128 - RAM: 2x 2GB Kingston 800 MHz - VGA: Powercolor Ati Radeon HD 4850 512 MB GDDR4 - HD: 320 GB Hitachi Sata II - PSU: Corsair 650VXEU - CASE: Cooler Master Cavalier Netbook Asus 1000HE Ultima modifica di Tommy : 05-08-2010 alle 18:51.

05-08-2010, 22:58	#6
DanieleC88 Senior Member Iscritto dal: Jun 2002 Città: Dublin Messaggi: 5989	Ma scusa, se il tuo obiettivo è di coprire l'80% della larghezza della pagina e di rendere il div grande quanto la table, perché non applichi la restrizione sulla larghezza al div e invece espandi al massimo la table? Codice: <html> <head> </head> <body> <div style="border: 1px solid red; width: 80%;"> <table style="width: 100%;" border="1"> <tr> <td> A </td> <td> B </td> </tr> </div> </body> </html> __________________ C'ho certi cazzi Mafa' che manco tu che sei pratica li hai visti mai!

05-08-2010, 23:12	#8
DanieleC88 Senior Member Iscritto dal: Jun 2002 Città: Dublin Messaggi: 5989	Ah non lo so se fosse per uno scopo didattico, sta di fatto che quel che chiedeva (coprire l'80% della larghezza e rendere il div e la table di dimensioni uguali), secondo me, lo si può esprimere in quel modo in maniera molto più "naturale", senza ambiguità o trucchetti vari... __________________ C'ho certi cazzi Mafa' che manco tu che sei pratica li hai visti mai!

06-08-2010, 08:56	#11
dojolab Senior Member Iscritto dal: Jun 2010 Città: Varese Messaggi: 996	Se puoi usare i Pixels come larghezza prefissata (al posto della percentuale) puoi provare questo che dovrebbe andare ovunque: Codice: <style> table.tabella {width: 500px; margin: 0px; border: 1px solid #000;} div#test {background-color:#eee; width:auto; float: left; display: inline;} </style> <div id="test"> <table class="tabella"> <tr> <td>A</td> <td>B</td> </tr> </div> Per la larghezza in percentuale ho avuto modo di Googlare e leggere qualche discussione sembra non esserci una soluzione pulitissima cross-browser :\|. Però lascio la parola chi ha più esperienza in questo campo di me. __________________ Il mercatino di dojolab: VENDO UN PO' DI COSE! VAI Vendo Libro Oracle 10g GUIDA COMPLETA della Oracle Press, ITALIANO: LINK

06-08-2010, 08:59	#12
Tommy Senior Member Iscritto dal: Sep 1999 Città: Pistoia Messaggi: 618	Ti ringrazio per la ricerca che hai fatto e l'informazione.. Diciamo che l'esperimento era proprio non cambiare le dimensioni dei contenuti interni e agire solo su css.. __________________ CPU: AMD Phenom II X3 720 BE - MOBO: Asrock AS790GXH/128 - RAM: 2x 2GB Kingston 800 MHz - VGA: Powercolor Ati Radeon HD 4850 512 MB GDDR4 - HD: 320 GB Hitachi Sata II - PSU: Corsair 650VXEU - CASE: Cooler Master Cavalier Netbook Asus 1000HE

05-08-2010, 19:01	#2
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	Prova un "display:table-cell" nel div. Ovviamente dare una dimensione in % alla tabella non ha senso, visto che la % è riferita alla dimensione del contenitore, che da tua richiesta dovrà cambiare in relazione al contenuto...

05-08-2010, 19:07	#3
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	Mi correggo, su IE non funziona, prova una "float:left" quello dovrebbe essere crossbrowser. Poi devi gestire la cosa in modo intelligente però.

Strumenti
Mostra una versione stampabile Invia questa pagina per email