Il mio primo template in CSS3: pareri, consigli e problemi.

02-09-2012, 12.04.03

Sto facendo il mio primo template (in assoluto) usando tecnologie come il CSS3 e l'html5 (alcune).
Si puo trovare all'indirizzo http://pianetaminecraft.it/

Il doctype è html5:

Codice HTML:

<!DOCTYPE HTML>

E il css usa molto i tag css3:

Codice:

#headercontainer {
height: 280px;
border-radius: 0 0 2px 2px;
box-shadow: 0px 0px 6px 0px #02020A;
overflow: hidden;
}

Tuttavia, ho alcuni problemi con il codice... in alcuni punti sono costretto ad usare il tag "style=", che non dovrebbe mai essere usato.

Codice HTML:

<li><a href="#nogo" style="background:url('http://farm6.staticflickr.com/5159/5885842735_91a8410a95_m.jpg');"></a></li>

Codice HTML:

<div class="bar"><div class="activatedbar" style="width: 240px;"></div></div>

Inoltre, ho paura di usare troppi @font-face, anche se l'assenza totale di immagini nel css dovrebbe compensare la banda utilizzata per i file .woff, o no?

Codice HTML:

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'/>

Insomma ditemi cosa ne pensate del template, soprattutto critiche e suggerimenti.
Ciao!

02-09-2012, 12.07.24

Scusa, ma perché non hai usato i nuovi tag HTML5 al posto dei div? Come ad esempio <header>, <footer>, <section>, <aside>, <hgroup> ecc..

**javascripter** · 02-09-2012, 12.10.49

Ma in che modo sei costretto ad usare l'attributo style?

02-09-2012, 12.21.57

Originalmente inviato da australiafever

Scusa, ma perché non hai usato i nuovi tag HTML5 al posto dei div? Come ad esempio <header>, <footer>, <section>, <aside>, <hgroup> ecc..

Inizialmente li avevo usati, ma poi ho scoperto che guardando il template su explorer e altri browser "esplode tutto" e non si capisce più niente, invece usando i div ci sono sempre dei problemi estetici, ma il template è usabile su tutti i browser.

Originalmente inviato da javascripter

Ma in che modo sei costretto ad usare l'attributo style?

Ad esempio, per mostrare le barre di avanzamento. Nell'homepage ci sono 4 barre, ognuna con una zona illuminata diversa. Per definire la lunghezza della zona illuminata devo specificare la lunghezza del div "activatedbar". Se lo mettessi nel css, diverrebbe statico. Invece usando i tag style posso modificare individualmente la lunghezza di tutte le barre.

02-09-2012, 12.29.53

Ovviamente IE8 e precedenti non leggono i nuovi tag HTML5, ma per ovviare al problema esiste questo script di google, che funziona al 100%

Codice HTML:

<!--compatibilita' ie--><!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

02-09-2012, 12.40.59

Grazie! :D

**dreadnaut** · 02-09-2012, 12.51.35

Senza andare a spiluccare nel codice, io darei un po' più di spazio al testo, che ora è un po' appiccicato ai bordi dei contenitori, e ricomprimerei l'immagine di sfondo (>500kb). Puoi anche farla più piccola, e lasciare che il browser la sfuochi un poco quando la scala.

02-09-2012, 15.09.22

Originalmente inviato da dreadnaut

Senza andare a spiluccare nel codice, io darei un po' più di spazio al testo, che ora è un po' appiccicato ai bordi dei contenitori

La prima del testo non l'ho capita... devo aggiungere dei margini al testo in modo da "allontanarlo" dai bordi?

Originalmente inviato da dreadnaut

, e ricomprimerei l'immagine di sfondo (>500kb). Puoi anche farla più piccola, e lasciare che il browser la sfuochi un poco quando la scala.

Non ci avevo pensato... tanto lo sfondo non contiene contenuto, è solo qualcosa per non lasciare un misero colore statico. Che metodo mi conviene usare per la compressione? L'ho ridimensionata e smussata con G'MIC e poi l'ho compressa con Gimp in formato jpg qualità 80 (se non mi sbaglio)

**dreadnaut** · 02-09-2012, 15.20.01

Originalmente inviato da edo98

La prima del testo non l'ho capita... devo aggiungere dei margini al testo in modo da "allontanarlo" dai bordi?

Si, in modo che "respiri" un po' di più. Se è molto vicino ai bordi di solito è più scomodo da leggere

Può anche essere utile crearti una pagina con una styleguide: un singolo testo con tutti i tag html che potresti voler usare, in modo da preparare il css per quegli elementi una volta per tutte.

**javascripter** · 02-09-2012, 15.28.50

Originalmente inviato da edo98

Ad esempio, per mostrare le barre di avanzamento. Nell'homepage ci sono 4 barre, ognuna con una zona illuminata diversa. Per definire la lunghezza della zona illuminata devo specificare la lunghezza del div "activatedbar". Se lo mettessi nel css, diverrebbe statico. Invece usando i tag style posso modificare individualmente la lunghezza di tutte le barre.

Puoi creare altre classi da concatenare a activatedbar. Ad esempio:

Codice HTML:

		<div class="bar"><div class="activatedbar width1"></div><div class="barlabel"> 145%</div></div>
		<div class="bar"><div class="activatedbar width2"></div></div>		
		<div class="bar"><div class="activatedbar width3"></div></div>		
		<div class="bar"><div class="activatedbar width4"></div></div>		
		<div class="bar"><div class="activatedbar width5"></div></div>

E definisci ogni classe:

Codice:

.width1 { width: 200px; }
.width2 { width: 64px; }
.width3 { width: 102px; }
.width4 { width: 240px; }
.width5 { width: 450px; }

Tanto per fare un esempio.
Ho vaghi ricordi che questo genere di stile possa essere semplificato con qualche nuova regola in css3, ma non ne sono particolarmente convinto (ah, no, riguardava i keyframes e le animazioni personalizzate).

02-09-2012, 15.48.52

Il problema è che quelle barre devono essere diverse ad ogni pagina.
Considerale come degli indicatori che indicano l'attività di una persona... non posso fare una classe per ogni persona con i pixel diversi...

03-09-2012, 15.56.03

Non posso modificare il mio messaggio precedente...
quindi sono costretto a mettere un nuovo post!

Che ne pensate della pagina di registrazione?
Il template è finito così com'è, è gradevole come template finale?

03-09-2012, 16.40.19

Non vedo niente, mi da errore sulla riga 81.

03-09-2012, 17.13.23

Originalmente inviato da australiafever

Non vedo niente, mi da errore sulla riga 81.

È perchè sto modificando il codice php e spesso faccio errori... mi hai beccato nel momento in cui avevo sbagliato :P

Discussione: Il mio primo template in CSS3: pareri, consigli e problemi.

LinkBack

Strumenti discussione

Display

Il mio primo template in CSS3: pareri, consigli e problemi.

Regole di scrittura