• [v. 10 - v.12] Layout a fasce orizzontali 5 1
Currently:  

Autore Topic: [v. 10 - v.12] Layout a fasce orizzontali  (Letto 6167 volte)

stesil

  • Anziani
  • Utente storico
  • *
  • Post: 1219
    • quellidelcucuzzolo
[v. 10 - v.12] Layout a fasce orizzontali
« il: 05 Settembre, 2014, 01:03:05 »
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

« Ultima modifica: 12 Novembre, 2015, 15:02:45 da stesil »

DanieleAbbaQ

  • Nuovo arrivato
  • *
  • Post: 73
Re:[v. 10] Layout a fasce orizzontali
« Risposta #1 il: 07 Ottobre, 2014, 15:15:38 »
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

  • Anziani
  • Utente storico
  • *
  • Post: 1743
    • lemonsong's links
Re:[v. 10] Layout a fasce orizzontali
« Risposta #2 il: 08 Ottobre, 2014, 13:00:00 »
Risposto qui: http://www.unofficialwsx5.com/index.php?topic=1859.0


@mod/admin

Eventualmente, potete cancellare questi ultimi due post, grazie.

Adriano Meis

  • Beta Tester
  • Nuovo arrivato
  • *
  • Post: 89
Re:[v. 10] Layout a fasce orizzontali
« Risposta #3 il: 24 Ottobre, 2014, 22:55:59 »
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



« Ultima modifica: 24 Ottobre, 2014, 23:01:25 da Adriano Meis »

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1743
    • lemonsong's links
Re:[v. 10] Layout a fasce orizzontali
« Risposta #4 il: 25 Ottobre, 2014, 00:12:43 »
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ù  :)

 
« Ultima modifica: 25 Ottobre, 2014, 00:15:39 da lemonsong »

Adriano Meis

  • Beta Tester
  • Nuovo arrivato
  • *
  • Post: 89
Re:[v. 10] Layout a fasce orizzontali
« Risposta #5 il: 25 Ottobre, 2014, 14:06:21 »
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

  • Anziani
  • Utente storico
  • *
  • Post: 1219
    • quellidelcucuzzolo
Re:[v. 10] Layout a fasce orizzontali
« Risposta #6 il: 25 Ottobre, 2014, 15:23:29 »
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

  • Nuovo arrivato
  • *
  • Post: 36
Re:[v. 10] Layout a fasce orizzontali
« Risposta #7 il: 25 Ottobre, 2014, 19:30:07 »
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?  ;D

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1743
    • lemonsong's links
Re:[v. 10] Layout a fasce orizzontali
« Risposta #8 il: 25 Ottobre, 2014, 20:34:32 »
Attualmente hai inserito tre (3) volte lo script.

Basta una volta, in head.

Xunil

  • Nuovo arrivato
  • *
  • Post: 36
Re:[v. 10] Layout a fasce orizzontali
« Risposta #9 il: 25 Ottobre, 2014, 20:47:01 »
Si già l'ho modificato. Ho inserito il codice html solo nella sezione esperto ma non ho risolto il problema

stesil

  • Anziani
  • Utente storico
  • *
  • Post: 1219
    • quellidelcucuzzolo
Re:[v. 10] Layout a fasce orizzontali
« Risposta #10 il: 25 Ottobre, 2014, 21:06:51 »
No, guarda che ti stai sbagliando. Ce ne sono ancora due, tutti e due in head.

Xunil

  • Nuovo arrivato
  • *
  • Post: 36
Re:[v. 10] Layout a fasce orizzontali
« Risposta #11 il: 25 Ottobre, 2014, 21:18:48 »
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

  • Anziani
  • Utente storico
  • *
  • Post: 1743
    • lemonsong's links
Re:[v. 10] Layout a fasce orizzontali
« Risposta #12 il: 25 Ottobre, 2014, 21:27:44 »
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

  • Nuovo arrivato
  • *
  • Post: 36
Re:[v. 10] Layout a fasce orizzontali
« Risposta #13 il: 25 Ottobre, 2014, 21:45:55 »
Si ho risolto! Una svista  ;D
Grazie!

Adriano Meis

  • Beta Tester
  • Nuovo arrivato
  • *
  • Post: 89
Re:[v. 10] Layout a fasce orizzontali
« Risposta #14 il: 26 Ottobre, 2014, 16:40:27 »
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