Zwei Bilder übereinander - nPage.de

tdc · #1 (**permalink**) 26.09.2009, 16:48

Hi!
Ich hab schon wieder ein Problem: Ich habe jetzt schon auf verschiedene Arten versucht, auf meinen Banner ein anderes Bild mit einem Schriftzug und transparentem Hintergrund draufzulegen. Soweit ich weiß, geht das mit z-index, doch irgendwie bekomme ich es nicht so richtig hin.
Hier erstmal der Quellcode:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Guild Wars Fa.npage</title>
<link rel="stylesheet" href="http://file1.npage.de/002550/79/html/grundeinstellungen.css" type="text/css">
<link rel="stylesheet" href="http://file1.npage.de/002550/79/html/divs.css" type="text/css">
</head>
<body>
<div id="hauptdiv">
 <div id="banner">
  <img src="http://file1.npage.de/002550/79/bilder/banner1.jpeg" width="100%" height="100%" style="repeat: no;" alt="banner1.jpeg">
  <div id="gwschriftzug">
   <img src="http://file1.npage.de/002550/79/bilder/gw_schriftzug.gif" width="100%" height="100%" style="repeat: no;" alt="Guild Wars">
  </div>
 </div>

</div>
<br>
</body>
</html>

Hier noch die externe Css-Datei: http://file1.npage.de/002550/79/html/divs.css

Zuerst einmal weiß ich nicht, ob ich den z-index direkt im Bild (also img-tag) oder bei dem div-container verwenden soll (im bsp. ist es in der externen css-Datei, also im div) und ich habe schon beides ausprobiert aber keine der beiden Möglichkeiten hat bei mir funktioniert.
Was mich aber am meißten wundert ist, dass der Schriftzug auf meiner Homepage (http://guildwarsfa.npage.de/) unter dem Text erscheint obwohl ich ihn im Header des Styles eingefügt habe (die leere Zeile im Quellcode weiter oben ist die Trennung zwischen Header und Footer des Styles).
Wie bekomme ich es jetzt hin dass der Schriftzug auf dem Bild erscheint und nicht darunter?

mfg tdc

edit: Okay, theoretischerweise könnte ich auch den Banner als Hintergrund des divs machen und dann den Schriftzug drüberlegen... ich probiers mal aus.

pixer · #2 (**permalink**) 26.09.2009, 16:55

Versuchs mal so:

Code:

<DIV style="LEFT: 20px; POSITION:     absolute; TOP: 75px">
    <TABLE WIDTH="500" cellpadding="0" cellspacing="0"     BORDER="1" bgcolor="lime">
    <TR>
    <TD HEIGHT="200" vALIGN="top">Diese     Tabelle liegt hinter der anderen.
    </TD>
    </TR>
    </TABLE>
    </DIV>

    <DIV style="LEFT: 200px; POSITION: absolute; TOP: 170px">
    <TABLE bgcolor="royalblue" WIDTH="200"     cellpadding="0" cellspacing="0" BORDER="1">
    <TR>
    <TD HEIGHT="130" vALIGN="top">Diese     Tabelle überschneidet sich mit der anderen.<BR>
    <BR>So kann man einfach Elemente ausrichten.
    </TD>
    </TR>
    </TABLE>
    </DIV>

tdc · #3 (**permalink**) 26.09.2009, 16:56

ok so müsste es auch gehen. Warte mal ich probiere es...

edit: Danke Pixer, aber mit meiner Lösung (Banner als div- Hintergrund) geht es auch.

fischelexikon · #4 (**permalink**) 26.09.2009, 18:03

und so geht es mit position: absolute;

HTML-Code:

</head>
<body>
<div
 style="width: 925px; height: 225px; margin-right: auto; margin-left: auto; background-image: url(http://file1.npage.de/002550/79/bilder/banner1.jpeg);"></div>
<br>
<br>
<img
 style="width: 434px; height: 118px; position: absolute; top: 36px; left: 51px;"
 alt="schriftzug"
 src="file:///C:/Dokumente%20und%20Einstellungen/Arno/Desktop/gw_schriftzug.gif"><br>
</body>
</html>