Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

vp-zero · 03-11-2008, 15:57

Servus,

nach stundenlangen Lesen und Testen hab ich jetzt aus Verzweiflung einen Thrad gestartet.

Wir positionieren unser Hintergrundbild via folgendem Code.
Das Hintergrundbild soll bei 50% Browsermitte starten und einen leichten Versatz von 196px haben.

HTML-Code:

 <script>
	ww=window.getWidth();
	ww=ww/2 +196;
	document.write("<div id=\"hg\" style=\"margin-left:-196px;width:"+ ww +"px;\"><img src=\"rot_hg.jpg\" width=\"100%\" height=\"100%\"></div>");
	</script>

Das funktioniert in Firefox und Co ohne Probleme, aber IE 6&7 stresst wie Sau. Wenn ich z.B. bei "ww" -196 und bei margin left: +196 mach, geht alles.

Warum?

Gruß, Markus.

**sonar** · 03-11-2008, 16:30

--> verschoben

Nightflyer · 03-11-2008, 17:22

Ich seh da nur ein Bild, aber kein Hintergrundbild..

vp-zero · 04-11-2008, 12:24

Hast schon recht,
wir nutzen das aber als Hintergrundbild.

Wenn ich per bei background-position auch ne Variable und top eingeben könnten, würde das ja auch gehn.

Gruß

Nightflyer · 04-11-2008, 12:35

Was ist denn window.getWidth()? Mootool?

vp-zero · 04-11-2008, 12:43

Dachte, das das Javascript ist.
Muss dazu sagen, das die Seite unser alter Programmierer geproggt hat, der aber leider hier nicht mehr arbeitet. Wir haben eh zum Großteil die Seite ent-scriptet, da man viel nicht brauchte.

Mootools hatte ich aber auch im Head gelesen ;-)

Meine Birne qualmt...

Gruß, Markus.

Nightflyer · 04-11-2008, 14:28

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
	<title>Sayphillion - The beauty of combat</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<style type="text/css">
		
		*{
			margin: 0;
			padding: 0;
		}

		html, body{
			width: 100%;
			height: 100%;

		}

		#container{
			margin-left: 196px;
			height: 100%;
		}

		#background_img{
			width: 100%;
			height: 100%;
		}

	</style>
</head>
<body>

	<div id="container">
		<img id="background_img" src="http://www.kapstadt.org/images/articles/wal/wal-g5.jpg" alt="testimg" />

	</div>


</body>
</html>

vp-zero · 04-11-2008, 14:47

Dank Dir schonmal für die Mühe.

Ich bekomm aber mit dem Code immer noch net hin,
das ich einen Versatz von der Mittelachse mit einrechnen soll.

Das Bild soll ja erst bei (50% Browserbreite +- Versatz) starten.
Und genau diese Variable muss ich ja vorher berechnen und einfügen.
Und da ist der Knackpunkt.

Probier schon die ganze Zeit mit document.write rum,
aber irgendwie wills net.

Gruß, Maggus.

vp-zero · 04-11-2008, 15:09

Hab jetzt mal deinen Code umgeschrieben,
was soweit zu 99% funzt...in Firefox

Der behinderte IE macht mir rechts nen weißen Balken hin.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Sayphillion - The beauty of combat</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<style type="text/css">
		
		*{
			margin: 0;
			padding: 0;
		}

		html, body{
			width: 100%;
			height: 100%;

		}
		
		#abstand{
			margin-left: 50%;
			height: 100%;
		}

		#container{
			margin-left: -100px;
			height: 100%;
		}

		#background_img{
			width: 100%;
			height: 100%;
		}

	</style>
</head>
<body>
	<div id="abstand">
		<div id="container">
			<img id="background_img" src="http://www.kapstadt.org/images/articles/wal/wal-g5.jpg" alt="testimg"; />
		</div>
	</div>
</body>
</html>

Gruß, Markus.

Nightflyer · 05-11-2008, 08:31

take
margin-left: -100px;
replace with
left: -100px;

vp-zero · 05-11-2008, 08:40

Nope, immer noch weißer Balken und der Versatz fällt weg.
Hab dir mal nen Screenshot angehängt.
Screenshot

Gruß, Maggus.

03-11-2008, 15:57	#1 (permalink)
vp-zero [NU-ROCKA] Registriert seit: Jul 2001 Ort: Mannheim Beiträge: 205	Positionierung von div via Javascript (IE) Servus, nach stundenlangen Lesen und Testen hab ich jetzt aus Verzweiflung einen Thrad gestartet. Wir positionieren unser Hintergrundbild via folgendem Code. Das Hintergrundbild soll bei 50% Browsermitte starten und einen leichten Versatz von 196px haben. HTML-Code: <script> ww=window.getWidth(); ww=ww/2 +196; document.write("<div id=\"hg\" style=\"margin-left:-196px;width:"+ ww +"px;\"><img src=\"rot_hg.jpg\" width=\"100%\" height=\"100%\"></div>"); </script> Das funktioniert in Firefox und Co ohne Probleme, aber IE 6&7 stresst wie Sau. Wenn ich z.B. bei "ww" -196 und bei margin left: +196 mach, geht alles. Warum? Gruß, Markus. __________________ www.liquid-artz.com

03-11-2008, 16:30	#2 (permalink)
sonar mod_rewrite Registriert seit: Feb 2003 Ort: München Beiträge: 15.621	--> verschoben __________________ RTFM Wie man Fragen richtig stellt. Achim Bindannmalweg Money makes the world go round, fear makes it turn much faster. (New Model Army)

03-11-2008, 17:22	#3 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Ich seh da nur ein Bild, aber kein Hintergrundbild.. __________________ (\__/) (='.'=) (")_(")

04-11-2008, 12:24	#4 (permalink)
vp-zero [NU-ROCKA] Registriert seit: Jul 2001 Ort: Mannheim Beiträge: 205	Hast schon recht, wir nutzen das aber als Hintergrundbild. Wenn ich per bei background-position auch ne Variable und top eingeben könnten, würde das ja auch gehn. Gruß __________________ www.liquid-artz.com

04-11-2008, 12:35	#5 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Was ist denn window.getWidth()? Mootool? __________________ (\__/) (='.'=) (")_(")

04-11-2008, 12:43	#6 (permalink)
vp-zero [NU-ROCKA] Registriert seit: Jul 2001 Ort: Mannheim Beiträge: 205	Dachte, das das Javascript ist. Muss dazu sagen, das die Seite unser alter Programmierer geproggt hat, der aber leider hier nicht mehr arbeitet. Wir haben eh zum Großteil die Seite ent-scriptet, da man viel nicht brauchte. Mootools hatte ich aber auch im Head gelesen ;-) Meine Birne qualmt... Gruß, Markus. __________________ www.liquid-artz.com

04-11-2008, 14:47	#8 (permalink)
vp-zero [NU-ROCKA] Registriert seit: Jul 2001 Ort: Mannheim Beiträge: 205	Dank Dir schonmal für die Mühe. Ich bekomm aber mit dem Code immer noch net hin, das ich einen Versatz von der Mittelachse mit einrechnen soll. Das Bild soll ja erst bei (50% Browserbreite +- Versatz) starten. Und genau diese Variable muss ich ja vorher berechnen und einfügen. Und da ist der Knackpunkt. Probier schon die ganze Zeit mit document.write rum, aber irgendwie wills net. Gruß, Maggus. __________________ www.liquid-artz.com

05-11-2008, 08:31	#10 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	take margin-left: -100px; replace with left: -100px; __________________ (\__/) (='.'=) (")_(")

05-11-2008, 08:40	#11 (permalink)
vp-zero [NU-ROCKA] Registriert seit: Jul 2001 Ort: Mannheim Beiträge: 205	Nope, immer noch weißer Balken und der Versatz fällt weg. Hab dir mal nen Screenshot angehängt. Screenshot Gruß, Maggus. __________________ www.liquid-artz.com

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln