Problema HEADER

[zetohsc]

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!

[GraphOGLRisorse]

Salve,
provi con queste modifiche:

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

[zetohsc]

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.

[GraphOGLRisorse]

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.

[zetohsc]

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.

[GraphOGLRisorse]

Provi in questo modo:

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

[alemoppo]

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!

[zetohsc]

@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 :)