Visualizzazione risultati 1 fino 8 di 8

Discussione: Problema HEADER

  1. #1
    Data registrazione
    03-08-2020
    Messaggi
    0

    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 è connesso ora AlterVistiano
    Data registrazione
    14-02-2015
    Messaggi
    902

    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
    Data registrazione
    03-08-2020
    Messaggi
    0

    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 è connesso ora AlterVistiano
    Data registrazione
    14-02-2015
    Messaggi
    902

    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
    Data registrazione
    03-08-2020
    Messaggi
    0

    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 è connesso ora AlterVistiano
    Data registrazione
    14-02-2015
    Messaggi
    902

    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
    17,585

    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
    Data registrazione
    03-08-2020
    Messaggi
    0

    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
  •