View Full Version : [HTML] Div dimensioni
Premetto che è una cosa insensata tutto questo ma..
<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..
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...
Mi correggo, su IE non funziona, prova una "float:left" quello dovrebbe essere crossbrowser.
Poi devi gestire la cosa in modo intelligente però.
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 ;)
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?
<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>
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?
<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 :p (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... :D
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!
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... :D
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 :D
Se puoi usare i Pixels come larghezza prefissata (al posto della percentuale) puoi provare questo che dovrebbe andare ovunque:
<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.
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..
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
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
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?
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ò :)
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)
$('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!
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)
$('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 :D
Ti ringrazio ma niente.. diciamo che posso solo agire sul css del div :D
Sullo style intendi? :p
Sullo style intendi? :p
Si si lo style del div
Si si lo style del div
Ma una cosa che mi sfugge, se posso chiedertela, a cosa ti serve il DIV attorno? Ha una reale utilità? Se si quale...? Magari troviamo un'altra soluzione, giusto per capire.
Ma una cosa che mi sfugge, se posso chiedertela, a cosa ti serve il DIV attorno? Ha una reale utilità? Se si quale...? Magari troviamo un'altra soluzione, giusto per capire.
Fa da sfondo.. infatti non ha senso.. ma il codice non l'ho fatto io :D
Fa da sfondo.. infatti non ha senso.. ma il codice non l'ho fatto io :D
LOL e mettere un background alla tabella? :|
Comunque la soluzione di Daniele non è sbagliata, tutto sommato.
L'alternativa è mettere un div di wrapper che fa da contorno a tutto, altrimenti il div in questione (quello di sfondo) si prende la larghezza totale massima.
LOL e mettere un background alla tabella? :|
Comunque la soluzione di Daniele non è sbagliata, tutto sommato.
L'alternativa è mettere un div di wrapper che fa da contorno a tutto, altrimenti il div in questione (quello di sfondo) si prende la larghezza totale massima.
SI infatte era la cosa più sensata ma ormai l'intera cosa è fatta cosi e modificare tutto non si può :D
float:left ho provato non funziona granchè devo vedere..
Prova così:
background-image: url(http://coventgardenfx.com/ESW/Images/800px-Auto_Racing_Yellow_svg.png?xcache=9567);
background-size: 80%;
background-repeat: repeat-y;
Metti una tua immagine completamente gialla in url() al posto di quella che ho trovato su google e dovresti essere a posto.
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!
Ho letto il pm, c'è stato evidentemente un fraentendimento
LOL...
metti un width: auto sul div ;)
Io vedendo una risposta di questo tipo che quota una mia risposta, non posso che intenderla come "hahah guarda sto cojone che risposta gli ha dato, non ascoltarlo metti width:auto che risolvi ;)".
Sinceramente sfido chiunque a non contestualizzarla in questo modo :D
Tra l'altro quello che mi ha spinto a risponderti così è stato il fatto che non solo mi è sembrata una risposta da "fenomeni, so tutto io", ma che tra l'altro la risposta che hai dato è totalmente inutile, del tipo che uno nemmeno deve pensare un attimo al fatto se hai ragione o meno, no, semplicemente salta agli occhi subito che è assurda.
Comunque ora che ci siamo chiariti, tornando in topic, la soluzione per quello richiesto è mettere il contenitore flottante
float:left ho provato non funziona granchè devo vedere..
float funziona, devi un attimo gestirlo, ed è sempre fattibile.
Magari posta un po' di codice in più per vedere che problemi potresti avere.
Io vedendo una risposta di questo tipo che quota una mia risposta, non posso che intenderla come "hahah guarda sto cojone che risposta gli ha dato, non ascoltarlo metti width:auto che risolvi ;)".
Sinceramente sfido chiunque a non contestualizzarla in questo modo :D
Evidentemente non era chiara; ci siamo chiariti in PM.
Il LOL era per IE ovviamente, mica per te.
width: auto ti ho spiegato la motivazione ma ho riguardato il problema e il contesto era un filo diverso.
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.