Zurück   Flashforum > Alternative Technologien > HTML und CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 14-11-2010, 21:09   #1 (permalink)
Neuer User
 
Registriert seit: Sep 2010
Beiträge: 112
Probleme mit verschachtelten div-Elementen

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.

Geändert von Jaro_E (14-11-2010 um 21:13 Uhr)
Jaro_E ist offline   Mit Zitat antworten
Alt 15-11-2010, 06:22   #2 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
Weil er es auch nicht ist?

Code:
</div [.....]
dir ist da ein Slash reingerutscht
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 15-11-2010, 09:32   #3 (permalink)
Neuer User
 
Registriert seit: Sep 2010
Beiträge: 112
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>

Geändert von Jaro_E (15-11-2010 um 09:37 Uhr)
Jaro_E ist offline   Mit Zitat antworten
Alt 15-11-2010, 11:21   #4 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
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 " >
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 15-11-2010, 11:57   #5 (permalink)
Neuer User
 
Registriert seit: Sep 2010
Beiträge: 112
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>
Jaro_E ist offline   Mit Zitat antworten
Alt 15-11-2010, 12:08   #6 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
absolut positionieren, nicht statisch oder gar relativ!!! Den DIV drumrum kannst du dann von mir aus statisch positionieren
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 15-11-2010, 12:13   #7 (permalink)
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.
Jaro_E ist offline   Mit Zitat antworten
Alt 15-11-2010, 12:26   #8 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
Höhen- und Breitenangaben im Style(-sheet) ohne Einheit (px,%,etc.) werden IGNORIERT!!
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 15-11-2010, 12:41   #9 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
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>
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 15-11-2010, 12:41   #10 (permalink)
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%;
Jaro_E ist offline   Mit Zitat antworten
Alt 15-11-2010, 12:44   #11 (permalink)
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?
Jaro_E ist offline   Mit Zitat antworten
Alt 15-11-2010, 13:30   #12 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
Das macht position:relative;margin:auto;
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Antwort

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind an
Pingbacks sind an
Refbacks sind an


Ä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


Alle Zeitangaben in WEZ +1. Es ist jetzt 00:15 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele