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

mattiabergomi

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

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!

claudioweb

Ciao Mattia, benvenuto nel forum

Ti consiglio di provare ad impostare

overflow:auto;

nelle proprietà css del div centrale

mattiabergomi

Ciao, ti ringrazio per il benvenuto! (e complimenti per il Forum che vedo è moddato mica male :D)

Ho attribuito l'attributo (:? mmh forse potevo sforzarmi un po' per l'italiano... ) nel frattempo come soluzione temporanea (che almeno mi evita le sovrapposizioni folli)

Il fatto è che, oltre ad essere l'attributo non compatibile con quello stramaledetto IE (ma vabbé soprassediamo pure su questo fatto per il momento), avrei tuttavia preferito che la scrollbar apparisse alla pagina (al browser) e non al singolo div (nel caso la tabella centrale), non tanto perché sia io fissato così e basta ma perché, come puoi notare ad esempio entrando nella 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...:sbonk:

claudioweb

Puoi mettere tutti i div che creano la struttura in tre colonne (non ho guardato bene se è già così...) in un div contenitore.

Così ti basta fissare la larghezza del div contenitore, per far in modo che quando la finestra è più piccola della larghezza prevista, esca la barra di scorrimento del browser.

Esempio:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div style="width:800px; margin:auto;">Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti Contenuti </div>
</body>
</html>

Al posto di contenuti ovviamente ci vanno gli altri div...

P.S. mi sto salvando qualche smile

mattiabergomi

Sì sì questo la farei se volessi il sito con la classica struttura a "colonnona fissa centrale" come ad es. la Homepage di questo Forum stesso, ma il mio lo volevo appunto al 100% della width, proprio come accade con una banalissima tabella... (so che da dire così sembra complicato ma a me sembra così naturale che non capisco come mai non accada già da solo...:x)

claudioweb

Purtroppo ora ho IE7 installato e non posso effettuare le prove necessarie

però qualcosa del genere dovrebbe esserti utile:

style="width:100%; min-width:800px; margin:auto;"

Sfruttando larghezza in percentuale e larghezza minima

mattiabergomi

Ti ringrazio molto dell'interessamento, mi sento quasi in colpa quando poi devo rispondere così

Sempre soprassedendo al fatto che anche
min-width:800pxnon va in IE (la 7 non so), comunque la cosa è un po' più generale (cioè dinamica), nel senso che la min-width non sarebbe poi la stessa per ogni pagina, ma a dipendenza del contenuto...

claudioweb

@MattiaBergomi said:

min-width:800pxnon va in IE (la 7 non so), comunque la cosa è un po' più generale (cioè dinamica), nel senso che la min-width non sarebbe poi la stessa per ogni pagina, ma a dipendenza del contenuto... Riguarda alla min-whidth ci sono sicuramente modi per farla andare su tutte le versioni di IE, basta cercare un po'.

Io stavo ragionando così:

allargo il div al 100%, quindi come se fosse proprio una tabella;
imposto una min-width a X pixel di larghezza (800 era solo un esempio), dove X lo scelgo in maniera forfettaria in maniera tale che se la finestra è troppo piccola, esce la barretta di scorrimento.

Purtroppo credo che moltissime altre soluzioni non ne esistano...

mattiabergomi

Eh anche optando per un min-width 600px (ad es.) per il div centrale, poi però appena raggiunta la min width il div di destra (quello con info visitatore, get firefox, ecc., che è lì grazie ad un float:right) passa sopra al centrale, dato che quest'ultimo non si restringe più...

claudioweb

Infatti io avevo fatto riferimento ad un terzo div, che contenga gli altri, e non direttamente a quello centrale, perchè se no è normale avvengano sovrapposizioni.

Oppure potresti sfurttare semplicemente un div che non ha altri div di fianco, tipo header, o footer.

mattiabergomi

@claudioweb said:

Infatti io avevo fatto riferimento ad un terzo div, che contenga gli altri, e non direttamente a quello centrale, perchè se no è normale avvengano sovrapposizioni.
Ah ok, eh appunto si ritorna al layout "a colonnone centrale" che però volevo evitare per sfruttare il 100% della larghezza di ogni schermo...

@claudioweb said:

Oppure potresti sfurttare semplicemente un div che non ha altri div di fianco, tipo header, o footer.In che senso scusa? Al momento il sito è strutturato nel modo che la pagina è costruita con un Header.php che comprende tutto tranne la tabella centrale, e la pagina che include l'header e ci mette la tabella centrale. La struttura è


<div id="Sinistro">
  ... Menu ...
</div>

<div id="Destro">
  ... Info Visitatore, ecc...
</div>

<div id="Centrale">
  ...Contenuto della Pagina (es. immagine Tux in Homepage)...
</div>

con il relativo CSS interessato:


#Sinistro
{
   float:   left;
   margin:  0 0 0 0;
   width:   111px;
}

#Destro
{
   display: inline; /* IE non raddoppia più il margin right */
   float:   right;
   margin:  0 10px 0 0;
   width:   220px;
}

#Centrale
{
   margin:  0 240px 0 115px; /* Non si sovrappone ai due menu laterali */
}

Cosa intendevi tu nel concreto?

claudioweb

Intendevo che ti basta aggiungere a fine pagina qualcosa di simile:


<div id="footer" style="width:100%; min-width:600px; margin:auto;">Realizzato da MattiaBergomi</div>

e risolvi......

mattiabergomi

Ah, uhm beh la scrollbar appare certo, ma poi i div sopra si restringono (e sbordano) comunque come prima, in pratica si aggiunge una scrollbar "che non serve a niente" nel senso che anche scrollando a destra poi non c'è nulla mentre sopra tutto si comporta allo stesso modo...

claudioweb

Io ti sto lanciando degli imput, senza testare, solo per aiutarti a trovare una possibile soluzione
Vedi un po' tu....

mattiabergomi

Eheh certo infatti ti ringrazio moltissimo :D, è che per 'sta cosa mi 'sto leggermente dannando quindi magari le risposte sembravano un po' secche ma non era sicuramente mia intenzione