Doppiamente fluido

[JtothaX]

Ragazzi ho un problemino con un paio di div. Servono a costruire la testata del sito.
Un primo, più esterno, che mi serve come fascia da estendere all'infinito come sfondo: header id="testata"
Il secondo, interno alla fascia: div id="contieni-slider"
Trattasi di sito responsive, quindi il contieni-slider deve gradualmente restringersi (max-width: 940px) fino ad un fissato breakpoint in cui lo farò semplicemente sparire insieme a tutta la testata del sito. Sono riuscito a farlo restringere. Il problema è che arriva ad un certo punto da essere piccolo per rientrare nella fascia.

Questa non riesco a renderla fluida così che entrambi header e div si restringano mantenendo il dislivello mostrato in figura, che altro non è che quello che poi si vede col sito desktop a larghezza estesa massima di 940px.

Come caspio si gestisce sta situazione?
100%, auto, sto provendo in lungo e in largo ma ancora non sono giunto a destinazione.



Grazie come sempre a tutti.
( -- Prima che magari qualcuno me lo chieda: sì, ho gestito il sito di Andrea Diprè fino a 10 giorni fa in cui sono stato scaricato e rimpiazzato senza nemmeno saperlo. Sparito del tutto lui e non ho avuto alcuna buona uscita nemmeno verbale. Amen. Fine dell'inciso. Ahahahah -- )

 

[JtothaX]

Okay, aggiornamento.
Sono riuscito a risolvere il discorso della testata fluida.
La fascia nera dietro prende queste regole qui e si adatta come volevo appunto.

header#testata {
	height: auto;
    max-height: 390px;
    padding-top: 35px;
    width: 100%;
	background: black;
	[B]margin-bottom: 85px;[/B]
}

Il margine per separare tutto questo ambaradan dal successivo elemento h2 come lo devo impostare?
Cioè h2 è il primo elemento, poi di seguito c'è tutto il resto della homepage. Volevo si regolasse in modo tale da fluidificarne la distanza, mantenerla costante quando ridimensiono la finestra del browser/provo le 2 media queries impostate.

 

[JtothaX]

Ho provato anche a staccare i due componenti, mettendo il contenitore dello slider fuori (a livello di codice) dalla fascia ma sembra ancora non funzionare.

Any suggest?

 

[JtothaX]

Refresho.
Ancora non ne sono venuto fuori.
L'unica opzione sembra dover mettere lo slider nella fascia, solo che così mi viene meno l'effetto di, diciamo così, dislivello che volevo ottenere fra i due. Devo proprio piegarmi al codice a discapito della grafica?

 

[criric]

Ciao, prova questo

<style>
    html body {
        text-align:center;
    }
    .header {
        height:120px;
        background-color: black;
    }
    .immagine {
        width: 96%;
        margin:auto;
        height:120px;
        background-color: orange;
        margin-top:-100px;
        margin-bottom:20px;
    }
    .corpo {
        height:500px;
        background-color: black;
    }
</style>
<div class="header"></div>
<div class="immagine"></div>
<div class="corpo"></div>

 

[JtothaX]

Non posso usare misure fisse in px per il margine perché finirebbe con il rimanere invariato anche quando il viewport si ridimensiona. Il margin-bottom deve adattarsi. Mi sa che devo rivedere alcune cose da principio...