WebSite X5Help Center

 
Luciano F.
Luciano F.
User

Sito con larghezza 100%  it

Auteur : Luciano F.
Visité 2972, Followers 3, Partagé 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

Posté le
24 RéPONSES - 4 UTILE
Luciano F.
Luciano F.
User
Auteur

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?

Lire plus
Posté le de Luciano F.
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT

...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 ...

Lire plus
Posté le de Claudio D.
Tommaso Tarallo
Tommaso Tarallo
User

E' inutile parlarne perché il programma non da la possibilità di eliminare totalmente lo sfondo

Lire plus
Posté le de Tommaso Tarallo
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT

@Giuseppe , ma il template di GiuseppeGuida lo hai provato ?

Lire plus
Posté le de Claudio D.
Mirko Boschetti
Mirko Boschetti
Moderator
Giuseppe P.
E' inutile parlarne perché il programma non da la possibilità di eliminare totalmente lo sfondo

forse bisognerebbe solo saper usare il programma un pochino, e darsi da fare a provare le dritte che ti vengono date...

Lire plus
Posté le de Mirko Boschetti
Luciano F.
Luciano F.
User
Auteur

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.

Lire plus
Posté le de Luciano F.
Roberto O.
Roberto O.
User

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/

Lire plus
Posté le de Roberto O.
Giuseppe Guida
Giuseppe Guida
User

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. 

Lire plus
Posté le de Giuseppe Guida
A. Kris
A. Kris
User
Mirko Boschetti
Giuseppe P. E' inutile parlarne perché il programma non da la possibilità di eliminare totalmente lo sfondo forse bisognerebbe solo saper usare il programma un pochino, e darsi da fare a provare le dritte che ti vengono date...

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 ;)

Lire plus
Posté le de A. Kris
Skeggia 12
Skeggia 12
Moderator

@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...

Lire plus
Posté le de Skeggia 12
A. Kris
A. Kris
User
Giuseppe Guida
Il mio esempio è qui: http://www.ggwebtest.altervista.org 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. 

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!

Lire plus
Posté le de A. Kris
A. Kris
A. Kris
User
Skeggia 12
nessuno è perfetto...

Io direi ... poco svillupato per l'esigenze di oggi ;)

Lire plus
Posté le de A. Kris
Giuseppe Guida
Giuseppe Guida
User

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. 

Lire plus
Posté le de Giuseppe Guida
Roberto O.
Roberto O.
User

Skeggia 12
@Roberto O.: il codice che hai usato per l'intestazione non la blocca soltanto, imposta anche il sito alla larghezza 100%... 

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.

Lire plus
Posté le de Roberto O.
Skeggia 12
Skeggia 12
Moderator

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/

Lire plus
Posté le de Skeggia 12
Roberto O.
Roberto O.
User
Skeggia 12
un progetto butta li in pochi minuti...senza codici...di nessun tipo...

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. 

Lire plus
Posté le de Roberto O.
Tommaso Tarallo
Tommaso Tarallo
User

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....

Lire plus
Posté le de Tommaso Tarallo
Luciano F.
Luciano F.
User
Auteur

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.

Giuseppe Guida

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

Lire plus
Posté le de Luciano F.
Giuseppe Guida
Giuseppe Guida
User

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

Lire plus
Posté le de Giuseppe Guida
Luciano F.
Luciano F.
User
Auteur

Giuseppe, infinite grazie per la disponibilità. Sicuramente il supporto sarà utilissimo per comprendere meglio.

Grazie!

Lire plus
Posté le de Luciano F.
Roberto O.
Roberto O.
User

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.

Lire plus
Posté le de Roberto O.
Luciano F.
Luciano F.
User
Auteur
Roberto O.
Ciao Luciano, per quanto riguarda il mio, nessun codice tutto con il programma,  ...CUT...

Roberto...mille grazie! Tra un pò metto in pratica. Appena possibile scrivo un riscontro.

Lire plus
Posté le de Luciano F.