Immagini e spaziatura in CSS

Forum dedicato alla programmazione.

Moderatore: Staff

Regole del forum
1) Citare in modo preciso il linguaggio di programmazione usato.
2) Se possibile portare un esempio del risultato atteso.
3) Leggere attentamente le risposte ricevute.
4) Scrivere i messaggi con il colore di default, evitare altri colori.
5) Scrivere in Italiano o in Inglese, se possibile grammaticalmente corretto, evitate stili di scrittura poco chiari, quindi nessuna abbreviazione tipo telegramma o scrittura stile SMS o CHAT.
6) Appena registrati è consigliato presentarsi nel forum dedicato.

La non osservanza delle regole porta a provvedimenti di vari tipo da parte dello staff, in particolare la non osservanza della regola 5 porta alla cancellazione del post e alla segnalazione dell'utente. In caso di recidività l'utente rischia il ban temporaneo.
samiel
Staff
Staff
Messaggi: 5511
Iscritto il: ven 16 gen 2004, 0:00
Nome Cognome: Mauro Sacchetto
Slackware: 13.0
Kernel: 2.26
Desktop: KDE
Distribuzione: anche Debian
Località: Venezia

Immagini e spaziatura in CSS

Messaggio 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:

Codice: Seleziona tutto

img.auto{display:block; width:100%}
Perché questa differenza di comportamento? Cosa mi sfugge?

Grazie
M.

Avatar utente
conraid
Staff
Staff
Messaggi: 13630
Iscritto il: gio 14 lug 2005, 0:00
Nome Cognome: Corrado Franco
Slackware: current64
Desktop: kde
Località: Livorno
Contatta:

Re: Immagini e spaziatura in CSS

Messaggio 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"

Avatar utente
teox99
Linux 3.x
Linux 3.x
Messaggi: 738
Iscritto il: ven 25 lug 2008, 14:54
Slackware: 13.37
Desktop: KDE - Xfce
Località: Roma[Eur]
Contatta:

Re: Immagini e spaziatura in CSS

Messaggio 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}

Avatar utente
danix
Staff
Staff
Messaggi: 3287
Iscritto il: ven 27 ott 2006, 19:32
Nome Cognome: Danilo M.
Slackware: 64 current
Kernel: 5.4.43 x86_64
Desktop: i3
Località: Siderno (RC)
Contatta:

Re: Immagini e spaziatura in CSS

Messaggio 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??
danix
myself ha scritto:non sono molto presente sul forum, e di ciò mi scuso con tutti

samiel
Staff
Staff
Messaggi: 5511
Iscritto il: ven 16 gen 2004, 0:00
Nome Cognome: Mauro Sacchetto
Slackware: 13.0
Kernel: 2.26
Desktop: KDE
Distribuzione: anche Debian
Località: Venezia

Re: Immagini e spaziatura in CSS

Messaggio 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.

Avatar utente
danix
Staff
Staff
Messaggi: 3287
Iscritto il: ven 27 ott 2006, 19:32
Nome Cognome: Danilo M.
Slackware: 64 current
Kernel: 5.4.43 x86_64
Desktop: i3
Località: Siderno (RC)
Contatta:

Re: Immagini e spaziatura in CSS

Messaggio da danix »

allora credo ti convenga non esplicitarlo affatto... non sapevo che nell'1.1 non si potesse fare...
danix
myself ha scritto:non sono molto presente sul forum, e di ciò mi scuso con tutti

Avatar utente
targzeta
Iper Master
Iper Master
Messaggi: 6629
Iscritto il: gio 3 nov 2005, 14:05
Nome Cognome: Emanuele Tomasi
Slackware: 64-current
Kernel: latest stable
Desktop: IceWM
Località: Carpignano Sal. (LE) <-> Pisa

Re: Immagini e spaziatura in CSS

Messaggio 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
Se pensi di essere troppo piccolo per fare la differenza, prova a dormire con una zanzara -- Dalai Lama

samiel
Staff
Staff
Messaggi: 5511
Iscritto il: ven 16 gen 2004, 0:00
Nome Cognome: Mauro Sacchetto
Slackware: 13.0
Kernel: 2.26
Desktop: KDE
Distribuzione: anche Debian
Località: Venezia

Re: Immagini e spaziatura in CSS

Messaggio 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.

Avatar utente
danix
Staff
Staff
Messaggi: 3287
Iscritto il: ven 27 ott 2006, 19:32
Nome Cognome: Danilo M.
Slackware: 64 current
Kernel: 5.4.43 x86_64
Desktop: i3
Località: Siderno (RC)
Contatta:

Re: Immagini e spaziatura in CSS

Messaggio 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...
danix
myself ha scritto:non sono molto presente sul forum, e di ciò mi scuso con tutti

Avatar utente
targzeta
Iper Master
Iper Master
Messaggi: 6629
Iscritto il: gio 3 nov 2005, 14:05
Nome Cognome: Emanuele Tomasi
Slackware: 64-current
Kernel: latest stable
Desktop: IceWM
Località: Carpignano Sal. (LE) <-> Pisa

Re: Immagini e spaziatura in CSS

Messaggio 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
Se pensi di essere troppo piccolo per fare la differenza, prova a dormire con una zanzara -- Dalai Lama

Avatar utente
teox99
Linux 3.x
Linux 3.x
Messaggi: 738
Iscritto il: ven 25 lug 2008, 14:54
Slackware: 13.37
Desktop: KDE - Xfce
Località: Roma[Eur]
Contatta:

Re: Immagini e spaziatura in CSS

Messaggio 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

Avatar utente
414N
Iper Master
Iper Master
Messaggi: 2922
Iscritto il: mer 13 feb 2008, 16:19
Slackware: 15.0
Kernel: 5.15.19
Desktop: KDE5
Località: Bulagna
Contatta:

Re: Immagini e spaziatura in CSS

Messaggio da 414N »

teox99 ha scritto: 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...

Avatar utente
targzeta
Iper Master
Iper Master
Messaggi: 6629
Iscritto il: gio 3 nov 2005, 14:05
Nome Cognome: Emanuele Tomasi
Slackware: 64-current
Kernel: latest stable
Desktop: IceWM
Località: Carpignano Sal. (LE) <-> Pisa

Re: Immagini e spaziatura in CSS

Messaggio da targzeta »

414N ha scritto:
teox99 ha scritto: 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
Se pensi di essere troppo piccolo per fare la differenza, prova a dormire con una zanzara -- Dalai Lama

samiel
Staff
Staff
Messaggi: 5511
Iscritto il: ven 16 gen 2004, 0:00
Nome Cognome: Mauro Sacchetto
Slackware: 13.0
Kernel: 2.26
Desktop: KDE
Distribuzione: anche Debian
Località: Venezia

Re: Immagini e spaziatura in CSS

Messaggio da 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.

Avatar utente
aschenaz
Staff
Staff
Messaggi: 4623
Iscritto il: mer 28 lug 2004, 0:00
Nome Cognome: Nino
Slackware: current
Kernel: 5.4.x
Desktop: KDE
Località: Reggio Calabria
Contatta:

Re: Immagini e spaziatura in CSS

Messaggio 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

Rispondi