Immagini e spaziatura in CSS

[samiel]

Provate a vedere questa pagina:
http://www.liceofranchetti.it/index.php ... cambio_usa
Noterete che sopra la prima immagine c'è un enorme spazio
che la separa in modo abnorme dal testo. La seconda invece no.
Eppure il codice è lo stesso:

Codice: Seleziona tutto

<p>Nel 2007 il Liceo "Franchetti" è stato protagonista di uno scambio con la Bethesda Chavy Chase High School di Washington, tutt'ora in corso. Vi hanno partecipato diciassette studenti, ospitati da altrettante famiglie americane dal 1° al 15 settembre 2007. I ragazzi americani sono attesi qui dal 15 al 29 marzo 2008.</p>
<img class="auto" src="pics/usa/foto01.jpg" alt="Gruppo di studenti 1" title="Gruppo di studenti 1" />
<p>Come i loro compagni australiani del precedente scambio, anche gli studenti americani seguono corsi di italiano, e quindi per loro è importante venire in Italia per conoscere meglio la lingua e la nostra cultura.</p>
<img class="auto" src="pics/usa/foto02.jpg" alt="Gruppo di studenti 2" title="Gruppo di studenti 2" />

e nel CSS ho:

Codice: Seleziona tutto

img.auto{display:block; width:100%}

Perché questa differenza di comportamento? Cosa mi sfugge?

Grazie
M.

[conraid]

va a capo dopo il float:left del menù a sinistra, togli quel 100% per le immagini, che da anche un brutto effetto
Se proprio vuoi prova a mettere 99, o meno, a seconda del "bordo"

[teox99]

ciao ti ho corretto l'errore:
rimpiazza nel tuo codice css la linea con

Codice: Seleziona tutto

/*stili specifici per il layout*/
#leftmenu{float:left; width:140px;padding:40px 30px 0; line-height:2}

[danix]

samiel le dimensioni delle immagini conviene (imho) esplicitarle nell'html, nel tag img, questo perchè sennò il browser proverà a disegnarle in base alla regola del css (nel tuo caso 100% dello spazio messo a disposizione dalla colonna centrale), ma prova a pensare cosa succederebbe se io guardassi il tuo sito con uno schermo grande, ad esempio un 22 o 24 pollici con una risoluzione molto alta?? Mi ritroverei la colonna centrale molto grande e riempita da un'immagine sgranata... se invece indichi height e width nel tag img le dimensioni rimarranno sempre le stesse, e in più, avendo specificato di comportarsi come block non verrà affiancata dal testo...

Una cosa non ho capito, nel tuo css ho visto:

Codice: Seleziona tutto

#leftmenu{float:left; width:160px;\width:170px;w\idth:160px; padding:40px 30px 0; line-height:2}
#rightmenu{float:right; width:150px;\width:160px;w\idth:150px; padding:40px 30px 0; line-height:1.2}


lo fai per testare le varie larghezze?? Non è più semplice modificare il valore di width di volta in volta??

[samiel]

La soluzione sta nell'adottare 99%.

le dimensioni delle immagini conviene (imho) esplicitarle nell'html, nel tag img

Ma non sarebbe XHTML 1.1...

M.

[danix]

allora credo ti convenga non esplicitarlo affatto... non sapevo che nell'1.1 non si potesse fare...

[targzeta]

allora credo ti convenga non esplicitarlo affatto... non sapevo che nell'1.1 non si potesse fare...

A prescindere se si possa fare o meno, danix il punto forte del CSS è proprio dare l'opportunità di separare il concetto che si vuole esprimere da come lo si vuole esprimere graficamente. Quindi i nel tag HTML non andrebbero specificati attributi, se non quello 'id' e 'class' ovviamente.

E' questa la grande innovazione IMHO,
Spina

[samiel]

comunque continuo a non capire perché con 100% dava quel brutto effetto
e solo in un caso.

@ conraid

va a capo dopo il float:left del menù a sinistra

Cioè dovrei mettere:

Codice: Seleziona tutto

#leftmenu{float:left;
width:160px; padding:40px 30px 0; line-height:2}

Ma che funzione ha l'a capo?

M.

[danix]

capisco che vuoi dire spina e mi trovi perfettamente d'accordo... però d'altro canto è anche vero che risulta poco gestibile specificare nel css height e width di ogni singola immagine, sopratutto quando non si tratta di trucchi per arrotondare i bordi o amenità varie... quando si hanno immagini in linea con il testo dovresti fare in modo che tutte risultino alte e larghe uguali e specificare una sola classe oppure inventarti un sacco di id e di conseguenza ottenere un css kilometrico... la giusta soluzione a questo punto potrebbe essere mettere un css inline (con la proprietà style) e specificare li height e width... ma nell xhtml 1.1 si può fare?? nell'1.0 strict si...

samiel, riguardo al tuo problema se hai una versione locale di prova, ti conviene usare degli sfondi di colore diverso per i vari contenitori, in questo modo puoi fare delle prove e notare subito dove sta la magagna... io faccio spesso così per avere un riscontro "visivo" di quello che modifico nel css...

[targzeta]

...samiel, riguardo al tuo problema se hai una versione locale di prova, ti conviene usare degli sfondi di colore diverso per i vari contenitori, in questo modo puoi fare delle prove e notare subito dove sta la magagna... io faccio spesso così per avere un riscontro "visivo" di quello che modifico nel css...

Hai mai usato l'estensione Firebug per Firefox? Secondo me è l'ideale per capire cosa succede

Spina

[teox99]

Hai mai usato l'estensione Firebug per Firefox? Secondo me è l'ideale per capire cosa succede
Spina

ottimo consiglio spina! firebug e' piu' che altro un debugger per javascript e header http,
io aggiungere anche l'utilissima web developer toolbar!
per controllare la struttura delle pagine web in tutti i suoi aspetti... non tornerete piu' indietro!
https://addons.mozilla.org/it/firefox/addon/60

[414N]

io aggiungere anche l'utilissima web developer toolbar!
per controllare la struttura delle pagine web in tutti i suoi aspetti... non tornerete piu' indietro!
https://addons.mozilla.org/it/firefox/addon/60

Consente anche di modificare il CSS della pagina corrente al volo e di salvarlo in un file diverso (volendo), tra le altre cose...

[targzeta]

io aggiungere anche l'utilissima web developer toolbar!
per controllare la struttura delle pagine web in tutti i suoi aspetti... non tornerete piu' indietro!
https://addons.mozilla.org/it/firefox/addon/60

Consente anche di modificare il CSS della pagina corrente al volo e di salvarlo in un file diverso (volendo), tra le altre cose...

Anche Firebug permette di modificare il css al volo. Comunque, mi sono installato la toolbar, poi vi dico, ad occhio e croce non sembra male.

Spina

[samiel]

Codice: Seleziona tutto

Hai mai usato l'estensione Firebug per Firefox?

Certo che sì!
Solo che nel mio caso l'immagine non aveva margini supplementari,
per cui non capisco quanto è successo...

M.

[aschenaz]

La soluzione sta nell'adottare 99%.

le dimensioni delle immagini conviene (imho) esplicitarle nell'html, nel tag img

Ma non sarebbe XHTML 1.1...

M.

Non solo gli attributi width e height sono consentiti in XHTML 1.1
( http://www.w3.org/TR/xhtml-modularizati ... magemodule ),
ma sono anche spesso consigliati per ragioni di accessibilità, in particolare perché
i reader (che non leggono i css) possano anche dare l'idea delle dimensioni
(anzi, per la verità, almeno fino ad un po' di tempo fa, alcuni validatori ne
segnalavano l'assenza come errore); non trovo molte fonti, comunque un articolo
abbastanza interessante è questo:
http://www.nolimit.it/home/page.asp?nca ... che&ID=164