Supportnet / Forum / Webseiten/HTML

Hallo, ich habe folgendes Problem.. Ich möchte meine Webseite neugestalten und arbeite mit Ebenen über Dreamweaver. Die erste Ebene bildet den äußeren Rahmen der ganzen Webseite und ist über "align=center" zentriert, sodass der Benutzer, unabhängig von der Auflösung, diese Ebene immer in der Mitte des Bildschirms hat. Eine zweite ebene beinhaltet einen iframe, mit dem ich alle Inhalte lade und somit auf gewöhnliche HTML-Dateien zurückgreife.. Jetzt das Problem: Ich bekomme die zweite Ebene nicht innerhalb der ersten Ebene zentriert. Dh, der eigentliche Inhalt der Webseite wird immer unterschiedlich bzw. fix angezeigt.. Wie erreiche ich den gewünschten Effekt?

gute Problembeschreibung! Abhilfe: deinstalliere DW.

Deine eigentliche Frage zum Zentrieren eines IFrames innerhalb "einer Ebene" innerhalb "einer Ebene" lässt sich ohne Kenntnis dessen, was du schon an Quellcode hast, nicht beantworten. Allerdings erstellt DW ziemlich kaputten und unübersichtlichen Quellcode, so dass eine Fehleranalyse kompliziert ist.

Lesetipp: FAQ: Zentrieren mittels CSS

Hallo,

hier der Teil an Quellcode, der interessant sein dürfte:

<div id="Layer1" align="center" style="position: width:950px; height:586px; z-index:1; left: 5px; top: 5px;"><img src="hintergrund.jpg" width="900" height="586" border="0" usemap="#Map">
  <map name="Map">
    <area shape="rect" coords="106,3,153,47" href="/news/home.php" target="iframe">
    <area shape="rect" coords="217,6,298,48" href="haftung.htm" target="iframe">
    <area shape="rect" coords="300,4,399,48" href="impressum.htm" target="iframe">
    <area shape="rect" coords="520,3,615,48" href="/myguestbook/guestbook.php" target="iframe">
    <area shape="rect" coords="719,4,794,46" href="tuning.htm" target="iframe">   <area shape="rect" coords="619,4,714,47" href="/board" target="_blank">    <area shape="rect" coords="157,3,213,47" href="links.htm" target="iframe">
    <area shape="rect" coords="404,4,517,47" href="contact.php" target="iframe">
  </map>

  <div id="Layer2" style="position:absolute; width:865px; height:392px; z-index:2; left: 80px; top: 198px;">
<iframe name="iframe" width=100% height=100% NORESIZE scrolling=Yes frameborder=0 marginheight=0 marginwidth=0
	src="news/home.php"></iframe></div>
</div>

wir vergleichen:

align="center" style="position: width:950px; height:586px; z-index:1; left: 5px; top: 5px;"

und

style="position:absolute; width:865px; height:392px; z-index:2; left: 80px; top: 198px;"

das erste DIV ist horizontal zentriert mittels des veralteten align=center. Dann kommt ein kaputtes Stück CSS. Die Angaben zu position, left und top darin kann der Browser gar nicht mehr berücksichtigen, denn bei position fehlt ein Wert und left/top widersprechen align=center. Weg damit!

Das zweite DIV wird mit position:absolute aus dem Dokumentfluss genommen - damit orientiert es sich nicht mehr am umgebenden DIV sondern am Browserfenster. Wenn es innerhalb des ersten DIVs zentriert sein soll ist diese Angabe Unsinn. Weg damit, ebenso left und top. Nutze entweder die Angaben wie im Link in Antwort 1 oder hau das uralte align=center da mit rein.

Abstände nach oben machst du nicht mit top sondern mit margin-top, also der Angabe Abstand nach oben.
Und versuch DW klar zu machen, dass er nicht mit der

position

-Keule rumspielen soll, das dürfte jedesmal andere Ergebnisse als gewünscht liefern.

Oder deinstallier den Kram und schreib es gleich von Hand, das bisschen [code=http://de.selfhtml.org/index.htm]HTML/CSS lässt sich schneller aneignen als das DW-Handbuch. Und solche CSS-Fehler wie in DIV 1 zeigt dir übrigens die Fehlerkonsole im Firefox an.

sollte natürlich

das bisschen HTML/CSS lässt

lauten

Hallo,
Danke erst mal für deine Hilfe!
Ich bin jetzt einen Schritt weitergekommen.. Jedoch verstehe ich unter o.g. Link das mit dem negativen Außenabstand nicht und zweitens zeigt der Browser die Ebene nicht an bzw. liegt sie auch nicht zentriert im Mutter-Container..

Noch eine weitere Frage.. Kann ich den IFrame bzw das zweite Layer indem der iframe ist, feste Positionen im Muttercontainer geben?


Hier mein aktueller Quellcode:

<style type="text/css">
#Layer {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 824px;
	height   : 400px;
	margin-top: -412px;
	margin-left: -2004px;
	border:1px solid #000000;
	padding:10px;
	overflow:auto;
}
-->
</style>
</head>

<body bgcolor="#717171">
<div id="Layer1" align="center" width:950px; height:586px; z-index:1;"><img src="hintergrund.jpg" width="900" height="586" border="0" usemap="#Map">
  <map name="Map">
    <area shape="rect" coords="106,3,153,47" href="/news/home.php" target="iframe">
    <area shape="rect" coords="217,6,298,48" href="haftung.htm" target="iframe">
    <area shape="rect" coords="300,4,399,48" href="impressum.htm" target="iframe">
    <area shape="rect" coords="520,3,615,48" href="/myguestbook/guestbook.php" target="iframe">
    <area shape="rect" coords="719,4,794,46" href="tuning.htm" target="iframe">
    <area shape="rect" coords="619,4,714,47" href="/board" target="_blank">
    <area shape="rect" coords="157,3,213,47" href="links.htm" target="iframe">
    <area shape="rect" coords="404,4,517,47" href="contact.php" target="iframe">
  </map>
</div>
 <div id="Layer"><iframe name="iframe" width=100% height=100% NORESIZE scrolling=Yes frameborder=0 marginheight=0 marginwidth=0 src="daten.htm"></iframe></div>

indem du

position

verwendest hebst du die Beziehung zwischen layer und layer1 auf. position ist eine mächtige CSS-Eigenschaft, von deren Gebrauch ich Anfängern nur abraten kann. Zumal ich hier keinen Sinn für ihren Einsatz sehe.

bei
margin-top: -412px;
margin-left: -2004px;
und
position:absolute
würde es mich wundern, wenn da was angezeigt wird. Rechne mal aus wo dein DIV jetzt liegt!
Nimm mal für den Anfang nur das erste Beispiel aus dem verlinkten FAQ. Und bloß nicht die version

position:absolute

(sorry, hatte übersehen, dass sowas da auch vorkommt)

Jetzt hab ich ein neues Problem..

Ich nutze im ersten Layer ein Hintergrundbild auf dem ich über Maps links zu den Unterseiten setze, die dann im iframe angezeigt werden.
Solange das hintergrundbild eingefügt ist, ist der zweite Layer unter dem Hintergrundbild. Der zweite Layer soll auf dem hintergrundbild sein, da dort der Inhalt angezeigt werden soll..

Einfacher wäre es nach meiner logik (die ja nicht richtig sein muss), wenn das zweite Layer auf dem ersten liegt (auf dem Hintergrundbild) und dann im ersten Layer einen festen Platz hat und sich somit nur zentral mit dem ersten ausrichtet.

Ist das Möglich?

in deinem Quellcode taucht kein Hintergrundbild auf, sondern eine per img eingebundene Grafik mit einer Imagemap.
nein, das wäre es nicht - du verkomplizierst den Code unnötig (was er allerdings mit Imagemaps und IFrame sowieso schon ist - von Barrierefreiheit erst gar nicht zu reden)

mit DW-Quellcode kaum, du brauchst dafür neben soliden HTML- und CSS-Kenntnissen nämlich auch Code, der die Browser nicht in den Quirksmodus (Browser: ich rate mal, was ich mit dem Quellcode machen soll) versetzt.

• buttons im dreamweaver
• dreamweaver 8 unter suse 10.2
• dreamweaver vorlagen gesucht
• Dreamweaver MX 2004
• Welches kostenlose Programm ist wie Dreamweaver?