[v. 10 - v.12] Layout a fasce orizzontali

[stesil]

Esistono diversi modi per ottenere un sito con fasce di sfondo orizzontali a tutta pagina. Noi abbiamo fatto questa prova sfruttando la struttura HTML che il programma crea:

http://lemonsong.altervista.org/test_div_strip/

http://stesil.altervista.org/evo10/fasce-orizzontali/

WebSite racchiude in un unico div anonimo gli oggetti che sono presenti sulla stessa riga della griglia della pagina. Se un oggetto si estende su più righe il div contenitore raggrupperà gli oggetti adiacenti contenuti in tutte le righe interessate.
Le immagini forse spiegano meglio delle parole:

http://lemonsong.altervista.org/test_div_strip/files/creazione_pg.png

http://stesil.altervista.org/evo10/fasce-orizzontali/images/page.png

Ogni div contenitore corrisponde a una fascia orizzontale. La funzione JavaScript si occupa di assegnare ad esso una larghezza dinamica e una classe, il cui nome contiene un numero crescente (a partire da 0): sfondo0, sfondo1, sfondo2...
E' sufficiente quindi scrivere il codice CSS di ogni classe generata per formattare a piacere ogni fascia.

Codice CSS

In head della pagina (Proprietà pagina, esperto, prima della chiusura del tag HEAD) devono essere definiti gli stili per ogni fascia, ossia per ogni div contenitore.

Esempio http://lemonsong.altervista.org/test_div_strip/

Codice:

Only registered users can see contents. Please click here to Register or Login.
Alle tre fasce è stato assegnato un diverso colore di sfondo.


Esempio http://stesil.altervista.org/evo10/fasce-orizzontali/

Codice:

Only registered users can see contents. Please click here to Register or Login.
In questo caso alle fasce 0 e 3 sono state assegnate immagini di sfondo, mentre alle fasce 1 e 2 è stato assegnato lo stesso colore di sfondo.

Codice JavaScript

Scaricare questo file http://stesil.altervista.org/evo10/fasce-orizzontali/files/jq_strip.js ed allegarlo al progetto attraverso un oggetto HTML e Widgets, indicando come cartella di destinazione la cartella files.

Sempre in head della pagina inserire questo codice:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Lo script è stato testato con la versione 10.1.10.54



AGGIORNAMENTO PER LA VERSIONE 12: http://www.unofficialwsx5.com/index.php?topic=1833.msg14752#msg14752

[DanieleAbbaQ]

salve, ho usato la striscia per questa bozza


http://www.realizzazionesitiwebsalerno.it/nereidi/index.html


funziona tutto correttemente ma noto che su Chrome, in basso al footer mi escono le barre laterali. come mai? grazie.

[lemonsong]

Risposto qui: http://www.unofficialwsx5.com/index.php?topic=1859.0


@mod/admin
Eventualmente, potete cancellare questi ultimi due post, grazie.

[Adriano Meis]

salve,
lo stavo provando con la evo11 ed è vero, con chrome (e opera) appare la barra orizzontale, ridimensionando la finestra si vede a intermittenza ogni pochi px, fermandosi nel momento in cui si vede rimane visibile, fa piu o meno lo stesso con safari ma non rimane visibile.


invece andando sotto la misura di impage si vede un margine a sinistra, questo su tutti i browser.


http://templatex5.altervista.org/stiky2/index.html

[lemonsong]

Sì, c'è un pixel ballerino: in alcune situazioni, l'arrotondamento si fa sentire.

Prova a sostituire, nello script, il metodo Math.floor con Math.ceil


Per il resize sotto la larghezza del sito, ci dobbiamo pensare un po' di più 

 

[Adriano Meis]

Sì, c'è un pixel ballerino: in alcune situazioni, l'arrotondamento si fa sentire.

Prova a sostituire, nello script, il metodo Math.floor con Math.ceil


Per il resize sotto la larghezza del sito, ci dobbiamo pensare un po' di più 

Grazie Lemon, per la scrollbar direi che è risolta al 99%.

[stesil]

Abbiamo modificato lo script e sembra che il problema del resize non ci sia più: http://stesil.altervista.org/evo10/fasce-orizzontali/files/jq_strip.js 

Il pixel ballerino, invece, potrebbe rivedersi sulla destra in alcune situazioni: quando la differenza tra la larghezza della finestra e la larghezza del div è un numero dispari, occorre approssimare all'intero il quoziente della divisione /2. Il valore calcolato in questa situazione non è quindi "esatto".

Provalo e facci sapere.

Grazie per la segnalazione.

[Xunil]

Ciao ragazzi, ho provato a realizzare alcune pagine come l'esempio ma non capisco perchè l'effetto è questo:
http://www.xunil.it/template/contatti.html
Lo righe non coprono tutto lo schermo, come mai? Qualche suggerimento? 

[lemonsong]

Attualmente hai inserito tre (3) volte lo script.

Basta una volta, in head.

[Xunil]

Si già l'ho modificato. Ho inserito il codice html solo nella sezione esperto ma non ho risolto il problema

[stesil]

No, guarda che ti stai sbagliando. Ce ne sono ancora due, tutti e due in head.

[Xunil]

Ti dico quello che ho fatto:
- in impostazioni avanzate nella sezione esperto "prima della chiusura del tag HEAD" ho inserito questo codice "<script src="files/jq_strip.js"></script>" ed ho collegato il file jq_strip.js
- dentro ogni pagina in proprietà ho inserito il codice (ovviamente modificando il numero di stringhe ed i colori in base elle mie esigenze):

<style>

.sfondo0 {

    background-color:#FFCC66;

}

.sfondo1 {

    background-color:#7BB5EF;

}

.sfondo2 {

    background-color:#003366;

}

.sfondo3 {

    background-color:#7BB5EF;
   
}   
   
    .sfondo4 {

    background-color:#003366;

</style>

Tutto qui!

[lemonsong]

Ti dico quello che vedo:

[ Guests cannot view attachments ]


Per curiosità: ma tu fai template per WS?

Se sì, dovresti conoscere a menadito il programma e un po' di programmazione di base.

[Xunil]

Si ho risolto! Una svista 
Grazie!

[Adriano Meis]

Abbiamo modificato lo script e sembra che il problema del resize non ci sia più: http://stesil.altervista.org/evo10/fasce-orizzontali/files/jq_strip.js 

Il pixel ballerino, invece, potrebbe rivedersi sulla destra in alcune situazioni: quando la differenza tra la larghezza della finestra e la larghezza del div è un numero dispari, occorre approssimare all'intero il quoziente della divisione /2. Il valore calcolato in questa situazione non è quindi "esatto".

Provalo e facci sapere.

Grazie per la segnalazione.

metto il link aggiornato


http://templatex5.altervista.org/stiky2/index.html


ritengo che lavora molto bene, non c'è piu l'errore del margine e la barra non la vedo più (tranne che uno sfarfallio con safari ma solo durante il movimento di ridimensionamento,  quindi  non significativo)


gran bello script, direi superbo,    grazie