WebSite X5Help Center

 
Fabrizio L.
Fabrizio L.
User

Fascia colorata scrool  it

Autore: Fabrizio L.
Visite 2582, Followers 2, Condiviso 0  

Buongiorno.

Premetto che non sono un programmatore "web", abbiate pazienza,  ma sono curioso.

Ho un problema. Leggendo diversi post e scaricando alcuni template mi sono incuriosito su un aspetto : mantenere il menu fisso (e questo wbsite lo fa)  e scrollare le pagine sotto al menu , ma non solo , anche  sotto lo "sfondo dell'intestazione" lasciando lo "sfondo pagina" fermo.Ci sarei riuscito(vedi link : http://www.giochidifabry.it/test/ ). Il problema è che sotto al footer aggiunge pixel in più.

Il nero è stato creato dal div (copiato da un template creato con website) inserito prima della chiusura del tag head:

<div style="background-color:#000000; position: absolute;  left:0px; width:100%; top:200px; height:100%;  "></div>

Lo spazio nero in più si basa su quei 200px inseriti al "top" che vengono aggiunti in fondo ? Come faccio a far terminare il nero sempre all'altezza del footer indipendentemente dalla lunghezza della pagina ? Spero di essere stato chiaro.

Grazie e Buon Lavoro

Postato il
12 RISPOSTE - 1 CORRETTO
Mirko Boschetti
Mirko Boschetti
Moderator

i Div non andrebbero in Head, ma dopo l'apertura del tag body....

Leggi di più
Postato il da Mirko Boschetti
Fabrizio L.
Fabrizio L.
User
Autore

Ciao Mirco. Lo sposto dopo l'apertura del tag body e ripubblico il sito in test.

Leggi di più
Postato il da Fabrizio L.
Fabrizio L.
Fabrizio L.
User
Autore

Fatto

Leggi di più
Postato il da Fabrizio L.
 stesil  
 stesil  
User

Ciao Fabrizio,

non ho capito bene cosa tu voglia fare e forse ci sono altri metodi, comunque lo spazio di 200px sotto il footer è proprio dovuto all'altezza 100% assegnata al div che è posizionato a 200px dall'alto.

Puoi provare in questo modo:

height: calc(100% - 200px);

Leggi di più
Postato il da  stesil  
Fabrizio L.
Fabrizio L.
User
Autore

Ciao Stesil , grazie per il suggerimento.Domani sera provo e ti faccio sapere

Secondo te guardando il codice lo scrool del sito sotto al menu/head è corretto oppure si possono generare errori ? Quelle poche righe inserite le ho riprese da vari post letti su website answers. Certo che una funzionalità di questo tipo parametrizzata "dentro"  il software non sarebbe male.

Leggi di più
Postato il da Fabrizio L.
Fabrizio L.
Fabrizio L.
User
Autore

Per Stesil - Sicuramente ci sono altri metodi e sicuramente molto più puliti o sofisticati o che mi sfuggono sfuttando WebSite. Io volevo solo avere quella fascia nera (che poi diventerà bianca) che scrollasse insieme alla pagina sotto al menu e allo sfondo intestazione (fixed) , mantenendo  lo sfondo pagina fixed  il tutto con pagina di 960px... Niente più.

Leggi di più
Postato il da Fabrizio L.
 stesil  
 stesil  
User

Ho scritto "forse ci sono altri metodi" ma la tua soluzione è pulita, quindi, se il risultato ti soddisfa, non cercare altro.

L'unica cosa da considerare è che la funzione CSS calc() non è supportata dai vecchi browser (IE8 e precedenti). Potresti trascurare la cosa (io lo farei), del resto non crea problemi di fruibilità dei contenuti, ma solo un aspetto non conforme, ma chi usa ancora questi browser dovrebbe saperlo.

Se comunque tu volessi rendere il valore dell'altezza conforme in tutti browser, dovrai scrivere una funzioncina in javascript che calcola appunto l'altezza di quel div in modo dinamico ma, ripeto, secondo me non ne vale la pena.

Leggi di più
Postato il da  stesil  
Mirko Boschetti
Mirko Boschetti
Moderator

se vuoi solo una fascia, e non tutta la pagina nera, secondo me non dovrebbe essere cosi:

 height:100%;....ma dovresti inserire una misura esatta, es: height:300px;

Leggi di più
Postato il da Mirko Boschetti
Fabrizio L.
Fabrizio L.
User
Autore

Stesil Funziona con il height:calc(100% - 200px);  ---> (http://www.giochidifabry.it/test/). Non ho più i pixel sotto al footer. Ho aggiunto anche una immagine che aggiunge l'ombra nella parte bassa della striscia con i"bottoni" e che "scrolla" con la pagina. Spero che il codice inserito sia corretto.

Grazie

Leggi di più
Postato il da Fabrizio L.
Fabrizio L.
Fabrizio L.
User
Autore

Esportando il sito di test, purtroppo l'immagine aggiunta non si vede mentre in anteprima si. Ho fatto anche "ctrl F5" per ricaricare la pagina.

Sarebbe stato troppo bello.

Leggi di più
Postato il da Fabrizio L.
 stesil  
 stesil  
User

C'è solo uno slash di troppo nel percorso del file.

Così dovrebbe funzionare url("files/pipo2.png") oppure con il percorso assoluto.

Leggi di più
Postato il da  stesil  
Fabrizio L.
Fabrizio L.
User
Autore

Grazie Stesil, tutto OK.

Leggi di più
Postato il da Fabrizio L.