I Frame Design mit 3 Frames mittig?

von **Sweetlove** am 06.10.2008, 17:56

Hallöchen,
ich bin gerade am gestalten einer Webseite für jemanden.
Und zwar wollte sie das Design in Form eines I Frames. Nun schaut das aber arg blöd aus, wenn es nicht mittig ist. Darum hab ich eine 2te html Datei erstellt die das Ganze mittig setzt, das Problem dabei ist nur, dass die 3 Frames die da bei Lay.htm drin waren nun alle versetzt sind da sich das durch das Mittige verschoben hat. Gibt es da noch eine Möglichkeit?

Hier mal 2 Screenshots, damit man es halbwegs versteht was ich meine :rotwerd:

Bild

(Lay.htm) So sollte es aussehen, nur eben mittig

Bild

(Index.html) Und so schauts aus, wenn es mittig ist alles verschoben

Hoffentlich kann mir jemand von euch weiterhelfen?!

von **Eyecatcher** am 06.10.2008, 18:30

Poste bitte deinen Quellcode, so ist es schwer dir zu helfen!

von **Sweetlove** am 06.10.2008, 18:57

Hier von dem Lay.htm

Code: Alles auswählen: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Die Clickerjunkies</title> <style> body { scrollbar-face-color: #5A6EA6; scrollbar-highlight-color: #5A6EA6; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #5A6EA6; scrollbar-shadow-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #5A6EA6; </style> </head> <body bgcolor="#5A6EA6" topmargin="0" leftmargin="0"> <img border="1" src="layout_clickerjunkies.jpg" align="left" width="800" height="600"> <div id="Layer1" style="position: absolute; left: 5px; top: 140px;"> <iframe src="main.htm" name="main" width="598" height="460" frameborder=0 scrolling="yes" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;> </iframe> </div> <div id="Layer2" style="position: absolute; right: 484px; top: 247px;"> <iframe src="frameleft.htm" name="frameleft" width="160" height="308" frameborder=0 scrolling="yes" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;> </iframe> </div> <div id="Layer3" style="position: absolute; left: 4px; top: 102px;"> <iframe src="frameup.htm" name="frameup" width="658" height="35" frameborder=0 scrolling="no" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;> </iframe> </div> </body> </html>

Wo müsste ich was einfügen damit es mittig ist?

von **Eyecatcher** am 06.10.2008, 20:20

Puhh son schlechten Code habe ich noch nie(!) gesehen, aber naja...

Versuchs mal so:

Code: Alles auswählen: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Die Clickerjunkies</title> <style> body { scrollbar-face-color: #5A6EA6; scrollbar-highlight-color: #5A6EA6; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #5A6EA6; scrollbar-shadow-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #5A6EA6; padding:0px; margin:0px; } </style> </head> <body bgcolor="#5A6EA6" topmargin="0" leftmargin="0"> <div style="margin:0 auto; padding:0px; position:relative; width:1000px;">  <img border="1" src="layout_clickerjunkies.jpg" align="left" width="800" height="600"> <div id="Layer1" style="position: absolute; left: 5px; top: 140px;"> <iframe src="main.htm" name="main" width="598" height="460" frameborder="0" scrolling="yes" noresize style="border: 0px"> </iframe> </div> <div id="Layer2" style="position: absolute; right: 484px; top: 247px;"> <iframe src="frameleft.htm" name="frameleft" width="160" height="308" frameborder="0" scrolling="yes" noresize style="border: 0px;"> </iframe> </div> <div id="Layer3" style="position: absolute; left: 4px; top: 102px;"> <iframe src="frameup.htm" name="frameup" width="658" height="35" frameborder="0" scrolling="no" noresize style="border: 0px;"> </iframe> </div> </div> </body> </html>

An dieser Stelle

Code: Alles auswählen: <div style="margin:0 auto; padding:0px; position:relative; width:1000px;">

musst du bei width:1000px die tatsächliche Breite deiner Seite einstellen, damit alles klappt. Habe die entsprechene Zeile im Code kommentiert.

von **Ingo** am 06.10.2008, 20:32

Hi.

Ich hab's mal hierhin verschoben, weil es eine reine HTML-Frage ist :wink:

Dazu muss noch eine gültige DTD ins Dokument, ganz oben als erste Zeile, noch vor <html>:

Code: Alles auswählen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.DTD">

HTML 4.01 Trans. passt hier am ehesten. Die top/left/right-Werte der LayerX-Divs müssen
noch angepasst werden, besonders die 484px sind unzweckmäßig.

Gruß, Ingo

von **Sweetlove** am 06.10.2008, 21:50

Dankesehr.
Ich weiss dass Frontpage sch.. Codes hat, aber ich arbeite normalerweise nicht mit mehreren I Frames oder überhaupt I Frames, und diese Seite habe ich mit einem Tut gemacht. Ich werde das ganze auch noch mit CSS machen, und somit wird das Ganze etwas übersichtlicher und ist nimmer so besch..

Vielen lieben Dank für eure Hilfe!

Lg, Julia

von **Sweetlove** am 11.10.2008, 21:37

Nun hab ich wieder ein Problem..
Wenn ich den Verweis für's CSS oben einfüge vor: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.DTD"> dann wird es wieder nur links angezeigt.. Mach ich oben die Zeile mit dem Verweis aufs CSS weg, gehts..

Code: Alles auswählen: <link rel="stylesheet" href="style_home_ger.css" type="text/css" /> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.DTD"> <html> <head> <meta http-equiv="Content-Language" content="de"> <meta name="keywords" content="Clickerjunkies, Anna, Luna, Jive" /> <meta name="copyright" content="(C) Julia Jakob" /> <title> ~ c l i c k e r j u n k i e s . c o m ~ </title> <style> body { scrollbar-face-color: #819CEB; scrollbar-highlight-color: #819CEB; scrollbar-3dlight-color: #819CEB; scrollbar-darkshadow-color: #819CEB; scrollbar-shadow-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #819CEB; padding:0px; margin:0px; } </style> </head> <body bgcolor="#819CEB" topmargin="0" leftmargin="0"> <div style="margin:0 auto; padding:0px; position:relative; width:850px;"> <img border="0" src="../Bilder/layout_clickerjunkies.jpg" align="left" width="750" height="500"> <div id="Layer1" style="position: absolute; left: 5px; top: 140px;"> <iframe src="main.htm" name="main" width="298" height="160" frameborder="0" scrolling="yes" noresize style="border: 0px"> </iframe> </div> <div id="Layer3" style="position: absolute; left: 4px; top: 20px;"> <iframe src="frameup.htm" name="frameup" width="158" height="35" frameborder="0" scrolling="no" noresize style="border: 0px;"> </iframe> </div> </div> </body> </html>

LG, Julia

von **Eyecatcher** am 11.10.2008, 21:43

Die Zeile kommt auch da nicht hin, der Doctype sollte das erste sein

Ich zeig dir mal wie ein vernünftiger HTML 4.01 Transitional Head aussieht:

Code: Alles auswählen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Der Titel</title> <link href="style_home_ger.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>

von **Sweetlove** am 11.10.2008, 22:03

Aber so geht dann die Scrollleiste neben nicht mehr

Code: Alles auswählen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> ~ c l i c k e r j u n k i e s . c o m ~ </title> <link href="style_home_ger.css" rel="stylesheet" type="text/css"> </head> <body bgcolor="#819CEB" topmargin="0" leftmargin="0"> <div style="margin:0 auto; padding:0px; position:relative; width:850px;"> <img border="0" src="../Bilder/layout_clickerjunkies.jpg" align="left" width="750" height="500"> <div id="Layer1" style="position: absolute; left: 5px; top: 140px;"> <iframe src="main.htm" name="main" width="298" height="160" frameborder="0" scrolling="yes" noresize style="border: 0px"> </iframe> </div> <div id="Layer3" style="position: absolute; left: 4px; top: 20px;"> <iframe src="frameup.htm" name="frameup" width="158" height="35" frameborder="0" scrolling="no" noresize style="border: 0px;"> </iframe> </div> </div> </body> </html>

von **Ingo** am 11.10.2008, 22:47

Hi.

Welche Scrollleiste? Btw: Gibt's die Seite schon online? Das wäre eine Erleichterung.

Gruß, Ingo

von **Sweetlove** am 11.10.2008, 23:22

Ja ist schon teilweise online:

http://clickerjunkies.bplaced.net

Englisch oder Deutsch ist derzeit auf beidem das Selbe..

von **Eyecatcher** am 11.10.2008, 23:27

Was geht denn an dem Scrollbalken nicht?

von **Sweetlove** am 11.10.2008, 23:32

Er ist nich farbig..

von **Ingo** am 11.10.2008, 23:58

Hm. Bunte Scrollbalken sind eine IE-Erfindung und gehören nicht zum CSS-Standard.
Im IE6/7 und im Opera 9.60 ist der Scrollbalken schon farbig, der FF2/3 aber ignoriert
die scrollbar-Eigenschaften. Das ist auch einer der Nachteile bei iframes: die wenig
ansehnlichen Scrollbalken.

von **Sweetlove** am 12.10.2008, 00:08

Joa,
ich glaub ich werde es auch so lassen.
Sieht aber dann schon schöner aus im IE :mrgreen:

Naja, dankeschön mal wieder..

LG, Julia

I Frame Design mit 3 Frames mittig?

I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Re: I Frame Design mit 3 Frames mittig?

Wer ist online?