Seitendarstellung macht Probleme!

BlackSavage · 4. Oktober 2005

Hallo!

Bin gerade dabei, meine Website neu zu gestalten. Vorher hatte ich bzw. hab ich noch ein phpBBplus Forum laufen. Da ich aber ein individuelles Webdesign wollte,
habe ich mich an die Arbeit gemacht ein eigenes Layout zu basteln. Die index.html habe ich auf mein Server geladen. Allerdings habe ich noch arge Probleme
bei der Seitendarstellung. Ich möchte, dass die Seite in jeder Bildschirmauflösung richtig dargestellt wird und nicht auf 1024x768 richtig und bei der nächsthöheren Auflösung hat man einen weißen Rand. Ich glaub, da muss was im Code der index.html verändert werden, aber was denn?? Könnt ihr mir da bitte helfen?! Komme so nicht weiter....

Vielen Dank!

P.S.: Ich habe mich auch schon im Internet seit zwei Tagen umgeschaut und auch anderswo Fragen gestellt. Aber bisher keine Antwort erhalten. Hoffe das hier irgendjemand eine Idee hat.

IRID1UM · 4. Oktober 2005

oje, es gibt so viele herangehensweisen, wie man eine website programmiert, da kann man nicht einfach sagen, du musst das so und so machen, dann funktioniert alles.
jede website ist individuell und einzigartig, manche leute basteln frames oder tabellen, manche arbeiten komplett mit flash, und einige seiten werden erst genau dann generiert, wenn sie der benutzer aufruft.
generell müsstest du deinem platz auf der website keine fixierten größen zuweisen, also etwa 500 pixel breite, sondern variable, also etwa so: teil x soll 20% vom bildschirm einnehmen und teil y 80%. oder du sagst, etwas soll 150 pixel breit sein und der rest ist so breit wie die restliche bildschirmbreite. das geht bei frames besonders gut, und bei tabellen eigentlich auch. dazu müsste man bei der höhen und breitenangabe statt eine fixe zahl, einen wert in % angeben, oder für die option, bei der ein element den restlichen platz ausfüllen soll, ist die größenangabe ein "*".
vielleicht kannst du ja mal präsentieren, um welches layout es sich handelt, indem du einen link zu deiner seite hier rein setzt.
mfg
IRID1UM

Mr. Snoot · 4. Oktober 2005

Du musst die Seite mit %-Angaben erstellen, und nicht mit festen Pixelgrößen. 100% ist die ganze Fensterbreite, egal wie breit das Fenster ist.

Wie machst du denn das Layout, mit Tabellen, CSS, ..?

BlackSavage · 4. Oktober 2005

Also ich habe ein Layout (zumindest bisher eine Seite davon, nämlich die index.html) mit Photoshop gemacht und anschließend gesliced. Dann in Dreamweaver geöffnet, das Ganze versucht zu zentrieren und per FTP-Client hochgeladen. Wie gesagt, es ist nicht das fertige Layout, da ich erstmal schauen wollte, ob ich es mit dem rohen Layout hinbekomme. Bevor ich mir die ganze Arbeit mache und DANN etwas nicht klappt. Muss dazu sagen, habe wirklich nicht so die Ahnung mit HTML.

Momentan ist es für die Auflösung 1024x768 zu groß, d.h. man hat einen lästigen Scrollbalken unten im Browserfenster. Und mit der Auflösung 1280x1024 passt es genau.

HTML:

<html>
<head>
<title>Layout LunaticPlanet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Layout LunaticPlanet.psd) -->
<img src="images/index.jpg" width="1374" height="1128" alt="">
<!-- End ImageReady Slices -->
</body>
</html>

Die index.html liegt momentan auf einem Testserver. HIER!

Wie ihr sehen könnt, nicht gerade Optimal die Seitengröße. Muss ich da generell beim Erstellen der psd-Datei eine bestimmte Größe einstellen oder im Nachhinhein? Denn ändere ich jetzt die Image Size in Photoshop, dann sieht alles irgendwie deformiert bzw. pixelig aus, warum auch immer. Wo muss ich das denn eingeben oder ändern, dass sich das Bild immer der Auflösung anpasst? Oder habe ich gänzlich etwas vergessen?!

Vielen Dank für Eure Hilfe!

BlackSavage

Mr. Snoot · 4. Oktober 2005

Oh, da siehts wohl schlecht aus. Hab zwar sowas mit Photoshop nie gemacht, aber dynamische Abmessungen wirst du da wohl nicht hinbekommen, da es ja Bilder in einem bestimmten Format sind.

IRID1UM · 4. Oktober 2005

aha!
das kannst du aber leicht anders machen
links und rechts vom eigentlichen inhalt ist ja nur hintergrund. das kannst du auch anders und wesentlich platzsparender machen, sodass das dynamisch anpassbar ist.
dazu müsstest du eine frameseite erstellen, und zwar eine, die drei mal vertikal geteilt ist. das müsste mit dem dreamweaver eigentlich gehen. diese frameseite ist im prinzip wie eine tabelle. in die mittlere spalte kommt der inhalt, und die beiden äußeren der hintergrund.
den hintergrund speicherst du aber am besten als ganz schmales bild, ein pixel breit reicht, da hintergründe sich ständig wiederholen. das ist recht sinnvoll, da er auf die art und weise schneller geladen wird.
damit sich die seite automatisch an die auflösung anpasst, musst du im frameset der mittleren spalte einen fixen wert geben, gerade so breit, dass der inhalt rein passt. die beiden äußeren spalten bekommen als breite den wert *, was soviel heißt wie, dass sie sich den rest vom monitor einteilen sollen.
das klingt jetzt einigermaßen verwirrend, aber wenn du dir das im dreamweaver anschaust, dann funktioniert das sicher.
mfg
IRID1UM

BlackSavage · 4. Oktober 2005

Hallo! Vielen Dank für die Antworten!

Ohja @ IRID1UM, für einen Anfänger wie mich klingt das sehr wohl verwirrend. Aber ich werde mein Bestes geben und mich da mal ransetzen. Wenn ich nicht weiterkomme, meld ich mich ja eh wieder

Achso und so wie du es sagst, müsste sich meine Website dann in jeder Auflösung richtig betrachten lassen?

Viele Grüße
BlackSavage

EDIT: Du sagst, links und rechts ist nur hintergrund, ja! Aber im oberen Bereich links und rechts ist noch ein kleiner Farbverlauf. Hast du dafür noch einen kleinen Trick, dass der ständig beibehalten wird oder sollte ich den weg machen, damit alles eins mit dem Hintergrund ist?

IRID1UM · 4. Oktober 2005

du musst nur einen schmalen streifen vom hintergrundbild abschneiden. also wenn es jetzt, sagen wir 500x600 pixel groß ist, dann schneidest du dir einen streifen raus, sodass das bild nur noch einen pixel breit und immer noch 600 hoch ist. im endeffekt hast du dann ein 1x600 pixel bild, das sich ständig wiederholt.
und seitenhintergründe kannst du direkt nach dem </head> tag einbauen, da wo der <body> tag beginnt:
<body background="hintergrund.jpg">
blah & content
und irgendwann ganz unten
</body>
wenn du das nach der methode machst, dann funktioniert die website für alle auflösungen, die den mittleren frame komplett anzeigen können. wenn also der mittlere frame mit dem inhalt 1000 pixel breit ist, dann ist 1024x768 sozusagen die minimum einstellung. machst du den mittelframe 770 pixel breit, dann können auch user mit einer desktopauflösung von 800x600 die seite einwandfrei anschauen. im endeffekt wird die seite selbst nicht skaliert, aber der rand passt sich an die bildschirmauflösung an. bei hohen auflösungen hast du deshalb auch viel rand
bei 800x600 hättest du dann gar keinen rand. aber diese auflösung wird eigentlich nur selten benutzt..
mfg
IRID1UM

BlackSavage · 4. Oktober 2005

Alles klar, ich probier das mal so und melde mich mit einem Feedback schnellstmöglich zurück

DANKE!

IRID1UM · 4. Oktober 2005

ach, mir ist noch was eingefallen..
bei hohen auflösungen würde sich das hintergrundbild wiederholen (also übereinander, was natürlich blöd aussieht), also könntest du das entweder ewig lang machen (so 1x1600) oder du teilst die beiden randframes horizontal (siehe bild).
dazu müsstest du nur eine horizontal geteilte frameseite erstellen und in der vertikal dreigeteilten frameseite für die äußeren beiden frames die neue horizontal geteilte seite als quelle angeben.
im oberen teil der horizontal geteilten seite gibst du den farbverlauf, und dem unteren teil gibst du einfach die farbe des hintergrundbildes unterhalb des verlaufes.
mfg
IRID1UM

ps: ich hab mal in der gepackten datei eine dummy seite eingepackt, damit du dir das anschauen kannst. der rest sollte einfach sein. ich hab das schnell mit frontpage erstellt, und die seitennamen so gelassen, wie FP sie erstellt hat, also nicht wundern.
doppelklick auf index.htm ruft die dreigeteilte seite auf, wobei neue_seite_1 in der mitte ist und neue_seite_3 jeweils am rand. n_s_3 ist selbst wieder eine frameseite, die den oberen teil für den farbverlauf aufruft (neue_seite_4) und den unteren für die solide farbe (5)
alles klar?

BlackSavage · 4. Oktober 2005

Alsoooo hab das mal jetzt so gemacht. Hier mal die Codes:

für den linken Frame:

HTML:

<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>

<body background="images/hintergrund.jpg">
</body>
</html>

für den mittleren Frame:

HTML:

<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<img src="images/index.jpg" width="1374" height="1128" alt="" />
</body>
</html>

Und für den rechten Frame:

HTML:

<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<img src="images/index.jpg" width="1374" height="1128" alt="" />
</body>
</html>

Das sieht dann so aus: http://blunatic.bl.ohost.de/

Mist, da hat etwas immernoch nicht ganz geklappt. Vielleicht liegt es ja daran, dass ich keine fixe Größe angegeben hab, aber wo mach ich das? Das mit dem schmalen Streifen Hintergrund hab ich auch schon verstanden. Aber irgendwas haut da noch nicht hin. Das mit dem Horizontalen werd ich dann machen, wenn das mit den 3 vertikalen hinhaut

Weißt du, was ich in den Codes falsch gemacht hab?

IRID1UM · 4. Oktober 2005

für die beiden äußeren frames brauchst du nur eine seite, die auf beiden äußeren frames angezeigt wird (siehe mein letzter post, das PS)
und irgendwie kann ich nichts sehen, wenn ich auf den link klicke?
achso, wenn du einem bild width (breite) und height (höhe) zuteilst, dann darf natürlich keiner der beiden werte 0 sein, sonst sieht man das bild nicht.
mfg
IRID1UM

BlackSavage · 4. Oktober 2005

Ehm so schaut das bei mir nicht aus LOL. Habe ganz genau eine Datei, nämlich die index.html und dann noch die image-dateien auf dem Server. Hab da keine mehreren Seiten. Sollte ich? So habe ich die Frames erstellt:

index.html geöffnet in Dreamweaver, dann auf Modifizieren gegangen und Frameset geklickt, dann Frame rechts und dann Frame links teilen gemacht. Falsch oder richtig? Vielleicht liegt ja schon da mein Problem?! Sorry, aber ich sag ja, in dem Gebiet bin ich absoluter Neuling.

Sieht jetzt so aus: Immerhin

Zeigt mir aber irgendwie rechts und links was seltsames an und in der Mitte gar nix.

Hier nochmal die Codes

linker und rechter Frame:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>

<frameset rows="*" cols="4,965">
  <frame src="Seite 1.html" />
  <frameset rows="*" cols="957,2">
    <frame src="../index.html" />
    <frame src="Seite 1.html" />
  </frameset>
</frameset>
<noframes><body>
</body>

Mittlerer Frame:

HTML:

<html>
<head>
<title>Layout LunaticPlanet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Layout LunaticPlanet.psd) -->
<img src="images/index.jpg" width="1000" height="1128" alt="">
<!-- End ImageReady Slices -->
</body>
</html>

So schauts aus: http://blunatic.bl.ohost.de/

Achja und dann bin ich im Dreamweaver auf alle Frames speichern gegangen und gespeichert hat er mir 3 Dateien (index.html, Seite 1.html und Seite 2.html)... das wärs was ich momentan an Infos hab.

Suche

Seitendarstellung macht Probleme!

BlackSavage

Commander

IRID1UM

Commodore

Mr. Snoot

Gast

BlackSavage

Commander

Mr. Snoot

Gast

IRID1UM

Commodore

BlackSavage

Commander

IRID1UM

Commodore

BlackSavage

Commander

IRID1UM

Commodore

Anhänge

BlackSavage

Commander

IRID1UM

Commodore

BlackSavage

Commander

Ähnliche Themen