23/12 5.10 Pubblicata la guida su come Realizzare una tabella con newsboard realizzata da Scorpy87 15/12 4.15 Pubblicata la Guida per rendere un plugin compatibile con tutte le versioni di Firefox realizzata da Logan 20/11 3.20 Pubblicato il secondo aggiornamento della Raccolta di funzioni Php realizzato da [Antonio] 17/11 4.15 Pubblicata la guida su come realizzare un Css dock-menu realizzata da Scorpy87 29/10 2.30 Aggiunta alla Guida all'installazione in locale realizzata da Logan la Guida all'installazione di Wikipedia 23/9 2.10 Conclusa affiliazione con Nds-Site.com Forum Staff | Blog | Sito

Closed
Guida alla creazione di un separatore sezioni
view post Posted on 16/5/2009, 03:11Quote
Avatar

I still live..

Group: NB ChatOp
Posts: 17477


Status: Utente anonimo


Guida alla creazione di un separatore sezioni


Lo scopo di questa guida, è quello di mostrare la procedura da attuare ai fini di raggiungere quest'effetto (vedere tra la sezione 2 e 3) : http://esempio.blogfree.net/

Come prima cosa, bisogna creare una nuova sezione che fungerà da separatore, tra le sezioni interessate.
Il nome della nuova sezione, dovrà essere
HTML
</a><i></i>

che servirà a nascondere il nome di questa, mentre quello che vogliamo mostrare deve essere inserito nella descrizione della stessa sezione. Nel nostro esempio abbiamo inserito semplicemente "Separazione".

A questo punto bisogna procedere sulla parte "estetica", andate quindi in modifica colori e stili e inserite questo, in fondo al codice:
CODICE
#f201143 img {display:none}
#f201143 .xx, #f201143 .yy, #f201143 .zz, #f201143 .aa, #f201143 .bb {SELETTORE .TITLE ; line-height: 80%}
#f201143 .desc {color: #XXX; font-size: 12px}
#f201143 .xx, #f201143 .yy, #f201143 .zz {font-size: 0; color: #YYY}
#f201143 .xx br, #f201143 .yy br, #f201143 .zz br {display:none}


Analizziamo ora questo codice.
Al posto di 201143, che è l' ID della sezione d'esempio, dovete inserire l' ID della vostra sezione appena creata.1
E' necessario effettuare tutte le sostituzioni affinché l'effetto sia quello desiderato.

Al posto di #XXX, bisogna inserire il colore HTML del testo del separatore, mentre al posto di #YYY dobbiamo inserire un colore che sia molto simile al colore dell'immagine/colore di sfondo del separatore.2

A questo punto cercate sempre in modifica colori e stili, il selettore .title{} e copiate tutto ciò che è racchiuso tra le parentesi graffe, al posto di SELETTORE .TITLE.
Questo serve per dare lo stile al vostro separatore.


1NB: Potete ricavare l'ID della sezione, entrando in una sezione qualsiasi del vostro forum e successivamente, aprire la sezione creata tramite il menù a tendina in fondo a destra della pagina.

2NB: Questo processo bisogna farlo al fine di avere una corretta visualizzazione con Internet Explorer che non è in grado di rimuovere completamente il testo con font-size:0

image

image
image
 
P_MSG P_WEBSITE Top
0 replies since 16/5/2009, 03:11
 
Closed

Fast reply

You need to register in order to post: click here