Sito con larghezza 100% 
Autore: Luciano F.
Visite 3026,
Followers 3,
Condiviso 0
Ciao ragazzi,
ho letto una marea di post per cercare di ottenere un sito con larghezza 100% (o quasi) ma onestamente sono confuso dai tanti codici. Ho fatto delle prove con risultati insoddisfacenti ma sicuramente per causa della mia inesperienza.
Per riassumere:
1) Per cercare di ottenenere un sito a larghezza totale o quasi ma che si adatti bene (anche se non perfettamente) anche al responsive, quale sarebbe il metodo migliore? Implementazione di codice (quale codice e come?) oppure impostazione della larghezza dell'intestazione e altro (di quale misura?)
2) Nel caso poi siano da variare i breackpoint, come sarebbe meglio impostarli?
Scusate se posto una domanda molto ricorrente ma personalmente mi serve per chiarirmi le idee.
Grazie
Luciano
Postato il
...qui trovi un bella "discussione" in merito ...
con parecchie indicazioni ...
https://helpcenter.websitex5.com/post/145270
Autore
Grazie Claudio,
avevo già letto quel post (specialmente il suggerimento di Skeggia) e impostando a 1920px ho riscontrato che avviene quanto asserito da Roberto ovvero che il monitor è riempito dallo sfondo e non dai contenuti e non so se sbaglio io in qualcosa. A che misura sarebbe corretto impostare l'intestazione e/o i breakpoint?
...scusa ma non ha senso avere dei contenuti "elastici" , altrimenti l'impaginazione si sfalsa ... tranne in certi casi ...
... se intendi un'immagine a tutta larghezza , quello è un altro discorso ...
e , per ora solo, con codici esterni puoi farlo.
I breakpoint nel 99% dei casi come li imposta il programma vanno bene ...
Per l'intestazione dipende dal sito / dimensione del menu in larghezza.
Come ripetutto più volte , da me, in quel post ... se hai un esempio di sito che vorresti "seguire" , posta il link così vediamo di cosa si tratta ...
E' inutile parlarne perché il programma non da la possibilità di eliminare totalmente lo sfondo
@Giuseppe , ma il template di GiuseppeGuida lo hai provato ?
forse bisognerebbe solo saper usare il programma un pochino, e darsi da fare a provare le dritte che ti vengono date...
Autore
Ciao Giuseppe, prima di aprire questo post ho letto attentamente il tuo in cui mi sembra che volessi otttenere immagini a larghezza totale senza che rimangano i minimi spazi intorno alle stesse immagini e (non te la prendere) onestamente ti dico che sembrerebbe che certi suggerimenti non li hai messi in pratica. Non si capisce anche se hai provato il template che dovrebbero averti inviato.
Comunque, ritornando al mio quesito, che se non erro è diverso da quello di Giuseppe, io vorrei ottenere un contenuto pagina il più largo possibile da sembrare a tutta larghezza (o quasi, poi "giocherò" con i colori) ma che non pregiudichi il corretto funzionamento sia in versione desktop che responsive e per questo chiedevo quale potrebbe essere la corretta misura dell'intestazione.
All'apertura del template l'intestazione standard è di 960...a quanto potrei aumentare?
Grazie ragazzi.
@Luciano F.
se l'intestazione fosse trasparente o stesso colore dello sfondo, puoi lasciarlo tranquillamente a 960, e al limite usare questo trucchetto, suggerito già parecchie volte...
http://www.quellidelcucuzzolo.blogspot.it/2016/01/layout-strisce-orizzontali-website-x5-12.html
Pur rimanendo dell'opinione che queste problematiche dovrebbero essere risolte dal programma, ( anche perchè penso che non dovrebbe essere una cosa cosi complicata) visto che oggi come oggi, quasi tutti i nuovi siti creati sono full screen, ho deciso che comunque una soluzione la devo trovare, per me e per chi la chiede.
Sono arrivato a una soluzione che molto si avvicina a quello che si voleva ottenere, non è perfetto ma quasi, cosi facendo si possono creare siti con testi, immagini gallerie, video, con qualsiasi contenuto a pieno schermo senza usare una riga di codice, tutto con il programma. Alcune righe di codice ci sono solo per tenere bloccata l'intestazione e il fondo pagina ( altra caratteristica che sarebbe utile avere da programma).L 'ho appena terminato (ore 3.09) mi sembra funzioni tutto correttamente, ma potrebbe esserci qualche imperfezione.
http://www.laboratoriowebonline.com/inlavorazione/pro12/
Il mio esempio è qui: http://www.ggwebtest.altervista.org
ho inviato il template a Giuseppe P. ma mi diceva che nella gallery ci sono ancora gli spazi laterali ed ho capito a cosa si riferisce: lui dice che in pratica non è possibile avere una gallery con slideshow a pieno schermo CREATA TOTALMENTE CON WEBSITE se tale gallery la si inserisce nel corpo pagina in un sito con INTESTAZIONE standard di 960 px... In effetti Website, in questo caso, non ti fa andare oltre i 960 px con la larghezza della slide e, chiaramente, con 960 px NON SI COPRE L'INTERA LARGHEZZA DELLO SCHERMO se non usando del codice esterno. Nel mio caso si potrebbe portare l'intestazione a 1366 px (la larghezza dello schermo del mio portatile) e si coprirebbe l'intero schermo, ma su dispositivi diversi dal mio, con schermi molto più grandi, la slide comunque non coprirebbe più l'intero schermo... da considerare poi che con una Intestazione a 1366 px bisognerebbe agire poi sui margini degli altri contenuti (testi per esempio) per non far si che questi ultimi siano larghi quanto tutto lo schermo rimanendo "attaccati" ai bordi dello stesso...
insomma Giuseppe P. chiede qualcosa che in effetti altri software permettono di fare con estrema facilità senza l'uso di codici esterni e non sento di dargli tutti i torti. Credo sia una richiesta più che lecita.
Buongiorno Mirco, su questo non son molto d'accordo , io uso diciamo abbastanza bene il programma , ma a volte fa degli errori enormi ! e poi inserire alcuni effetti ed altro se uno non capisce e non sa i codici html e javascript ... beh diciamolo! riesce fare ben poco ;)
@Roberto O.:
il codice che hai usato per l'intestazione non la blocca soltanto, imposta anche il sito alla larghezza 100%... che è quello che abbiamo consigliato nell'altra discussione alla prima o seconda risposta...non è poi così difficile...basta utilizzare "solo" gli strumenti di website e si può ottenere semplicemente, ma probabilmente chi ha iniziato l'altro post non ha messo in pratica i consigli ricevuti o non conosce bene website... poi che il programma sia perfettibile non ci sono dubbi, nessuno è perfetto... buona giornata...
Infatti!! è una mancanza di WS. sono d'accordo con Giuseppe G. e Giuseppe P. Incomedia dovrebbe darsi da fare con lo sviluppo , ed arrivare a quei livelli che il web richiede di "OGGI" e non anni fa!
Io direi ... poco svillupato per l'esigenze di oggi ;)
io qui ho inserito una slide a pieno schermo in un sito con pagine impostate in INTESTAZIONE a 1100 px, la slide copre tutto lo schermo ed è responsive (fatta con wowslider):
http://www.bozzasito11.altervista.org
Si fa tutto, ma di certo non è semplicissimo per chi non è molto esperto.
Il codice non mi imposta al 100% il sito, almeno, non essendo io espertissimo di codici non sono riuscito, ma solo intestazione e menu.
Il risultato dello schermo pieno è ottenuto solamente con un gioco di breakpoint ( se ce ne fossero 5 in più verrebbe anche meglio).
Tutti gli altri esempi che ho visto indicati qui ( almeno quelli senza aiuti esterni) non sono pienamente fullscreen, ma solo lo sfondo e a schermo pieno.
un progetto butta li in pochi minuti...senza codici...di nessun tipo...
solo impostata l'intestazione a 1920px (che quindi setta anche il corpo pagina a 1920) con la galleria masonry che hai inserito anche tu e qualche cella di testo...tutto con margini a 0 esterni e interni...responsive... non sembra che vada bene?
http://www.skeggia12.it/test/breakpoint/
In questo tuo progetto , aprendo la finestra a tutto schermo, ( io ho un monitor impostato a 1920) vedo perfettamente il sito a schermo pieno e tutti i suoi contenuti,lo vedo correttamente anche da smartphone 5 pollici , ma se stringo anche di un solo px la finestra, vedo tutti i contenuti a sinistra con una larghezza meno di metà dello schermo.
Questo perchè probabilmente hai inpostato il primo BP.(in automatico) a 1920 e quello successivo a presumibilmente a 960. questo fa si che appena la finestra o l'eventuale schermo sia inferiore a 1920 i contenuti si allineano con una larghezza inferiore allo schermo pieno. *(allego immagine)
Lo scopo da raggiungere e quello che quasiasi sia il dispositivo e quindi la larghezza del monitor, il sito appaia con i contenuti che occupano tutto lo schermo.
Nel mio esempio ho impostato 10 BP. nell' ordine 1920, 1750, 1600, 1450,1300,1150,1000 850 700 e inferiore a 700.
Ho provato il template di Giuseppe Guida, ma è solamente l'immagine dello sfondo ad essere a pieno schermo e non le immagini o le gallerie di immagini.
Ho chiesto ad Incomedia ma mi hanno detto che il programma ha bisogno sempre di una larghezza fissa.
Quindi il problema non è ancora risolto....
Autore
Penso che il programma, per essere competitivo sotto tutti i punti di vista, dovrebbe integrare questa feature e che sarebbe gradito un cenno da Incomedia sulle intenzioni e possibilità di realizzazione di questa necessità ormai richiesta a gran voce più volte. Credo sia opportuno sapere se si potrà fare tecnicamente ed eventualmente anche una previsione.
Si è vero che il programma, per come è fatto, pemette anche utilizzi "avanzati" ma questi non sono però alla portata di tutti.
Tornando ai post inseriti dopo il mio ultimo intervento:
Ciao Mirco e Skeggia, avevo provato ad usare quei codici (anche quelli di unofficial) ma non sono stato capace di farli funzionare. Mi era chiaro di allegare il ".js" ma meno dove inserire lo script (mi pare nelle proprietà pagina) e altro (in impostazioni avanzate/esperto/prima di chiusura Head). Probabilmente ho errato in qualcosa.
Complimenti......Ottimo lavoro ragazzi!!! Credo che il lavoro che avete svolto sia perfetto per le mie conoscenze.
Mi piacciono entrambi e mi piacerebbe capire come utilizzare i codici che leggo con ctrl+u. Mi occupo di altro settore, quello dei siti è un hobby, e sono il primo che ho sempre preferito insegnare a pescare più che dare il pesce ma in questo caso, non riuscendo chiedo, se possibile per voi, di avere delle istruzioni sia dei codici che come inserirli.
Chiaro che avendo i codici e le istruzioni poi eventuali personalizzazioni e aggiustamenti riescono meglio.
Grazie a tutti
Grazie Luciano per i complimenti. Sono dal cellulare. Stasera appena sarò a casa ti scrivo tutto così ti spiego come fare. Vai qui: www.ggweb70.altervista.org e c'è la mia mail a metà della home. Scrivimi sulla mail e ti spiego tutto lì con screenshot. Ciao ciao
Autore
Giuseppe, infinite grazie per la disponibilità. Sicuramente il supporto sarà utilissimo per comprendere meglio.
Grazie!
Ciao Luciano, per quanto riguarda il mio, nessun codice tutto con il programma,
Queste poche righe di codice da inserire in : Passo4 / Statistiche seo e codice/Esperto/ Prima della chiusura del Tag Head/ , solo se vuoi rendere fisse l'intestazione e piè di pagina. Cosa che graficamente in questo tipo di sito è molto apprezzabile specialmente nel caso di siti monopagina con ancore.
<style type="text/css">
body #imHeader, #imHeaderBg {position: fixed; left:100%px; top: 0px; width: 100%; height:124px; z-index:50;}
body #imMnMn{position:fixed; top: 75px; left:100%px; width: 100%; height:28px; z-index:50;}
body #imContent, #imContentGraphics {padding-top: 140px;}
#imFooter, #imFooterBg {
bottom: 0;
position: fixed;
z-index:10;
}
</style>
PER IL RESTO : attivi la funzione responsive, in impostazioni modello setti tutto a 1920,
poi crei 10 breakpoint con le seguenti impostazioni : nell' ordine 1920, 1750, 1600, 1450,1300,1150,1000,850, 700 e inferiore a 700.
Non da un risultato perfetto nel senso che se il sito si apre con uno schermo da 1920 px il riempimento è completo, ma se si aprisse con uno schemo da 1919 px, per esempio, in breakpoint passa a1750 quindi si vedono si i contenuti a tutto schermo ma avanzano 150 px che, nella peggiore delle ipotesi, si distribuiscono in due righe verticali di 75 px che comunque di fastidio ne danno molto poco. Poi puoi inserire tutto,
Per finire solo qualche consiglio per le grafiche.
Possibilmente creare un menù non più largo di 699 px in modo che il menù toast non appaia prima del break poin dei 700 px.
Configurare intestazione e pie di pagina del modello principale e di quello responsive in maniera analoga usando loghi della stessa misura nei due casi, , poichè solo a 1920 px si vede la l'intestazione principale e un pixel piu sotto quella responsive.
Autore
Roberto...mille grazie! Tra un pò metto in pratica. Appena possibile scrivo un riscontro.