problema riquadro con immagine larga

[fasa]

Ipotizziamo di avere una TABELLA , con al suo interno una immagine s.

La tabella è raffigurata con la la linea nera....





vorrei fare in modo che si potesse inserire qualsiasi immagine ma che la LARGHEZZA di essa non mi deformi la tabella che dovrebbe rimane di dimensioni predefinite da me.

In pratica le parti in eccedenza della immagine fossero "nascoste" e che quindi non fossero visibili






E' fattibile una cosa simile?

[deleted_110]

anche questo coi css. Basta ad esempio impostare l'immagine come sfondo della cella. E poi fissare la dimensione della cella stessa.

Ma per informazioni piu' precise ti consiglio di farti spostare la pure questo thread

[fasa]

azz... SPOSTATEMI LA DISCUSSIONE , grazie.

[Mich_]

Forse dovresti seguire un corso sui CSS. Quello di HTML.it non e` fatto male.

Comunque quello che chiedi e` realizzato dalla direttiva CSS:
overflow: hidden;
da applicare al blocco che deve contenere l'immagine.

PS: attenzione che quanto detto vale per un oggetto di tipo blocco; non per una tabella o elemento di tabella.

PS2: non tutti i browser reagiscono correttamente, che io sappia.
Puoi vedere il sito di sitepoint per una analisi delle compatibilta` di vari browser.

[fasa]

ammetto... non ne so molto di css , mi sto avvicinando da poco tempo in merito ;


cosa intendi per "blocco"....

il fatto sta che l'esempio riporterebbe proprio una "cornice" colorata... e di conseguenza con delle immagini a random di varie dimensioni, la cornice deve rimanere tale uguale...ed eventualmente è l'immagine che parzialmente scompare "dietro" la cornice :


Per capirci meglio un'esempio semplice :

<table width="461" border="1">
<tr>
<td width="451" height="72">[img]Immagine4.jpg[/img]</td>
</tr>
</table>


come noti la tabella è 461 x 72

ma l'immagine sarebbe da 600 x 72...

io devo mantenere le proporzioni della immagine, eventualmente sarà tasgliata fuori dal lato destro...

[Mich_]

Se usi tag non semantici, e` molto piu` complesso sistemare il CSS.
E se usi formattazione HTML, non e` detto che i CSS funzionino (dipende dal browser).

Stai usando una tabella (che ha un suo intrinseco significato semantico) per una cosa che non sono dati tabellari.
Prova con un <div>.
Ed elimina tutta la formattazione HTML, spostandola nel CSS.

Per blocco intendo quello che gli inglesi chiamano anche "box", un elemento HTML che occupa uno spazio definito (di forma rettangolare). Esistono elementi di blocco ed elementi inline (che non hanno spazio proprio, ma si adattano al contenuto).

[fasa]

Si ho capito quello che mi vuoi dire....

tuttavia ho creato la tabella in quanto il risultato da ottenere è per l'appunto all'interno di una tabella :


vedi esempio



questo è il codice attuale :

<TABLE align="center" WIDTH=778 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr><td height="5"></td></tr></table>
<table width="778" cellpadding="1" cellspacing="2" border="0" align="center">
  <tr valign="top"><td></td></tr></table>
<TABLE width=778 border=0 align="center" cellPadding=0 cellSpacing=0 bgColor=#0000CC>
  <TBODY><TR> <TD vAlign=top> <TABLE width=778 height="100%" border=0 cellPadding=0 cellSpacing=1>
<TBODY><TR> <TD width="437" colSpan=2 bgColor=#000000>
<table width="778" height="175" border="0" cellpadding="0" cellspacing="0">
<tr>
                    <td height="175">[img]/vw/html/themes/Reality/trasparente.gif[/img] 
                      <div align="center"><script language="javascript" type="text/javascript"> 
immagine_variabile(); 
</script></div></td></tr></table><TABLE width=778 border=0 cellPadding=0 cellSpacing=0>
                  <TBODY><TR><TD width="778" height=16 background="../../_altervista_ht/immagini/titlebar_1.gif" bgColor=#000099> 
<div align="center"><font size="1" face="Arial, Helvetica, sans-serif"> <a href="modules.php?name=Chat" id="linkbianco" >[img]../../../_altervista_ht/immagini/freccetta.gif[/img] 
                          chat irc </a>  
                          [img]../../../_altervista_ht/immagini/freccetta.gif[/img]resempio 
                          </font></div></TD>
</TABLE></TD>
 </TABLE></TD></TR></TBODY></TABLE>

[Mich_]

Mi spiace, ma quel linguaggio non lo ricordo piu`. Sono anni che non lo uso piu`.

Se vuoi usare i CSS in modo proficuo, devi cambiare modo di affrontare il codice HTML:
- elimina tutte le formattazione HTML,
- elimina i tag di formattazione

E comunque se ci sono tabelle innestate, e` quasi sicuro che almeno una sia di formattazione: i CSS sono fatti per lavorare con tag semanticamente corretti, se li vuoi applicare a tag fatti cosi` diventano un tormento infinito.

[fasa]

ma in pratica da come mi indichi pare non ci siano molte soluzioni per contornare l'immagine da una tabella (dal bordo colorato) e fare quanto ti indicavo sopra con l'uso dei css....


Il codice è lungo perchè l'ho messo completo... cioè viene incluso all'interno di quella tabella un codice per immagini RANDOM. Queste immagini a sua volta sono di larghezze diverse e che devono stare su un "riquadro" dalle misure vincolate.

[Mich_]

NO!!

Il problema e` che i CSS non possono funzionare se non usi il codice HTML in modo intelligente e moderno.
Il linguaggio HTML che stai usando e` del tipo HTML2, un linguaggio che ha 20 anni e che e` stato aggiornato almeno tre volte.
A quel tempo i CSS non esistevano ancora, e la formattazione era realizzata da tag e attributi HTML.

Poi l'evoluzione naturale del linguaggio ha portato a separare contenuto da presentazione, la prima realizzata da (X)HTML, la seconda da CSS.
Pero` i CSS per funzionare hanno necessita` che il codice HTML sia realizzato senza formattazione, altrimenti si crea un conflitto, che browser diversi risolvono in modo diverso.

Quindi per poter lavorare con i CSS, devi cambiare modo di programmare HTML.