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

MattiaBergomi

Nuovo Utente
13 Set 2006
5
0
0
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

Utente Attivo
22 Lug 2005
684
0
0
55
Brescia
www.dead.it
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
242333946_f4ee0ed7a6_o.png
 
Ultima modifica:

MattiaBergomi

Nuovo Utente
13 Set 2006
5
0
0
Dead ha scritto:
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 :D 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ù):

Codice:
<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...

open-think ha scritto:
per info sul box model hacks...
Grazie anche a te, una buona lettura in ogni caso ;)
 
Ultima modifica:

dead

Utente Attivo
22 Lug 2005
684
0
0
55
Brescia
www.dead.it
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?
 
Ultima modifica:

MattiaBergomi

Nuovo Utente
13 Set 2006
5
0
0
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

Utente Attivo
22 Lug 2005
684
0
0
55
Brescia
www.dead.it
...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 :rolleyes:


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

MattiaBergomi

Nuovo Utente
13 Set 2006
5
0
0
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 :D :D 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

Utente Attivo
22 Lug 2005
684
0
0
55
Brescia
www.dead.it
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
trattorino css solo se richiama un class di un div HTML e CSS 1
P nascondere div con css inline Javascript 2
C CSS elemento tagliato fuori da div HTML e CSS 9
gandalf1959 Background image in un div con CSS non funziona HTML e CSS 4
bluettina Odio amore per i div e figlio css HTML e CSS 1
M CSS...dinamico? Altezza div variabile, ma con immagine come bordo HTML e CSS 4
V css div testo "nascosto" se supera il width HTML e CSS 16
Monital [DIV/CSS] evidenziare risultato array all'interno di un div PHP 0
M Centrare un DIV nel BODY (usando i CSS) HTML e CSS 1
L [CSS] Div e menu sovrapposti, attributi 'absolute', 'relative' (schema in allegato) HTML e CSS 0
B Flash & CSS: caricare pagina esterna in DIV Flash 2
N [PHP+HTML+CSS] Problema con un div HTML e CSS 6
G Css: come mettere il collegamento al div header? HTML e CSS 8
F [CSS] Problema con IE e div fixed HTML e CSS 2
R [css] lunghezza div dei contenuti principali HTML e CSS 2
L div nascosti via CSS Javascript 1
Kerotan Div, css e testo (prime armi) HTML e CSS 35
gladenko CSS e DIV problema di dimensionamento HTML e CSS 3
M css div w3c posso iniziare? HTML e CSS 1
L padding e mozilla (in css e div) HTML e CSS 8
grottafelix Div O Table [css] HTML e CSS 4
M cosa servono i tag div + guida sui CSS HTML e CSS 5
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14

Discussioni simili