problema riquadro con immagine larga

fasa

problema riquadro con immagine larga

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

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

img159.imageshack.us/img159/2673/quadro1nd6.jpg

vorrei fare in modo che si potesse inserire qualsiasi immagine (esempio tramite codice random immagini) 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

img406.imageshack.us/img406/7390/quadro2zq6.jpg

E' fattibile una cosa simile?

karedas

Ciao Fasa

Potresti utilizzare più approcci non proprio masticabili.

Uno è usare quelle immagini come sfondo. Invece di richiamarle con il tag <img /> inserirle tramite l'attributo** "background:url('nomeimmagine.jpg') no-repeat top left;".**

Il problema in questo sta che dovresti definire un attributo di background negli stili per ogni cella che dovrà contenere le suddette immagini.

Altrimenti mmhh...
Teoricamente esisterebbe un attributo chiamato clip, non molto usato solitamente ma vediamo come funziona:

Attribuisci alle celle della tabella un valore absolute:relative; insieme alla larghezza e all'altezza da te prefissata

ES.
[html]
table td{
width:150px;
height:200px;
position:relative;
}
[/html]

Adesso dobbiamo inserire nel css un attributo alle immagini al suo interno in modo che vengano scontornate la dove superano la dimensione delle stesse celle:

[html]
table td img{
position:absolute;
top:0;
left:0;
clip:rect(0px, 150px, 200px, 0);
}
[/html]

Cosa abbiamo fatto?

Dando alle celle l'attributo relative faremo in modo che le nostre immagini, con l'attributo absolute, si estrapolino dal normale flusso e basino la loro posizione nello spazio su quella del loro genitore e cioè la stessa cella.

Questo è un discorso che sinceramente non saprei spiegarti nemmeno io bene a parole , basta un attimo fare un pò di prove .

Dando all'immagine le coordinate "top:0;" e "left:0;" vuol dire che il punto più in alto e a sinistra dell'immagine sarà equivalente al punto 0 della stessa cella e noi appunto vogliamo che l'immagine parta da li per ogni suo contenitore.

Perchè abbiamo fatto questo?

L'attributo **clip **ha bisogno di operare insieme al position:absolute.
Clip ti crea una specie di ritaglio sotto le dimensioni che tu gli dai.

I valori all'interno delle parentesi equivalgono in successione al punto cardinale "top, right, bottom,left" dell'immagine.
Cioè noi andiamo a visualizzarla fino a quelle dimensioni li, il resto non sarà visualizzato!.

Non saprei ora come ora spiegartelo meglio magari c'è qualcuno che mi aiuta in questa impresa, in ogni caso puoi provare a fare dei test.

Ciao!

fasa

Ciao Karedas,

oddio... non mi trovo con i codici !!

immaginiamo un codice del genere; come diventerebbe ?

karedas

Per non fare ulteriori confusioni dagli una classe alla tabella , in questo modo:

Gli attributi è bene che tu li vada a scrivere in un file dedicato con estensione .css e poi richiamare quest'ultimo all'interno della tua pagina tramite l'apposito tag:
[html]
<link rel="stylesheet" type="text/css" href="path/nomefile.css" />
[/html]dove path/nomefile.css sta per la posizione e il nome del file nel tuo spazio web (o hard disk).

A questo punto dovrai scrivere gli attributi come io te li ho elencati poichè è quella la sintassi da utilizzare in un file con estensione .css.

Oppure se non vuoi usare un file esterno (cosa che continuo a consigliare per la sua versatilità), puoi inserire i tuoi attributi in questo modo:

[html]
<style type="text/css">
.contentable{
attributo:valore;
attributo2:valore;
}
</style>
[/html]Il tag "<style..."> lo devi mettere tra i tag "head" e gli attributi che ti ho elencato come esempio sono quelli che ti ho messo nella risposta nel preecdente post.

Ciao!

fasa

GRAZIE Karedas! , molto disponibile !

karedas

nooooon c'è di che!