Visualizzazione risultati 1 fino 8 di 8

Discussione: Problema HEADER

  1. #1
    zetohsc non è connesso Neofita
    Data registrazione
    03-08-2020
    Messaggi
    5

    Predefinito Problema HEADER

    Hola a tutti, colgo l'occasione per salutarvi essendo questo il mio primo messaggio nel forum.
    - COMUNQUE -
    Ho un problema con l'header (o con la parte centrale, dipende dal modo in cui agire).
    Praticamente ho l'header con un'immagine e sotto c'è del contenuto con altre immagini.
    Riesco a fixare l'immagine dell'header ma si sovrappone al contenuto sottostante.
    Inoltre l'header non ha uno sfondo (lo sfondo è uno solo per tutta la/e pagina/e), per cui vorrei renderlo come una sorta di blocco con sfondo invisibile sotto il quale far scorrere tutto.
    _________________________
    IL CODICE IN CSS DELLA DANNATA PAGINA INCRIMINATA:

    (la parte relativa a header article e footer, se vi serve altro dite pure)

    /*HEADER*/
    .header {
    position:fixed;
    top:0;
    left:0;
    width:100%;}

    /*ARTICLE*/
    .article{
    position:center;
    top:100;
    bottom:100;}

    /*FOOTER*/
    .footer {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    }
    ______________________________
    qua la pagina: http://zetohsc.altervista.org/zetoapplemusic.html
    ______________________________

    GRAZIE IN ANTICIPO!

  2. #2
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    3,980

    Predefinito

    Salve,
    provi con queste modifiche:
    Codice:
    /*HEADER*/
    .header {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding:50}
    
    /*ARTICLE*/
    .article{
    position:center;
    margin-top:350px;
    top:100px;
    bottom:100px;}
    Cordiali saluti.

  3. #3
    zetohsc non è connesso Neofita
    Data registrazione
    03-08-2020
    Messaggi
    5

    Predefinito

    perfetto, solamente l'header l'ho messo in fixed per avere quell'effetto che deideravo.
    adesso l'unico problema rimane far scomparire il tutto quando passa sotto. suppongo che "mi divertirò".
    comunque grazie, lei è un fico!
    Saluti cordiali.

  4. #4
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    3,980

    Predefinito

    Nel suo caso, per far somparire i contenuti della pagina sotto l'immagine che fa da titolo, se essa resta col margine superiore al limite della pagina, può semplicemente aggiungere "background: #ffffff;" nella classe header.

    Cordiali saluti.
    Ultima modifica di GraphOGLRisorse : 08-08-2020 alle ore 17.55.54

  5. #5
    zetohsc non è connesso Neofita
    Data registrazione
    03-08-2020
    Messaggi
    5

    Predefinito

    il problema è che vorrei lasciare lo sfondo trasparente all'immagine dell'header, in quanto lo sfondo è uno per tutta/e la/e pagina/e.

    vorrei stabilire una sorta di linea invisibile oltre cui le cose scompaiono, in modo che l'header si mangi la pagina scorrendo verso il basso.

  6. #6
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    3,980

    Predefinito

    Provi in questo modo:
    Codice:
    /*HEADER*/ 
    .header {
    position:fixed;
    z-index: 9; 
    top:0;
    left:0;
    width:100%;
    padding:50}
    
    // aggiunto
    
    .dissolvenza{
    position:fixed;
    width: 100%;
    height: 500px;
    margin-left:-200px;
    margin-top:-400px;
    background: -webkit-linear-gradient(bottom, rgba(255,255,255, 0),  rgba(255, 255, 255, 1) 45%); 
    background:    -moz-linear-gradient(bottom, rgba(255,255,255, 0),  rgba(255, 255, 255, 1) 45%);
    background:     -ms-linear-gradient(bottom, rgba(255,255,255, 0),  rgba(255, 255, 255, 1) 45%);
    background:      -o-linear-gradient(bottom, rgba(255,255,255, 0),  rgba(255, 255, 255, 1) 45%);
    background:         linear-gradient(bottom, rgba(255,255,255, 0),  rgba(255, 255, 255, 1) 45%);
    
    /mettere dopo l'header
    <div class="dissolvenza"></div>
    Cordiali saluti.

  7. #7
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,064

    Predefinito

    Citazione Originalmente inviato da zetohsc Visualizza messaggio
    vorrei stabilire una sorta di linea invisibile oltre cui le cose scompaiono, in modo che l'header si mangi la pagina scorrendo verso il basso.
    Non ho approfondito né guardato il codice, ma una cosa del genere potresti farla semplicemente giocando con z-index, ovvero impostando un valore di z-index all'header più alto degli altri elementi.

    Ciao!

  8. #8
    zetohsc non è connesso Neofita
    Data registrazione
    03-08-2020
    Messaggi
    5

    Predefinito

    @graph:
    non funziona bene, mi sminchia un po' il tutto ma grazie comunque perché mi hai dato un ottimo spunto!
    _____
    @alemoppo: mi sono letto un po' di cose sulla proprietà z-index, molto fica, ma nel mio caso non varia le cose. probabilmente devo usarla nel modo giusto cobinata ad altro.
    _____
    per adesso lascerò il sito con una visualizzazione "classica", quando migliorerò le skills sull'argomento ci rimetterò mano.
    VI RINGRAZIO PER L'AIUTO DATOMI :)

Tags for this Thread

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •