Header, footer e menu a tutta pagina che si adattano ai vari monitor restando a tuta pagina 
Autore: Roberto Z.
Visite 1856,
Followers 1,
Condiviso 0
Ciao, premetto che sono un neofita e non conosco il linguaggio html.
Lavoro con Evo10.
Ho impostato header, menù e immagine a 960 pixel, il massimo consentito, ma rimane spazio tra questi elementi e lo schermo, avrei bisogno di trovare una soluzione che mantenga tutti gli elementi a schermo pieno, allargando o restringendo la finestra del browser, anche con differenti monitor, è possibile? Grazie. Roberto
Postato il
http://www.unofficialwsx5.com/index.php?topic=1833.0
Autore
La soluzione che mi hai proposto è esattamente quella che desidero, ma non riesco ad applicarla. Non so perché.
Nel sito che avevo preparato sono entrato in creazione mappa e nella home ho copiato il codice come riportato di seguito:
(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.
Non succede niente, ho anche provato con un nuovo progetto senza inserire testi ed immagini, il risultato è sempre lo stesso.
Forse devo definire i div? se si come?
Probabilmente c'è qualche comando o procedura da eseguire che per voi è scontata ma per me no, se mi dai un consiglio, grazie
Questo è il sito che sto creando...
personalmente mi sono annotato il link perché lo trovo notevole, ma ricordavo di aver trovato nel sito di Stesil (l'autrice del metodo) spiegazioni più dettagliate che non riesco a ritrovare.
Poiché personalmente non ho mai tentato l'implementazione del metodo e senza quelle istruzioni penso che non saprei seguirlo, e poiché non voglio scavalcare coloro che collaborando hanno fornito lo strumento generosamente e gratuitamente, confido che leggendo questo topic intervengano in sussidio tuo e di tutti noi.
Nel frattempo ti indico quella che, se non ricordo male, fosse la pagina di inizio della spiegazione corredata da immagini che ora non ha più un seguito.
http://stesil.altervista.org/evo10/fasce-orizzontali/pagina-1.html
Indagando il sorgente se hai un pochino di dimestichezza di codici (come non detto) puoi intuire il metodo da seguire anche da solo usando i codici css nel post citato per implementarli correttamente nel progetto.
Purtroppo la spiegazione visuale non c'é più o io non la trovo più; é un peccato perché trattandosi di un problema grafico trovo che sia MOLTO rilevante.
Gli autori vogliano intervenire gentilmente.
...ops, guarda anche questa pagina:
http://stesil.altervista.org/box_model.html
questo è stato realizzato utilizzando quello script (e altri) su evo11
http://templatex5.altervista.org/swagger/index.html
(trattasi di template commerciale)
questa la versione per evo 10
http://templatex5.altervista.org/swagger-10/index.html
ciao Silver!
tu sai dove trovare quel tutorial o non esiste proprio più?
Autore
Ciao Mirko, scusa, non mi sono accorto di aver messo più post... :(, pensavo di rispondere sempre nello stesso, grazie per le risposte, appena posso cerco di applicare.
è quello che hai indicato tu piu su.
no...ne avevo visto un'altro io.
era suddiviso in più schermate se non erro, e ciascuna riportava una spiegazione dettagliata del metodo applicato a partire dalla costruzione del layout di base della pagina creata da wsx5.
Esistevano delle immagini molto esplicative nelle varie schermate.
Ma se non lo sai allora non le hai viste. Pazienza.
@Fabio
E' tutto nel topic da te postato.
Forse ti confondi con qualche altro tutorial/FAQ
ahhh...ok! Nessuno può saperlo meglio di te e Stesil.
Grazie dell'intervento.
Ho citato il post per annotazione ma senza ripercorrelo in lettura e così non ho più ritrovato i dettagli che cercavo.
@ Roberto:
rileggiti con attenzione quel post, ed ora che Lemonsong ci ha dato prova di aver letto questo, affido a lui la richiesta di suppporto che hai rivolto a me in modo immeritatamente lusinghiero.
Ciao
...io rimango in lettura per imparare insieme a te e per fare eventualmente domande a beneficio comune che magari a te non sorgono ancora; adesso contrassegno il topic tra i segui
Come già detto, è scritto tutto in questo topic http://www.unofficialwsx5.com/index.php?topic=1833.0
Forse non è stato allegato correttamente lo script, in ogni caso con un link ad una prova si capirebbe il problema.
Autore
Ciao, grazie per il supporto, purtroppo ho provato e riprovato ma non riesco, forse salto qualche passaggio, ma ho inserito il codice anche ripartendo da un sito di prova nuovo e niente... :(
Autore
Per capire meglio il problema inserisco l'url del sito:
www.robertozanoni.it/tanghiamo
Ho inserito il codice html come da esempio nella home in proprietà ecc ecc ma come vedi non è cambiato nulla.
Come anticipato:
In realtà non l'hai proprio caricato e richiamato come è scritto chiaramente nel topic:
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:
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Autore
E' la prima volta che tento di inserire codoci html, quindi non me ne volere... :), spero che questa procedura mi aiuti a capire come e dove inserirli per poi applicare la procedura ad altri ed eventuali codici, grazie per la pazienza.
Di seguito i passi che ho eseguito, dimmi tu dove sbaglio:
Ho inserito in crezione pagine nella HOME l'oggetto html e Widgets, al cui interno ho copiato il codice segnalato: http://stesil.altervista.org/evo10/fasce-orizzontali/files/jq_strip.js
(ma non ho trovato nessun file da scaricare e quindi non ho potuto indicare la cartella di destinazione files)
allego screenshot
poi sempre in head della pagina home ho trascritto l'altro codice
allego screenshot
www.robertozanoni.it/tanghiamo
Autore
ecco il secondo screenshot
Se ti linko un file da scaricare vuol dire salvare quel file nel tuo PC, tu hai incollato il contenuto del file in un oggetto HTML (senza tag script).
Una volta nel tuo PC dovrai allegarlo al codice (leggi la guida del programma).
Allegare un file al codice serve solo per "caricare" automaticamente il file sul server. Nessuno ti vieta di caricarlo sul server con altri "mezzi", esempio software FTP tipo FileZilla.
Gli script (JavaScript) possono anche essere inseriti nella pagina tra i tag <script> e </script>
Per saperne di più:
http://www.html.it/pag/46494/caricare-javascript-esterno/
E' la prima volta che tento di inserire codoci html, quindi non me ne volere...
Prima di avventurarsi in personalizzazioni, bisognerebbe conoscere bene il programma e un po' di nozioni di base sui linguaggi del web.
Autore
Grazie, all'inizio è un bel rompicapo per chi non è abituato...
se ho ben capito ho aggiunto il file scaricato nella sezione esperto, aggiungi e ho selezionato con una spunta il riquadro collega il file alla pagina (solo per file .js e .css)
ti allego screenshot
tutto giusto o sbagliato?
(nella sezione head della pagina home ho trascritto l'altro codice)
Avendo già incollato questo:
... l'opzione da te scelta è superflua e "dannosa", in alcuni casi può creare problemi perché il codice viene richiamato due volte.
Puoi scegliere di usare quell'opzione oppure incollare la suddetta riga di codice.
Da quello che vedo online (attualmente), oltre ad avere richiamato due volte lo script, hai anche rimosso il codice CSS
Autore
Grazie, rimesso il codice CSS e levata l'opzione che avevo scelto, tutto ok ora?
Non l'hai rimesso e quando lo rimetterai, dovrai personalizzarlo.
Comunque, leggendo meglio il titolo del post "Header, footer e menu a tutta pagina che si adattano ai vari monitor restando a tuta pagina" non credo che ti serva quello script.
Per ottenere quanto descritto nel titolo del post, ti basta usare il programma.
forse Lemonsong intende dire che puoi farlo via css; inserendo cioé nella sezione Esperto al passo 1 un codice css che imposta la larghezza di quegli elementi al 100%, se non ho capito male
se ho intuito bene e si tratta di quel sistema lì, però, si presenta un problema diverso: é necessario dare al viewport un valore definito, altrimenti si sballano i layout di tutte le pagine col cambiare dello screen. Quindi non va bene.
o sbaglio?
Io mi riferivo all'uso canonico del software (vedi allegato).
ahhh...capito; ma in che modo quegli elementi si adattano restando a tutta pagina nei diversi screen?
Alla maniera canonica diamo una larghezza specifica al template...
no diamo una misura specifica solo al contenuto della pagina e all'intestazione...
sì, appunto, quella dell'intestazione fa capo a tutto il sito e vien data al viewport; o no?
Il post parla di questo:
"Header, footer e menu a tutta pagina che si adattano ai vari monitor restando a tutta pagina"
e come risposto da Lemonsong, si fa da programma...con qualsiasi misura abbia il viewport ...
sì ora capisco cosa intendi, in effetti la pagina é l'elemento pagina!
Io però avevo inteso fra le righe, forse sbagliando, che Roberto con pagina intendesse riferirsi a schermo; da qui il mio suggerimento di partenza.
Domanda per Lemonsong...???
e questi da programma ?
con un pò di codice...
Mirko, comunque da programma stai dando agli elementi larghezze fisse, non responsive...
al massimo il programma permette l'adattive grazie al viewport (definito!)
L'unica soluzione é lo script di Stesil e Lemonsong che ho suggerito; in fondo non é per nulla che lo hanno creato.
No, solo grafica inserita nello sfondo pagina oppure nello sfondo intestazione: http://lemonsong.altervista.org/test_div_strip/style/bg.png
@Fabio
Ho solo letto meglio il titolo dell'autore del post, se cerca anche un "layout a fasce", allora quello script può essere utile.
Autore
Accidenti ragazzi, per un neofita come me è difficile seguirvi, complimenti agli esperti
Autore
Grazie per tutti i suggerimenti :)