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

hi hi... :badgrin: +1 per me ;)


ovviamente scherzo... :lol:
danix
myself ha scritto:non sono molto presente sul forum, e di ciò mi scuso con tutti

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 »

samiel ha scritto: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.
no mauro, non devi mettere niente, ti stavo dicendo perché si comportava così, lo so mi esprimo male, avrei dovuto dire "si comporta così perché va a capo dopo il float:left del menù a sinistra" :-)

quella era la causa, la soluzione è il seguito, cioè di togliere 100% e provare, se proprio vuoi, 99%

Questo credo che lo faccia per questioni di bordi, se metti 100% hai pur sempre una dimensione maggiore del 100% per via dei bordi

Comunque hanno ragione Danix e Aschenaz, in xhtml 1.1 si può mettere dimensione direttamente in xhtml (http://www.w3.org/TR/2006/WD-xhtml-modu ... dule_Image), nel css va il layout non la dimensione dell'immagine.
Le immagini non necessarie (sfondi, abbellimenti, etc...) vanno invece "direttamente" in css, come background di un div

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 »

aschenaz ha scritto:...
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
Se hai un browser che non legge i css sei messo male a prescindere dalle immagini, tutti i flottanti, tutti i margini i padding le dimensioni dei font, i colori, etc..., etc...

Però è vero che esplicitando nel tag anche width e heigth il browser si riseva lo spazio nella pagina in attesa di ricevere l'immagine....ma i fogli di stile fanno anche questo :). Ovviamente alt e longdesc fanno parte di quello che vuoi presentare e quindi vanno giustamente inseriti.

Poi ripeto, la mia è solo un opinione personale, l'importante come sempre è sapere ciò che si sta facendo!

Spina
Se pensi di essere troppo piccolo per fare la differenza, prova a dormire con una zanzara -- Dalai Lama

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 »

spina ha scritto: Se hai un browser che non legge i css sei messo male a prescindere dalle immagini, tutti i flottanti, tutti i margini i padding le dimensioni dei font, i colori, etc..., etc...
Ma i css come dici sono stati fatti appunto per separare il contenuto dal layout, ma alcune immagini sono "contenuto", altre layout. Uno sfondo, una icona, un logo, un header, etc... vanno direttamente nel css (anche la sorgente, non solo larghezza ed altezza, così da evitare lavoro inutile agli screen reader o simili, anche se secondo le WAG2.0 per le immagini di "abbellimento" si può usare la tecnica dell'annullamento tramite ALT
http://www.w3.org/TR/WCAG20-TECHS/H67.html), ma se vuoi mettere una foto, un qualcosa che spiega il contenuto, allora va in html. E browser che non leggono css ce ne sono eccome, da un banale lynx agli screen reader citati da Aschenaz, ma questi non scaricano nemmeno le immagini, ma "scrivono o descrivono" l'attributo ALT e/o longdesc.
Quindi la questione di larghezza ed altezza è arbitraria e personale, ma se hai tante immagini della stessa dimensione conviene fare una classe unica, pensa agli album fotografici, ma se sono di dimensione diversa conviene settarlo nell'html. Solamente una questione di ottimizzazione secondo me.

Comunque le cose stanno per cambiare, soprattutto per xhtml2
http://www.w3.org/TR/xhtml2/mod-image.h ... magemodule
mentre per html5 sarà simile ad adesso
http://dev.w3.org/html5/spec/Overview.h ... mg-element
con ancora width e height

Ma chissà quando usciranno le specifiche definitive, e soprattutto chissà quando i browser si adegueranno

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 »

Considerato che:
  • siete almeno in tre a pensarla così
  • vi stimo tutti e tre
  • il mio senso autocritico mi dice che io sbaglio sempre
per quanto mi riguarda d'oggi in poi specificherò sempre height e width all'interno del tag <img>.

Stavo per scrivere:
"Se però un giorno uscirà un nuovo linguaggio a markup che non permetterà di fare questo, vi picchio a tutti e tre :D"

Poi ho letto il tuo ultimo post conraid, visto le nuove specifiche XHTML2, cosa devo fare? A questo punto il mio senso di autocritica sta per venire meno in favore di un:"lo sapevo" :)

Spina
Se pensi di essere troppo piccolo per fare la differenza, prova a dormire con una zanzara -- Dalai Lama

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 »

spina ha scritto: Se hai un browser che non legge i css sei messo male...
Mi riferivo ai lettori vocali...

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 »

aschenaz ha scritto:
spina ha scritto: Se hai un browser che non legge i css sei messo male...
Mi riferivo ai lettori vocali...
Questa battuta è cattivissima ma mi è venuta subito in mente quando ho letto il post :):"Ed io che ti avevo detto, sei messo male!"

Battutaccia a parte, tutti questi reader (links e lynx compresi) non hanno bisogno delle informazioni riguardo larghezza o altezza di un immagine, dato che semplicemente non la scaricano :)

Spina
Se pensi di essere troppo piccolo per fare la differenza, prova a dormire con una zanzara -- Dalai Lama

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 »

spina ha scritto: Poi ho letto il tuo ultimo post conraid, visto le nuove specifiche XHTML2, cosa devo fare? A questo punto il mio senso di autocritica sta per venire meno in favore di un:"lo sapevo" :)
Sembra, e dico sembra, che il futuro standard per le pagine web sarà html5 e non xhtml2, che sarà usato per altre cose. Ma questo dipenderà più dalla strada che prenderanno i browser che non altro. Gli strumenti di sviluppo invece (da dreamweaver in testa) hanno richiesto "loro" html5.

Per adesso però... io lo metto, tranne come ho detto i casi dove ho immagini ripetitive della stessa dimensione ed una classe è più conveniente

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 »

conraid ha scritto:Per adesso però... io lo metto, tranne come ho detto i casi dove ho immagini ripetitive della stessa dimensione ed una classe è più conveniente
quoto...
danix
myself ha scritto:non sono molto presente sul forum, e di ciò mi scuso con tutti

Rispondi