È un buon sistema creare css tutti misurati con pixels?

10-07-2004, 18.46.32

Sto progettando il mio primo css. secondo voi è buono fare un css con font,altezza dei box,insomma tutto misurato in pixels, oppure potrei avere effetti indesiderati?
con effetti indesiderati non intendo quelli x es. risolvibili con una riga di codice (ad es. articolo {overflow : scroll} )

10-07-2004, 19.30.52

i css espressi in pixel hanno il vantaggio di inserire gli oggetti in punti precisi del monitor,ma proprio per questo hanno lo svantaggio delle risoluzioni video,quindi secondo me dovresti fare un mix tra pixel e percentuale

10-07-2004, 21.25.34

di solito per migliorare l'accessibilita' si consiglia di usare sempre gli em per la visualizzazione a schermo (media=screen)
qst per quanto riguarda le dimensioni dei fonts, poi per le posizioni non so, solo tieni presente che se fai posizionamenti assoluti usando i px appena cambi risoluzione si sballa tutto

10-07-2004, 21.32.35

il problema è che vorrei inventare un css al 100% realizzato da me,ma non so proprio da dove iniziare

ho fatto una bozza su foglio (proporzionato allo schermo) ma non riesco a trasferirlo sul css

10-07-2004, 23.31.34

Proprio non direi.

Se metti le dimensioni in pixel hai parecchi casini, i principali sono:
1) il tuo sito non si adattera' allo schermo dell'utente
2) sara' inaccessibile, soprattutto a chi usa IE e vuole ingrandire i caratteri.

L'idea di base per creare un layout "liquido" (cioe' che si adatta allo schermo) e' USARE VALORI RELATIVI e tenere a mente LE PARENTELE.

Mi spiego.

Se guardi qui: http://www.disclic.unige.it/arabistica/ noterai che anche riducendo la finestra il sito mantiene la sua grafica.
L'idea sta tutta nelle percentuali.
Prendi ad esempio l'intestazione, e' un div con:

Codice:

position: absolute; 
left: 0.5%; top: 1%; 
height: 100px; 
width: 99%; 
border: 1px solid #000000;

A parte l'altezza che e' quella dell'immagine usata come sfondo, la larghezza e' stata calcolata cosi':

Volevo un margine del colore di sfondo attorno al div, cosi' ho deciso di posizionarlo in left 0,5%

Se il div inizia 0,5% piu' a destra del margine sinistro e voglio che sia simmetrico dall'altra parte, quanto lo devo fare largo?

100% - (0,5 + 0,5)

Cioe' esattamente 99%, ovvero la larghezza del div.

Calcolando le larghezze in percentuali e facendo lo stesso per le altezze e le posizioni avrai un sito leggerissimo e adattabile a tutti gli schermi.

Per quanto riguarda la parentela: ricorda che tutti i tag che specifichi nel CSS sono figli di BODY.

Prendi ad esempio:

Codice HTML:

<body>

 <div>
  <p id="prova1">
    prova1
  </p>
 </div>

 <p id="prova2">
   prova2
 </p>

</body>

Il tag P#prova1 e' figlio del DIV e nipote di body
Il tag P#prova2 e' figlio diretto di body.

quindi prova2 prendera' in eredita' tutte le cose che hai specificato in BODY e che non hai ri-specificato per P#prova2, mentre prova1 le prendera' da DIV.

Sembra incasinato, invece e' una gran comodita' perche' le impostazioni di base le puoi specificare solo in body e verranno trasferite "a cascata" a tutti gli altri tags (a meno che tu non specifichi qualcosa di diverso, ovviamente)

10-07-2004, 23.49.00

:grin: :grin: grazie cod. ho capito un po' di più con la tua spiegazione. però ho notato che bisogna avere ben chiare le idee,siccome bisogna fare un po' di calcoli matematici x avere un css "allineato e non buggato" e soprattutto ci vuole infinita logica.
[OT]tra tanti siti proprio un sito sull'arabia e arabo...

[/OT]

10-07-2004, 23.54.31

Originalmente inviato da Rommel

:grin: :grin: grazie cod. ho capito un po' di più con la tua spiegazione. però ho notato che bisogna avere ben chiare le idee,siccome bisogna fare un po' di calcoli matematici x avere un css "allineato e non buggato" e soprattutto ci vuole infinita logica.

Beh insomma: basta saper fare le sottrazioni!!

OLD

Originalmente inviato da Rommel

[OT]tra tanti siti proprio un sito sull'arabia e arabo...

[/OT]

per forza, l'ho fatto io

11-07-2004, 09.08.37

Si pero' sono contrari alle direttive sull'accessibilita' (se uno volesse rispettarle, e' ovvio)

Originalmente inviato da W3C - WAI: WCAG 1.0

3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2]
http://www.w3.org/TR/WCAG10-TECHS/#tech-relative-units

11-07-2004, 09.37.33

quindi....faccio un cocktail di pixels, ex, percentuali e magari pure ex?
usare più unità di misura mi preoccupa perché temo fortemente che possa venire un css sprporzionato, è possibile?

Ospite · 11-07-2004, 14.24.35

Un buon sito con degli esempi di layout 2 colonne, 3, ecc...
http://glish.com/css/

12-07-2004, 09.31.56

Originalmente inviato da rootkill

resto comunque perplesso... consiglia di usare gli em per il font-size, ma gli esempi sono quasi tutti con i pixels per la formattazione

http://www.w3.org/TR/WCAG10-CSS-TECHS/#units La linea-guida parla di usare unità di misura relative, e tra queste ci sono anche i pixels... poi, se uno utilizza gli em e le percentuali, tanto meglio... ma non mi sembra contro le norme di accessibilità usare i pixels...

Assolutamente NO.

I pixel non sono un'unita' di misura relativa.

* Use the "em" unit to set font sizes.
* Use relative length units and percentages. CSS allows you to use relative units even in absolute positioning. Thus, you may position an image to be offset by "3em" from the top of its containing element. This is a fixed distance, but is relative to the current font size, so it scales nicely.
* Only use absolute length units when the physical characteristics of the output medium are known, such as bitmap images.

I pixel sono fissi e relativi al medium VIDEO, mentre em, ex e le percentuali sono relative alla dimensione dei font (i primi due) e alla dimensione totale dell'elemento genitore (le percentuali).

Un esempio lo puoi vedere qui (ok ok continuo a citarmi ma almeno cosi' posso replicare in caso di dubbi): http://www.disclic.unige.it/Glossario/index.php

L'immagine ha delle dimensioni relative. Prova ad ingrandire il testo e anche l'immagine si ingrandira'!

12-07-2004, 19.38.39

sto rifacendo il sito e ho letto su un manuale di accessibilita' che conviene usare le parole chiave del tipo small, x-small, large ecc.
per dire il vero, li' dice che per avere tutti i vantaggi bisogna stabilire diverse unita' a seconda dei browser (attraverso tecniche di style hiding basate sui bug di ns4 e ie5 e selettori con priorita' tipo body p e html>body p) pero' vorrei evitare tutta sta roba complicata... quindi sono in dubbio su se usare le parole chiave o gli em (x il momento sto usando le prime perche' gli em non so come si usano)

12-07-2004, 21.53.07

Non e' che ci voglia molto.

Personalmente trovo gli em molto facili da usare.

1 em = dimensione del font che stai usando
1 ex = meta' della dimensione del font che stai usando

( http://www.w3schools.com/css/css_units.asp )

12-07-2004, 22.10.09

grazie mille cod :grin:
quindi + o - 1em=100% e 1ex=50%

ok ora provo a passare dalle parole chiave agli em

un'altra cosa: se io scrivo per es. "border-width:2" il 2 come viene interpretato? come px? pt? em? %? altro? e volendo specificare, conviene usare anche qui le percentuali?

13-07-2004, 08.33.45

Se on specifichi NON viene interpretato, viene saltato perche' e' un errore di scrittura.

Inoltre ricordati che non ci vanno gli spazi tra il numero e l'unita' di misura:

width: 9 em;

e' sbagliato, mentre:

width: 9em;

e' giusto.

Ti segnalo altre due cosine che possono essere utili.

La prima e' che ci sono delle parole chiave che "accorpano" piu' cose, esempio:

border-width: 1px;
border-style: solid;
border-color: #ff0000;

si puo' scrivere anche:

border: 1px solid #ff0000;

La seconda e' il validatore w3c per il css, che trovi in questa pagina multipla:
http://www.w3schools.com/site/site_validate.asp

I css sono una delle cose che trovo piu' divertenti nello sviluppo web :grin:

14-07-2004, 00.29.20

concordo nell'amore per i css :grin:
tra l'altro l'uso di border et similia come shortcut per le varie sottocategorie lo conosco, anche se lo uso poco perche' fuinisco per confondermi :grin: (xo' qnd finisco di scrivere tutto il foglio di stile vedo di usarli in modo da ridurre i bytes

)
il validator pure lo sapevo

l'unica cosa e' che a me senza specificare unita' di misura lo interpreta comunque (e sto parlando di opera, non di IE

) ma stiamo parlando sempre di quirk mode (poiche' ancora devo gestire doctype e definizioni)

quindi cosa consigli per bordi e simili? em o px? o altri?

14-07-2004, 07.20.52

Per i bordi vanno bene pure i pixel. O addirittura le parole chiave thin, medium e thick.

L'unico casino coi bordi e i margini e' nel box model di IE.

Per chi non lo sapesse: http://www.tantek.com/CSS/Examples/boxmodelhack.html
P.S.: il box model e' un problema ancora presente su IE 6, ma prima con il box model hack poteva essere aggirato.
Con IE 6 microsoft ha pensato bene di impedire l'hack senza fissare il bug nella visualizzazione dei margini e dei bordi. A dimostrazione di quanto dico: m$ NON e' interessata allo standard.

Ospite · 14-07-2004, 14.35.47

Non ho capito la storia del box, siccome sto facendo per il mio sito una sezione tecnica per realizzare effetti grafici senza immagini tra cui menu con finti bottoni con i css, non vorrei scrivere delle sciocchezze...

io bordi ho sempre usato i px limitandomi ai border-style :solid, dotted e dashed, cmq sarò scema ma non ho capito la cosa del box.

14-07-2004, 22.12.41

Non c'e' problema: te lo spiego io :grin:

Nel sito che ho linkato si fa un esempio.

Un quadrato (una BOX) che ha:
20px di bordo (e' tanto ma serve per vedere meglio il bug)
30px di padding (il margine interno tra bordo e contenuto)
300px di larghezza.

Un browser normale farebbe un rettangolo di 300px, poi aggiungerebbe 30px di margine ed infine 20px di bordo, per un totale di 350px.

IE invece fa un rettangolo di 300px, POI DA DENTRO toglie 20px per il bordo e 30px per il margine, per un totale di 300px esatti misurati fuori, ma solo 250 dentro!

Insomma per IE width comprende anche i margini interni (padding) e lo spessore del bordo, per tutti gli altri browser (come dice lo standard) no.

Il casino e' se usi dei margini grossi o dei bordi spessi come nell'esempio, oppure se calcoli tutto al millimetro (anzi, al pixel) perche' la grafica potrebbe risultare sballata.

Uhm... e' chiara come spiegazione?

Ospite · 15-07-2004, 13.54.28

grazie della spiegazione, infatti io ie lo uso solo per vedere cosa vedono gli altri :-), cmq qualche differenza c'è sempre tra 1 browser e l'altro, purtroppo se non si fossero messi a farsi la guerra le 2 + note compagnie ma avessero collaborato ci sarebbero meno problemi per tutto, non solo per i css.

15-07-2004, 14.58.56

Originalmente inviato da Rommel

:grin: :grin: grazie cod. ho capito un po' di più con la tua spiegazione. però ho notato che bisogna avere ben chiare le idee,siccome bisogna fare un po' di calcoli matematici x avere un css "allineato e non buggato" e soprattutto ci vuole infinita logica.
[OT]tra tanti siti proprio un sito sull'arabia e arabo...

[/OT]

Per realizzare un sito ci vogliono sempre, un foglio di carta, una matita ed un righello. E contare.
Il pixel è una misura relativa, perché dipende dal dispositivo che l'utente usa, dalla suua risoluzione vera, e dal sistema operativo.
Ma un layout "liquido" non sempre è la cosa migliore, perché se si allarga molto la finestra, si rischia di perdere tutta la formattazione.
Chi ha uno schermo da 21 pollici e più, ha difficoltà a vedere un sito liquido.
Non solo, se usi le dimensioni in pixel per i font. o stesso con IE non potrà modificarne le dimensioni e perderà le informazioni, per i font è sempre meglio usare misure in percentuali.

Per il sito arabo, non guardarlo tanto è cambiato

15-07-2004, 17.12.34

Sono d'accordo per il foglio di carta.

Non sono d'accordo per il layout liquido: se la dimensione dei font la fai in percentuale un layout liquido si dovrebbe adattare tranquillamente a qualunque schermo.

se si allarga molto la finestra, si rischia di perdere tutta la formattazione.

Cosa intendi di preciso?

Il sito non e' ancora cambiato. Lo cambieranno presto sostituendolo con uno quasi sicuramente non accessibile (e magari nemmeno validato).

Ma che volete farci: e' la legge di mercato. E' come cucinare un piatto favoloso per uno che vuole mangiare al mcdonalds... bisognerebbe essere tanto saggi da non provarci nemmeno.

Discussione: È un buon sistema creare css tutti misurati con pixels?

LinkBack

Strumenti discussione

Display

È un buon sistema creare css tutti misurati con pixels?

Regole di scrittura