Header-Schatten vor Container

[Claudi]

Hallo,

habe im Header einen weissen Hintergrund und einen Schatten rundum welcher natürlich nur nach unten sichtbar ist.
Gleich unterhalb vom Header beginnt der Container (auch mit einem weissen Hintergrund). Nun überlappt leider der Schatten nicht den Div Container.
Hat jemand eine Idee wie das klappen könnte?

#header {
    height:100px;
    background-color:#fff;
    -webkit-box-shadow:0 0 2px 1px #000;
    box-shadow:0 0 2px 1px #000;
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
    z-index:2 !important;
}

#container {
    width:670px;
    margin-right:auto;
    margin-left:auto;
    padding-left:310px;
    background-color:#fff;
    z-index:1 !important;
}

Stell ich den z-index beim #container auf -1 erziele ich zwar optisch mein gewünschtes Ergebnis, Links innerhalb des Containers sind aber nicht mehr clickbar.

Wäre nett, wenn jemand einen Lösungsansatz parat hat!

Danke, lg,
Claudi

[Thoni]

Hi,

kannst du die Elemente auseinanderrücken oder ist das Design dann hin?

Header:
margin-bottom:5px

oder Container:
margin-top:5px



Du kannst aber auch dem #header .inside den Schatten und ein margin-bottom geben.
#header bekommt dann die Hintergrundfarbe.


Gruß
Thoni

[Claudi]

Hallo Thoni,

danke für deine Antwort.
Leider hilft mir weder der erste noch der zweite Lösungsvorschlag weiter, weil:
A) es so gewollt ist, dass der Container direkt ab dem Header beginnt und
B) .inside schon für die Zentrierung (980px Breite) der Elemente im Header (Logo, Suchfeld, Schriftgrößenanpassung) dient.

So soll es aussehen, wenn es funktioniert:
headercontainer.gif

Das muss doch anders gehen ...

[MacKP]

Ohne da direkt gucken zu können kann man da nicht viel zu sagen... aber du könntest es auch mit einem Schatten für die untere Box, der innen liegt versuchen, wenns gar nicht anders geht.

Stichwort:

box-shadow: inset

Viele Grüße

[Claudi]

Danke!
Habe ein wenig mit den Werten gespielt - haut nun hin!

-webkit-box-shadow: inset 0 3px 2px -2px #000;
box-shadow: inset 0 3px 2px -2px #000;

Ich will ja den Schatten bloß oben haben, deshalb die Minuswerte