Repository 32bit  Forum
Repository 64bit  Wiki

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.

Immagini e spaziatura in CSS

Messaggioda samiel » gio mar 12, 2009 19:19

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.
samiel
Staff
Staff
 
Messaggi: 5500
Iscritto il: ven gen 16, 2004 0:00
Località: Venezia
Nome Cognome: Mauro Sacchetto
Slackware: 13.0
Kernel: 2.26
Desktop: KDE
Distribuzione: anche Debian

Re: Immagini e spaziatura in CSS

Messaggioda conraid » gio mar 12, 2009 19:50

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
conraid
Staff
Staff
 
Messaggi: 12022
Iscritto il: mer lug 13, 2005 23:00
Località: Livorno
Nome Cognome: Corrado Franco
Slackware: current

Re: Immagini e spaziatura in CSS

Messaggioda teox99 » gio mar 12, 2009 19:58

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
teox99
Linux 2.6
Linux 2.6
 
Messaggi: 733
Iscritto il: ven lug 25, 2008 13:54
Località: Roma[Eur]
Slackware: 13.37
Desktop: KDE - Xfce

Re: Immagini e spaziatura in CSS

Messaggioda danix » gio mar 12, 2009 20:42

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??
Avatar utente
danix
Staff
Staff
 
Messaggi: 3280
Iscritto il: ven ott 27, 2006 18:32
Località: Siderno (RC)
Nome Cognome: Danilo M.
Slackware: 64 14.0
Kernel: 3.2.29
Desktop: fluxbox

Re: Immagini e spaziatura in CSS

Messaggioda samiel » gio mar 12, 2009 21:27

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.
samiel
Staff
Staff
 
Messaggi: 5500
Iscritto il: ven gen 16, 2004 0:00
Località: Venezia
Nome Cognome: Mauro Sacchetto
Slackware: 13.0
Kernel: 2.26
Desktop: KDE
Distribuzione: anche Debian

Re: Immagini e spaziatura in CSS

Messaggioda danix » gio mar 12, 2009 21:39

allora credo ti convenga non esplicitarlo affatto... non sapevo che nell'1.1 non si potesse fare...
Avatar utente
danix
Staff
Staff
 
Messaggi: 3280
Iscritto il: ven ott 27, 2006 18:32
Località: Siderno (RC)
Nome Cognome: Danilo M.
Slackware: 64 14.0
Kernel: 3.2.29
Desktop: fluxbox

Re: Immagini e spaziatura in CSS

Messaggioda targzeta » gio mar 12, 2009 22:09

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
Linux Registered User #454438
Se pensi di essere troppo piccolo per fare la differenza, prova a dormire con una zanzara -- Dalai Lama
20/04/2013 - Io volevo Rodotà
Avatar utente
targzeta
Iper Master
Iper Master
 
Messaggi: 6185
Iscritto il: gio nov 03, 2005 14:05
Località: Carpignano Sal. (LE) <-> Pisa
Nome Cognome: Emanuele Tomasi
Slackware: current
Kernel: latest stable
Desktop: IceWM

Re: Immagini e spaziatura in CSS

Messaggioda samiel » gio mar 12, 2009 22:29

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.
samiel
Staff
Staff
 
Messaggi: 5500
Iscritto il: ven gen 16, 2004 0:00
Località: Venezia
Nome Cognome: Mauro Sacchetto
Slackware: 13.0
Kernel: 2.26
Desktop: KDE
Distribuzione: anche Debian

Re: Immagini e spaziatura in CSS

Messaggioda danix » gio mar 12, 2009 22:38

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...
Avatar utente
danix
Staff
Staff
 
Messaggi: 3280
Iscritto il: ven ott 27, 2006 18:32
Località: Siderno (RC)
Nome Cognome: Danilo M.
Slackware: 64 14.0
Kernel: 3.2.29
Desktop: fluxbox

Re: Immagini e spaziatura in CSS

Messaggioda targzeta » gio mar 12, 2009 22:45

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
Linux Registered User #454438
Se pensi di essere troppo piccolo per fare la differenza, prova a dormire con una zanzara -- Dalai Lama
20/04/2013 - Io volevo Rodotà
Avatar utente
targzeta
Iper Master
Iper Master
 
Messaggi: 6185
Iscritto il: gio nov 03, 2005 14:05
Località: Carpignano Sal. (LE) <-> Pisa
Nome Cognome: Emanuele Tomasi
Slackware: current
Kernel: latest stable
Desktop: IceWM

Re: Immagini e spaziatura in CSS

Messaggioda teox99 » gio mar 12, 2009 22:56

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
teox99
Linux 2.6
Linux 2.6
 
Messaggi: 733
Iscritto il: ven lug 25, 2008 13:54
Località: Roma[Eur]
Slackware: 13.37
Desktop: KDE - Xfce

Re: Immagini e spaziatura in CSS

Messaggioda 414N » gio mar 12, 2009 23:33

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
414N
Iper Master
Iper Master
 
Messaggi: 2882
Iscritto il: mer feb 13, 2008 16:19
Località: Bulagna
Slackware: 14.0 (x64)
Kernel: 3.2.29
Desktop: LXDE

Re: Immagini e spaziatura in CSS

Messaggioda targzeta » gio mar 12, 2009 23:36

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
Linux Registered User #454438
Se pensi di essere troppo piccolo per fare la differenza, prova a dormire con una zanzara -- Dalai Lama
20/04/2013 - Io volevo Rodotà
Avatar utente
targzeta
Iper Master
Iper Master
 
Messaggi: 6185
Iscritto il: gio nov 03, 2005 14:05
Località: Carpignano Sal. (LE) <-> Pisa
Nome Cognome: Emanuele Tomasi
Slackware: current
Kernel: latest stable
Desktop: IceWM

Re: Immagini e spaziatura in CSS

Messaggioda samiel » gio mar 12, 2009 23:45

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.
samiel
Staff
Staff
 
Messaggi: 5500
Iscritto il: ven gen 16, 2004 0:00
Località: Venezia
Nome Cognome: Mauro Sacchetto
Slackware: 13.0
Kernel: 2.26
Desktop: KDE
Distribuzione: anche Debian

Re: Immagini e spaziatura in CSS

Messaggioda aschenaz » ven mar 13, 2009 8:23

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
pensieriemotivi.aschenaz.eu - music-blog
Avatar utente
aschenaz
Staff
Staff
 
Messaggi: 4433
Iscritto il: mar lug 27, 2004 23:00
Località: Reggio Calabria
Nome Cognome: Nino
Slackware: current 64bit
Kernel: 3.14.18
Desktop: KDE 4.10.5

Prossimo

Torna a Programmazione

Chi c’è in linea

Visitano il forum: Nessuno e 2 ospiti