Problem beim Positionieren des Banners

[lars96]

Hallo Leute,

ich versuche derzeit bei meiner Webseite den Banner zu positionieren. Leider verschiebt sich diese immer (wg. position:relative) über ein anderen div. Mit position:absolute habe ich es auch schon probiert, da bleibt das Bild dann oben links in der Ecke und background-position: center oder Ähnliches (ohne Pixelangabe -> will, dass die Webseite auf mehreren Bidschirmen läuft) bringt auch nix.

Ich habe es wie folgt gemacht: (#header = Graue Fläche oben; #banner = Bild)

#banner
{
    background-position: 50%;
    background-repeat: no-repeat;
    position: absolute;
    width: 928px;
    height: 148px;
    background-image: url(banner.png);
    z-index:1;
}

#header
{
    background: #6F655F;
    height: 270px;
    border-bottom: 1px solid #FFF;
}

Und:

<div id="banner"></div>
<div id="header">

Hier ist nochmal ein Screenshot, was mein Problem ist:
http://img6.imagebanana.com/img/is0sbj9t/page.png

Ich danke euch im Voraus für eure Hilfe .

lg

 

[technikfreack]

Also willst du das obere in den unteren reinschieben?

 

[lars96]

Genau, den Banner in das Stück vom grauen rein.

 

[technikfreack]

Also bei mir funktioniert das Problemlos...?! Mit position: absolute; kann man meist alles ganz genau auf einen Pixel positionieren..

 

[lars96]

Ja aber dann ist es eben nur für einen Bildschirm geeignet. Ich mein, wenn man ne Auflösung von 1366x irgendwas hat, sieht die Webseite super aus, und bei einer von 800x600 ist der banner wo ganz anders.

 

[fpvz]

Hallo Lars,
Generell kannst du einem Element mit margin einen Außenabstand geben, und zwar von allen 4 Richtungen aus (oben,rechts,unten,links).

mit margin: 0 auto zentrierst du z.B. das Element mittig, und zwar immer relativ zur Größe des Elternelements (also header).

Das Problem ist, das margin so ohne weiteres nicht auf absolute Elemente wirkt.

Genaueres kann man nicht wirklich sagen, hast du evtl einen Link zu einem Livebeispiel?
Oder zumindest nen Screenshoot, der Zeigt wie es ist, und wie es sein soll..