[DIV e CSS] Far contenere ad un Div un immagine senza che esca dai margini

[MattiaBergomi]

Salve a tutti, vi posto il mio (mi auguro semplice) problema che non riesco a risolvere, anche se mi sembra davvero banale:

Il mio sito ha una struttura a tre colonne, realizzata tutta solo con i div (senza tabelle) dove le laterali sono a larghezza fissa, mentre la centrale assume il 100% della larghezza rimanente a tappare il "buco" che rimane (e fin qui nessun problema). Quando tuttavia la risoluzione dello schermo è troppo piccola (o restringo troppo la finestra del browser), le immagini contenute nel div centrale (quello "dinamico" in larghezza) "sbucano fuori" dal suo margine (destro), un po' come se anarchicamente il div non fosse il suo contenitore.

Se io faccio con una tabella, la cella si restringe finché può, quando però il contenuto più di così sbucherebbe fuori, non si restringe più e compaiono le scrollbar laterali (giustamente): come posso far sì che accada questo anche con i div, e non che invece restringendoli il contenuto quando non ci sta più dentro esce fuori e basta? Ecco illustrata la situazione nel concreto (il sito per la cronaca è http://bergomi.altervista.org):

Normale:


Div che non rispettano i bordi (come invece fanno le tabelle):

L'immagine esce dal bordo del div ristretto invece di far apparire le scrollbar!

Rigrazio chiunque saprà darmi una mano, buona giornata, ciao!

 

[dead]

innanzitutto ottimo lavoro e ben curato anche a livello di codice!

il tuo problema direi che è un non-problema, visto che a 800x600 il layout tiene perfettamente, e risoluzioni inferiori ormai non le ha più nessuno.

se proprio vuoi risolvere prova ad applicare uno di questi due attributi al div:
overflow:hidden (ti nasconde la parte che sborda)
overflow:scroll (dovrebbe far comparire le scrollbar).

un solo appunto:
non ho controllato come si vede con IE, ma per sicurezza utilizzerei un foglio di stile condizionale per IE.

P.S. ho fatto una prova:
devi aggiungere overflow:auto nel div Tabella

 

[open-think]

Cancellato

 

[MattiaBergomi]

...

Ti ringrazio molto per l'interessamento! (e anche per i complimenti) :beer: Non ero a conoscenza di questo attributo per l'overflow (che tra l'altro ho testato con IE-tab e, figuriamoci, IE non lo vede neanche di striscio... :dormo: ).

Il fatto che il layout "regga anche a 800x600" è vero... solo per la homepage Se provi ad aprire ad esempio la sezione "Icone" è già sufficiente per notare che a 800x600 sfonda fuori (e cmq spesso molti navigano con il browser non a pieno schermo ma in finestra ridotta, quindi avrei voluto evitare quel macello di sovrapposizioni anarchiche... :fonzie: ).

Anche facendo finta che funzioni con IE (dato che di problemini di compatibilità con IE ne ho già un paio sulla lista da risolvere poi in futuro :angel: ) avrei tuttavia preferito che la scrollbar apparisse alla pagina (al browser) e non al singolo div (nel caso tabella), non tanto perché sia io fissato così e basta :ilpirata: ma perché, come puoi notare sempre nell'esempio della sezione "Icone" (ma vale in generale), per le sezioni così lunghe la scrollbar in fondo non si vede (e comunque nessuno si sogna che c'è dopo due chilometri di pagina)...

Se io faccio semplicemente una cosa di questo tipo (grezzamente messa giù):

<table>
 <tr>
  <td = larga fissa> Menu</td>
  <td = larga 100%>Centrale con Immagini</td>
  <td = larga fissa>Tag a destra</td>
 </tr>
</table>

Ottengo esattamente l'effetto che desidero io (dinamica la centrale, ma appena il ridemnsionamento è tale da non contenere più non si restringe più, non nasconde nulla del contenuto e mette le scroll al browser), e mi sembrava una cosa così naturale che mi chiedevo come mai fosse così strano ottenerlo con un div...

per info sul box model hacks...

Grazie anche a te, una buona lettura in ogni caso

 

[dead]

ho fatto qualche prova sulla pagina delle icone.

Secondo me non potrai mai ottenere la scrollbar sul browser perchè la pagina in sè non sborda (è solo un elemento al suo interno che sborda su un altro).

secondo me hai due soluzioni:
1- forzi la dimensione minima della pagina inserendo in fondo (o in cima al body un immagine di 1px X 800px, in modo che al di sotto degli 800px sia l'intera pagina che sborda, ed a quel punto avrai le scroll. Però a quel punto tanto vale fare un lay-out a dimensione fissa.

2- rimpicciolisci i contenuti e li adatti alla finestra passando alle percentuali. Per esempio per la pagina delle icone il css guisto è questo (i valori % vanno ottimizzati):

.TabellaIcona
{
border: 1px solid #000;
margin: 0 auto;
width: 60%;
}
.ImmagineIcona
{
height: 100%;
}
.ImmagineIcona img
{
width:100%
}

Per quanto riguarda IE, come ti dicevo prenderei in considerazione di usare un foglio di stile condizionale


PS. molto carine le icone. Perche non le metti tutte in uno zip scaricabile?

 

[MattiaBergomi]

Eh il layout a larghezza fissa era stato all'inizio nei miei progetti, ma poi lo avevo voluto appunto abbandonare in favore di quello che sfruttasse il 100% della larghezza dello schermo (specie quando posso lavorarci sui widescreen della mac che hanno al Politecnico di Zurigo:love: :love: :love: ).

La soluzione della Percentuale sì devo ammettere che la avevo pensata (o comunque di far rimpicciolire il contenuto in generale), solo che avrei gradito una soluzione "generale" che poi valeva per ogni pagina, anziché dover inventarmi un metodo manuale per ogni pagina, alcune anche magari con layout più complessi di quella (un paio nemmeno le ho ancora online)...

Che duro colpo per me che predico sempre di lavorare bene con gli standard, di adoperarsi con i div, il css ecc. e poi vedere che una banalissima table risolverebbe tutto! (so che in fondo i miei amati div sono in grado anche di fare quello, ma io onestamente proprio non ne so più venire a capo...).

 

[dead]

...so che in fondo i miei amati div sono in grado anche di fare quello, ...

perfettamente d'accordo.
purtroppo però i div necessitano di una preparazione strutturale accurata. Se usi layout diversi ad ogni pagina, devi utilizzare ogni volta direttive diverse.

Il concetto del css però è proprio quello di fare dei layout il più possibile uniformi, in modo da non dover fare millemila css diversi.

Il tuo problema comunque è legato principalmente alle img, incasellate nelle tabelle.
Se elimini le tabelle e usi dei div float o display:inline, le immagini che non ci stanno a fianco delle altre, automaticamente "scivoleranno" sotto.
Insomma, se vuoi 4 immagini grosse per pagina dentro ad una table a sua volta dentro ad un div e vuoi che lo scroll appaia sul browser, mi sa che non sia fattibile.

Qui si arriva un po' alla filosofia che sta dietro al nuovo modo di fare web (xhtml+css): l'importante sono i contenuti ela loro accessibilità, la presentazione è "un accessorio".

non si dovrebbe più ragionare alla vecchia maniera, quando si disegnava un layout con photoshop e poi si tabellava tutto per farlo esattamente come una fotografia.
il concetto invece è: "qual'è la miglior grafica possibile che posso dare al mio sito se devo presentare (in maniera accessibile) questi contenuti?"

lo spazio di manovra è moltissimo, ma non stai comunque usando photoshop


P.S. posso utilizzare alcune delle tue icone per il mio nuovo sito?

 

[MattiaBergomi]

l'importante sono i contenuti ela loro accessibilità, la presentazione è "un accessorio".

non si dovrebbe più ragionare alla vecchia maniera, quando si disegnava un layout con photoshop e poi si tabellava tutto per farlo esattamente come una fotografia.
il concetto invece è: "qual'è la miglior grafica possibile che posso dare al mio sito se devo presentare (in maniera accessibile) questi contenuti?"
P.S. posso utilizzare alcune delle tue icone per il mio nuovo sito?

Azz io invece sono proprio uno di quelli che alla forma ci tiene tantissimo Vabbé cercherò di risolverla in un qualche modo, speravo solo esistesse una qualche maniera "facile" che però io non conoscevo e volevo magari evitare di perderci su delle ore quando poi la soluzione era lì sotto il naso...

Per le icone... beh io ho specificato all'inizio che non sono mie, bensì racimolate in giro un po' dappertutto (dal web, da archivi zip da edonkey, alcune me le hanno date miei amici trovate un po' in giro, ecc.).
Detto questo... sono lì per quello! :fonzie:

 

[dead]

Azz io invece sono proprio uno di quelli che alla forma ci tiene tantissimo

M sa che mi sono spiegato male io. Con xhtml+css puoi fare cose spettacolari.

Fare web lo vedo un po' come quando scolpisci un ceppo di ulivo (il tuo contenuto) per farne una statuina. Il legno ha una sua forma, dei nodi, delle venature. Non puoi trattarlo come fosse argilla. Devi usare il coltello (xhtml e css) rispettando i limiti che il materiale ti impone. Se sei bravo escono comunque risultati bellissimi.

Usare flash invece mi fa venire in mente uno stampino per la plastica: fai quasi quello che vuoi, lo vernici e via... ma alla fine è sempre plastica.

 

[MattiaBergomi]

:fonzie: :fonzie: