a position über div

qazwsx · 15.11.2009

Hallo!

Ich habe ein Hintergrund so eingefügt:

Code:

<div style="background-image:url(bg1.png); background-repeat:no-repeat; height:768px; widht:1024px; background-position:50%50%; background-attachment:scroll; vertical-align:middle"></div>

Es bleibt stets in der Mitte des Browser Fensters. Nun habe ich ein 2. Bild, das stets am linken unterem Eck des Hintergrundbildes angezeigt werden soll.

Bitte meinen zweiten Beitrag lesen!

Metalshoota · 16.11.2009

AW: a position über div

Kleine Frage: Was ist ein a-Container?
Poste mal den gesamten Code bitte

qazwsx · 16.11.2009

AW: a position über div

Metalshoota schrieb:
Kleine Frage: Was ist ein a-Container?
Poste mal den gesamten Code bitte

Sorry, habe mich falsch ausgedrückt. Ich will ein Bild exakt an der linke unteren Seite meines Hinturgrundbildes anzeigen.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript">
<!-- hide script from old browsers

//detect browser:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
else browserVer = "2";

//preload images:
if (browserVer == 1) {
a1 = new Image(404,240);
a1.src = "1.png";
a2 = new Image(404,240);
a2.src = "2.png";
}

//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
}}
//end hiding -->
</script>
</head>
<body>




<div style="background-image:url(bg1.png); background-repeat:no-repeat; height:768px; widht:1024px; background-position:50%50%; background-attachment:scroll; vertical-align:middle"></div>
<a title="Info" href="http://www.test.de/relaunch/info.html" onMouseOver="hiLite('a','a2','Your Comment Here')" onMouseOut="hiLite('a','a1','')" id="xxx"><img name="a" src="1.png" border=0 width=404px height=240px></a>

</body>
</html>

Code:

body
{
background-color:#000000;
}
#xxx {
z-index:4;
width : 404px;
height : 240px;
position: absolute;
top : 533px;
left : auto 50px;
}

Da mein BG Bild zentriert ist, bewegt es sich mit, wenn man die Größe des Browserfensters ändert.. Das geht auch mit meinen 2. Bild, jedoch nur, wenn ich es ebenfalls mit 50%50% zentriere. Dann ist es aber nicht an der linken unteren Ecke.

Danke für jegliche Hilfe!

qazwsx · 16.11.2009

AW: a position über div

Kann sonst jemand helfen?

Herr_D · 16.11.2009

AW: a position über div

Kommt noch mehr als das 2. Bild?

Ansonsten beschäftige dich mal mit

...morgen mehr... ich muß ins Bett:muede:

Dennis Kovarik · 16.11.2009

AW: a position über div

Metalshoota schrieb:
Kleine Frage: Was ist ein a-Container?
Poste mal den gesamten Code bitte

ich rate einfach mal ins blaue: das a steht für absolute.

qazwsx schrieb:
Kann sonst jemand helfen?

meinst du vielleicht ?
(beides grafiken s. quelltext)

grüße

qazwsx · 17.11.2009

AW: a position über div

dnstylz schrieb:
meinst du vielleicht ?
(beides grafiken s. quelltext)

grüße

Danke dir.

So mache ich es auch eig. immer, nur das 2 Bild wird mit einem javascript bei einem mouseover ausgetauscht und dient als Button. Bei dieser Methode funktioniert der JS natürlich nicht und der Link ist nicht nur auf dem Button anklickbar.

@Herr_D,

die Methode hatte ich früher auch auf einen Website Header angewandt. Nur das Problem in diesem Fall ist, dass bg1 zentriert ist und sich beim ändern der Browsergröße bewegt. Da kann man keine absoluten Angaben geben.

cebito · 17.11.2009

AW: a position über div

qazwsx schrieb:
@Herr_D,

die Methode hatte ich früher auch auf einen Website Header angewandt. Nur das Problem in diesem Fall ist, dass bg1 zentriert ist und sich beim ändern der Browsergröße bewegt. Da kann man keine absoluten Angaben geben.

Warum nicht? Du kannst deinen Button auch auf left:50% setzen und margin-left:***px.
***musst du natürlich ausrechnen, halbe Breite vom Hintergrundbild - Breite des Button, von oben gehts genauso...

Dennis Kovarik · 17.11.2009

AW: a position über div

qazwsx schrieb:
Danke dir.

So mache ich es auch eig. immer, nur das 2 Bild wird mit einem javascript bei einem mouseover ausgetauscht und dient als Button. Bei dieser Methode funktioniert der JS natürlich nicht und der Link ist nicht nur auf dem Button anklickbar.

muss es denn zwingend java sein?