dimensioni immagini in percentuale

[unprocione]

Ciao a tutti, sono nuova da queste parti

Non faccio la webdesigner di mestiere ma come hobby. Sono una fotografa e sto lavorando al mio sito. Mi sono impantanata in una cosa veramente seccante: le immagini non si resizerano. Ho fatto un layout tutto in percentuale e questo è il codice del css per immagini e contenitori delle immagini, ma sembra non andare. Già sui 15 pollici spunta la scrollbar verticale.

div#dentro { 
    top: 9%;
	bottom: auto;
    display: block;
    width: 100%;
	height: 84%;
    overflow: auto;
	position:fixed;
	

}

img.resize 
      {display: block;
	   height: 100%;
}

Come mai? cosa sbaglio? Mi sto esaurendo
Vi dò anche l'indirizzo del mio sito, magari può essere utile.
PS: se ci sono errori perdonateli, non ho ancora validato

http://www.caroprocione.com/fashion.htm

[Cooly]

Stringi il campo..

div#dentro {      
top: 9%; 	
bottom: auto;     
display: block;     
width: 80%; 	
height: 50%;     
overflow: auto; 	
position:fixed; 	  
}  
img.resize {
display: block; 	   
height: 50%; 
}

e se mai il fixed lo elimini...

[Mich_]

Hai usato un linguaggio vecchio di molti anni ...

Hai mescolato formattazione HTML e formattazione CSS (e questo comporta difficolta` a sistemare il CSS e a far funzionare la cosa cross-browser): togli tutti gli attributi di formattazione HTML e sostituiscilil coni corrispondenti CSS.

Hai usato le tabelle per formattare (da evitare perche` oltre ad essere contro le norme di accessibilita`, comporta difficolta` a sistemare i CSS - i default delle tabelle non sono fatti per formattare, ma per inserire dati tabellari): le tue sono in pratica liste, non tabelle.

Hai usato le % in modo non corretto (il 100% vuol dire grande quanto il contenitore, ma se nel contenitore ci sono anche altri oggetti o margini,bordi,padding sei sicura di sforare).

Dovresti passare a XHTML 1.0 Strict (risolvi autoamticamente vari problemi di IE6 e IE7), e poi validare (e correggere gli errori): questo ti semplifica poi la sistemazione dei CSS

[unprocione]

Originariamente inviato da Mich_
Hai usato un linguaggio vecchio di molti anni ...

imbarazzante ho imparato l html nel 2003 e da allora non è che abbia continuato ad ammazzarmi di studio

Hai mescolato formattazione HTML e formattazione CSS

grazie per l'osservazione, d'ora in poi cercherò di stare attenta!

Hai usato le tabelle per formattare

eh già, avevo un po' il dubbio che fosse una porcheria, ma non capisco bene display:. come dovrei allinearle? con inline? boh, lo so di dire eresie ma ti prego di comprendermi

Hai usato le % in modo non corretto (il 100% vuol dire grande quanto il contenitore, ma se nel contenitore ci sono anche altri oggetti o margini,bordi,padding sei sicura di sforare).

ti riferisci al div con le immagini o che altro?

Dovresti passare a XHTML 1.0 Strict

avevo cominciato a studiare xml ma poi non capivo esattamente il punto e ho mollato. in brevissimo (se non ti annoia e se non pensi che sia off topic), potresti dirmi in cosa consiste concettualmente la X davanti a html?

Spero che tu non mi voglia uccidere.

@Cooly ho provato il tuo codice qui http://www.caroprocione.com/fashion-22.htm ma non funzia!

[Mich_]

imbarazzante ho imparato l html nel 2003 e da allora non è che abbia continuato ad ammazzarmi di studio

Nel 2003 c'era gia` XHTML ed i CSS: il tuo codice era gia` vecchio allora.
Nel frattempo tutti i browser si sono aggiornati e certe strutture vecchie non vengono rese bene.

Hai usato le tabelle per formattare

eh già, avevo un po' il dubbio che fosse una porcheria, ma non capisco bene display:. come dovrei allinearle? con inline? boh, lo so di dire eresie ma ti prego di comprendermi

Le tabelle inseriscono un loro significato semantico ed i browser inseriscono di default degli stili come se fossero tabelle di dati: conviene toglierle ed usare oggetti piu` corretti.

ti riferisci al div con le immagini o che altro?

Ho notato varie dimensioni 100%, ed ho visto blocchi che sforano: al 90% di probabilita` (statistica empirica leggendo il forum) questo vuol dire errato uso delle dimensioni in %.

avevo cominciato a studiare xml ma poi non capivo esattamente il punto e ho mollato. in brevissimo (se non ti annoia e se non pensi che sia off topic), potresti dirmi in cosa consiste concettualmente la X davanti a html?

XHTML e` una riformulazione di HTML secondo le specifiche XML.
XML pareva avere un futuro nei siti Web, ma ora pare abbandoanto. Tra l'altro sta emergendo una nuova formulazione di HTML (la versione 5), che peero` e` riconosciuta solo in pochi brwoser, per cui non e` ancora utilizzabile nelle applicazioni destinate a tutto il Web.
Comunque tutto questo non credo ti interessi.
Riformulo:
XHTML e` una riformulazione dell'HTML in modo da essere razionale e da separare completamente contenuto da formattazione: la versione 1.0 Strict e` quella con il maggior supporto da parte dei browser in circolazione.
In rete trovi i manuali specifici per XHTML: vedi il sito di HTML.it per un tutorial, e vedi ad esempio http://www.w3schools.com/ per la sintassi (e le differenze con HTML4 e con le versioni transitional).

[unprocione]

Ma se non uso le tabelle come allineo gli elementi in modo da avere lo stesso risultato?
e cosa c'è che non va nel codice per il resize delle immagini? perchè non funziona, al di là di tutti gli errori che hai detto? come funziona il meccanismo delle immagini elastiche? non riesco a trovare molto nel web oltre all'articolo su html.it.

[unprocione]

sto provando a togliere le tabelle, ma float e display non vanno. le scrollbar sono scomparse e anche con overflow: scroll non scrolla, oltre al fatto che il div che dovrebbe essere orizzontale va in verticale.

ho messo ogni singola immagine in un div con questo codice

div#dentro div.elementi { 	display: block; 	float: left;     height: 100%}

io non voglio thumbnails ne strani template preformattati, voglio solo un div che scrolla orizzontalmente e le immagini che si resizerano.
vorrei semplicemente un div come questo del sito di françois lapage.
http://two-eyes.com/works2/

ho letto l'html e il css e mi sembra fatto peggio del mio eppure funziona. non capisco piu davvero cosa dovrei fare e su internet nn trovo soluzioni che non siano qualcosa che ho già provato.

[Mich_]

Se ci sono dei float, ci devono essere anche dei clear (o altere tecniche per contenere i float).
Infatti i blocchi floattati escono di default dal normale flusso.
Vedi i numerosi thread sull'argomento presenti nel forum.

Nel sito citato nell'ultimo post, l'altezza viene sempre forzata, e la larghezza del contenitore e` enorme (per poter contenere tutte le immagini).

E` una scelta di layout che personalmente non condivido: io preferisco uno scroll verticale, che e` molto piu` gestibile dai mezzi tecnici attuali (in particolare la rotellina del mouse).

[unprocione]

allora: ho studiato tutorial su clear display e float così da togliermi ogni dubbio.
ho eliminato le tabelle, corretto errori madornali e aggiunto css.

ho messo al posto delle tabelle, dentro il div container "dentro" un div per ogni immagine, il div si chiama "elementi" e questo è ciò che gli ho detto di fare

#dentro {top: 10%;    
width: 100%;     
height: 80%;     
overflow: auto;     
position: fixed;     
display: block;     
float: left; 	}  

div.elementi { 	
display: block; 	
float: left; }  

div.elementi img  { 	
width: 100%; }

questo è ciò che è venuto fuori
pagina web
css

problema a: le immagini non floattano.
problema b: le immagini non si resizerano.

adesso davvero non so piu cosa fare. DAVVERODAVVERO

[Mich_]

Ci sono ancora un po' di cose da sistemare.
1. eliminare i tag di formattazione: <small>, [b],
2. eliminare gli attributi di formattazione: border="0" (vanno spostati nel CSS)
3. eliminare tutti i
(nel tuo layout servono per formattare, quindi il loro uso e` errato)

Le immagini non si ridimensionano perche` non c'e` dimensione al contenitore.
In pratica tu hai i <div class="elementi"> che prendono la dimensione del loro contenuto (non e` definita ne` larghezza, ne` altezza), e dentro questi ci metti degli oggetti con width:100% . La % si intende riferita alle dimension del contenitore (nel tuo caso il <div>, ma questo nonha dimensione, quindi il 100% e` relativo a qualcosa non definito.

Prova con:

div.elementi {
  width: 600px;     /* queste misure si possono cambiare */
  height: 400px;   /* non e` strettamente necessario, ma aiuta (specie all'inizio) */
  border: 1px solid black;  /* qesto per le prove - se non ti piace puoi toglierlo, ma quando il resto funziona */
  background: red;          /* idem */ 
  */	display: block; -- pleonastico: i div sono block di default*/
  */	float: left;  -- non serve: sono tutti uno sotto l'altro */
}

div.elementi img {
	width: 100%;
}

Ho messo bordi e colore di sfondo, per farti notare come le immagini si posizionano all'interno dei loro contenitori
Poi dovrai toglierli, ma per le prove lasciali, altrimenti non capisci cosa stai facendo.