ein bild über ein anderes

[littleHtml Freak]

hi
damit meine hp auch bei allen auflösungen gut aussieht habe ich meinen header in 2 bilder aufgeteilt.
eins ist der hintergrund und das andere ist die Schrift/Garfik
nun ist die frage wie krieg ich die übereinander?
css:

img.banner {
         border: 0px;
         width: 100%;
         height: 80px;
         z-index: 1;
         }
img.SWbanner {
         border: 0px;
         z-index: 2;
         position: relative;
         left: 20%;
         top: 5%;

         }

die horizontale ausrichtung stimmt aber das ganze bild(SWbanner) soll ca. 80 px nach oben
wie geht das?

 

[Mad Dog]

hmm du kannst entweder das top von SWbanner verringern, oder fuer top eine pixel angabe angeben.
ich denke mal ein banner fuer height einen pixelwert und fuer swbanner fuer top einen prozentwert zu benutzten ist nicht ratsam. probier mal verschiedene aufloesungen aus oder zoom mal ran. wenn ich mich nciht taeusche muesste sich das ganze ein bisschen verschieben

 

[littleHtml Freak]

ja wenn ich es in % angebe dann verschiebt sich nichts aber bei absoluten werten verändern sich die abstände nicht...
ich könnte natürlich versuchen für swbanner absolute werte zu finden die immer passen aber das wird glaub ich nicht möglich und ist nicht so elegant
ich habe auch schon über eine tabelle nachgedacht aber davon halt ich eigendlich nichts...
edit:
es ist so hab ich festgestellt:
left muss 20% sein
und top 10px; dann passt es in jeder auflösung perfekt
geht das?

 

[littleHtml Freak]

ich habe mal das lustige ratespiel gespielt und habe herausgefunden das das geht:

img.SWbanner {
         border: 0px;
         z-index: 2;
         position: relative;
         left: 20%;
         top: -75px;

         }

ob das valid ist ist eine andere frage aber es geht *zufrieden*
trotzdem danke
(fühl mich gerade toll weil überall vbei google stannd tabelle oder flash sei die einzige möglichkeit)

 

[hagent]

Du musst das Hintergrund-Headerbild als Background in deinem CSS definieren und nicht als img-Tag im HTML-Code.

Das geht so:

#header {
background: url('bg.gif');
}

 

[FirePanther]

geht mit position auch...
dann wird noch eine ebene erstellt und man arbeitet mit z-koordinaten
siehe auch hier:
www.the-coderz.de/Board/FirePanther/myscripts/action.php?a=preview&id=10 (quelltext)

die logos übereinander schafft man mit background z.B. nicht (mit background dann nur 2 stück)
cya

 

[Sphinx-Flash]

Negative Margins

Hallo little HTML-Freak,

es hätte eine ganz einfache Methode gegeben, Deinen ersten Code anzupassen. Negative margins.

Negative margins werden gerne zum layouten eingesetzt.

Um beispielsweise Dein zweites Bild um 80 pixel nach oben zu bekommen hättest Du einfach nur:

margin-top: -80px;

einfügen müssen.