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

Jaro_E · 14-11-2010, 21:09

Hallo,

so sollte es aussehen:

der fehlerhafte Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cotisuelto Smrz</title>
</head>

<body  background="Teaser/TeaserBG.png">

<div style=" position:relative; width:804; height:504; margin:-292px 0px 0px -404px; top: 50%; left: 50%; ">
	
    <img src="Teaser/Teaser.png" width="804" height="504">
    <br>
	</div style=" position:static; min-width=404; max-height=80; top:504 left:0"> 
    	<iframe src=			"http://www.facebook.com/plugins/like.php?href=www.eiermann-design.de&amp;
layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;
colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; 
width:400px; height:80px;" allowTransparency="true">
        </iframe></div>
	</div>

</body>

</body>
</html>

wenn ich den untergeordneten DIV-Tag weglasse, funktioniert die vertikale und horizontale Zentrierung, füge ich den untergeordnete dazu, verrutscht das Bild weit nach oben und der iframe rückt an den linken Bildrand, verhält sich also nicht so, als wäre er Teil des übergeordneten DIVs.

Nightflyer · 15-11-2010, 06:22

Weil er es auch nicht ist?

Code:

</div [.....]

dir ist da ein Slash reingerutscht

Jaro_E · 15-11-2010, 09:32

Ah vielen Dank, immer diese banalst-Fehler

So, der linke Rand des i-Frames stimmt, aber vieles stimmt immer noch nicht.

Die Zentrierung des übergeordneten divs wird total zerhauen, was wohl an seiner seit der Einfügung des iFrames überaus gewaltigen Größe liegt, obwohl ich das div, in das der iFrame eingebettet ist mit max-width begrenzt habe. (Ich habe den div mal mit eigener BGColor markiert.) Obwohl das div jetzt außerordentlich breit ist, erscheint das Bild zentriert: Ursprünglich zentriert wurde ja das übergeordnete Div mit angenommener Bildbreite. Da das jetzt größer geworden ist, müsste das eigentlich jetzt irgendwo ganz anders sitzen. Und in y-Richtung stimmt auch gar nichts. Und der IFrame sitzt leider auch nicht zentiret innerhalb seines div´s.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cotisuelto Smrz</title>
</head>

<body  background="Teaser/TeaserBG.png">

<div style="  background-color:#000000; position:relative; width:804; height:504; margin:-292px 0px 0px -404px; top: 50%; left: 50%; " >
	
    <img src="Teaser/Teaser.png" width="804" height="504">
    <br>
	<div style="  position:static; min-width=404; max-height=80; top:504 left:0"> 
    	
        <iframe align="centre" src=			
"http://www.facebook.com/plugins/like.php?
href=www.eiermann-design.de&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;
font=arial&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:80px;" allowTransparency="true">
        </iframe>
	</div>

</body>


</html>

Nightflyer · 15-11-2010, 11:21

take

Code:

<div style="background-color:#000000; position:relative; width:804; height:504; margin:-292px 0px 0px -404px; top: 50%; left: 50%; " >

replace with

Code:

<div style="background-color:#000000; position:absolute; width:804; height:504; top: 50%; left: 50%; margin-left: -402px; margin-top: -252px " >

Jaro_E · 15-11-2010, 11:57

sehr schön, das funktioniert jetzt!!

Nach der gleichen Art und Weise habe ich jetzt versucht, den iFrame nochmal in ein extra div, das genauso breit ist, zu packen, und dieses dann mittels left:50& und marginleft:-100px zu verschieben. Klappt aber leider nicht.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cotisuelto Smrz</title>
</head>

<body  background="Teaser/TeaserBG.png">

<div style="position:absolute; width:804; height:504; top: 50%; left: 50%; margin-left: -402px; margin-top: -252px " >

	<img src="Teaser/Teaser.png" width="804" height="504">
    <br>
	<div style="  position:static; min-width:404; max-height:80; top:504 left:0"> 
    	<div style=" position:static; width:200; top: 0px; left: 50%; margin-left: -100px; margin-top: 0px " >
        <iframe align="center" src=			"http://www.facebook.com/plugins/like.php?href=www.eiermann-design.de&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:80px;" allowTransparency="true">
        </iframe>
        </div>
	</div>

</body>


</html>

Nightflyer · 15-11-2010, 12:08

absolut positionieren, nicht statisch oder gar relativ!!! Den DIV drumrum kannst du dann von mir aus statisch positionieren

Jaro_E · 15-11-2010, 12:13

Hab die Fehlerquelle mittels bgcolor gefunden, de Lösung allerdings noch nicht: Das zweite div von oben (hierarchisch) hat nicht die gewünschte Breite von 404px, sondern übernimmt die Breite des oberen Divs.
Hab es schon mit max-width: width: und min-width: durchprobiert, keine Unterschiede.

Nightflyer · 15-11-2010, 12:26

Höhen- und Breitenangaben im Style(-sheet) ohne Einheit (px,%,etc.) werden IGNORIERT!!

Nightflyer · 15-11-2010, 12:41

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>test</title>

	<style type="text/css">

		

	</style>
</head>
<body>
	<div style="position:absolute; width:804px; height:504px; top: 50%; left: 50%; margin-left: -402px; margin-top: -252px; border:1px solid blue; " >

		<img src="Teaser/Teaser.png" width="804" height="504">
    		<br />
		<div style="position:static; width:404px; max-height:80px; top:504px left:0; border:1px solid red;"> 
    			<div style="position:relative; width:200px; height:80px; margin: auto;border:1px solid green;">
        		<iframe src="http://www.facebook.com/plugins/like.php?href=www.eiermann-design.de&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="width:200px; height:80px;" allowTransparency="true">
        		</iframe>
        		</div>
		</div>
	</div>
</body>
</html>

Jaro_E · 15-11-2010, 12:41

Relative ersetzt durch absolute, jetzt gibt es das Problem, dass der zweite div gar nicht zu exisitieren scheint. Die Position des iFrames ist um 100px links vom linken Bildrand des obersten divs, d.h.er wendet margin-left:-100px; an jedoch nicht left:50%;

Jaro_E · 15-11-2010, 12:44

Ah perfekt!! Wie hast du es geschafft, dass der innerste div/iFrame zentriert am oberen sitzt?

Nightflyer · 15-11-2010, 13:30

Das macht position:relative;margin:auto;

15-11-2010, 06:22	#2 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.979	Weil er es auch nicht ist? Code: </div [.....] dir ist da ein Slash reingerutscht __________________ (\__/) (='.'=) (")_(")

15-11-2010, 12:08	#6 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.979	absolut positionieren, nicht statisch oder gar relativ!!! Den DIV drumrum kannst du dann von mir aus statisch positionieren __________________ (\__/) (='.'=) (")_(")

15-11-2010, 12:26	#8 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.979	Höhen- und Breitenangaben im Style(-sheet) ohne Einheit (px,%,etc.) werden IGNORIERT!! __________________ (\__/) (='.'=) (")_(")

15-11-2010, 13:30	#12 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.979	Das macht position:relative;margin:auto; __________________ (\__/) (='.'=) (")_(")

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

15-11-2010, 12:13	#7 (permalink)
Jaro_E Neuer User Registriert seit: Sep 2010 Beiträge: 112	Hab die Fehlerquelle mittels bgcolor gefunden, de Lösung allerdings noch nicht: Das zweite div von oben (hierarchisch) hat nicht die gewünschte Breite von 404px, sondern übernimmt die Breite des oberen Divs. Hab es schon mit max-width: width: und min-width: durchprobiert, keine Unterschiede.

15-11-2010, 12:41	#10 (permalink)
Jaro_E Neuer User Registriert seit: Sep 2010 Beiträge: 112	Relative ersetzt durch absolute, jetzt gibt es das Problem, dass der zweite div gar nicht zu exisitieren scheint. Die Position des iFrames ist um 100px links vom linken Bildrand des obersten divs, d.h.er wendet margin-left:-100px; an jedoch nicht left:50%;

15-11-2010, 12:44	#11 (permalink)
Jaro_E Neuer User Registriert seit: Sep 2010 Beiträge: 112	Ah perfekt!! Wie hast du es geschafft, dass der innerste div/iFrame zentriert am oberen sitzt?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
probleme mit verschachtelten progressbar komp. beim dyn. laden von externen swf	sueniii	Komponenten und SmartClips	2	10-12-2007 12:22
probleme mit verschachtelten progressbar komp. beim dyn. laden von externen swf	sueniii	Komponenten und SmartClips	1	10-12-2007 07:20
probleme mit verschachtelten for-schleifen	offroadkohler	ActionScript 1	5	28-01-2006 19:38
Mal wieder Probleme mit den UI Elementen	Raptor 2101	Flash MX 2004	0	14-07-2005 10:29
ausrichtung von elementen	method5	Flash 4 und Flash 5	9	21-07-2001 16:07