Pagina 1 di 2
Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 19:19
da 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:
Perché questa differenza di comportamento? Cosa mi sfugge?
Grazie
M.
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 19:50
da 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"
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 19:58
da 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}
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 20:42
da 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??
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 21:27
da 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.
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 21:39
da danix
allora credo ti convenga non esplicitarlo affatto... non sapevo che nell'1.1 non si potesse fare...
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 22:09
da targzeta
danix ha scritto: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
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 22:29
da 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.
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 22:38
da 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...
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 22:45
da targzeta
danix ha scritto:...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
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 22:56
da teox99
spina ha scritto:
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
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 23:33
da 414N
Consente anche di modificare il CSS della pagina corrente al volo e di salvarlo in un file diverso (volendo), tra le altre cose...
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 23:36
da targzeta
414N ha scritto:
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
Re: Immagini e spaziatura in CSS
Inviato: gio 12 mar 2009, 23:45
da samiel
Certo che sì!
Solo che nel mio caso l'immagine non aveva margini supplementari,
per cui non capisco quanto è successo...
M.
Re: Immagini e spaziatura in CSS
Inviato: ven 13 mar 2009, 8:23
da aschenaz
samiel ha scritto: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