Website im Browser zentrieren

R

RobnN

Aktives Mitglied
Thread Starter
Dabei seit
06.11.2004
Beiträge
373
Reaktionspunkte
1
Hallo!

Ich habe in GoLive eine Homepage erstellt, welche jedoch immer im Browser oben links ausgerichtet ist.

Nun möchte ich gerne, entsprechend der Größe des Browserfensters, dass die Website immer zentriert angezeigt wird.

Probiert habe ich es schon mit Framesets, aber dort wird die Website, die sich im mittleren Frame befindet, immer unten abgeschnitten oder ich erhalte keine Scrollleisten am rechten Rand des Browserfensters.

Ich wüsste zwar einen Weg, dies mit Tabellen zu regeln (wie z.B. hier: Beispiel ), allerdings ist mir das viel zu viel Arbeit.

Kennt jmd einen attraktiveren Weg, eine Darstellung wie bei der Beispielseite (siehe Link weiter oben) zu erreichen (d.h. sich automatisch an die Browserfenstergröße anpassender weißer Rand an allen vier Seiten der Website mit Scrollleiste, wenn der Websiteinhalt zu lang für das Browserfenster ist)???

Danke!
 
Zuletzt bearbeitet von einem Moderator:
Mach ne tabelle rundum.... das ist ganz einfach

<table cellspacing="0" cellpadding="0" align="center" width=100% height=100%>
<tr>
<td valign="middle">
<!-- DEIN HTML CODE -->
</td>
</tr>
</table>

Das ist die einfachste variante... Wenn du einzelne Seiten hast, und diese nicht ändern willst, mache ein iFrame und du bruachst nur 1 seite so zu machen ;)
 
Zuletzt bearbeitet:
Tja, wie das mit Tabellen geht, weiß ich wie gesagt ja. Allerdings möchte ich ungerne im GoLive-Quelltext rumwursten (habe ne Site mit vielen Ebenen, Layout-Raster usw.). Außerdem wäre mir eine globale Lösung, bei der ich nicht jedes einzelne HTML-Dokument bearbeiten muss, lieber.

Das mit dem iFrame is ansich keine schlechte Idee, nur leider kann man meines Erachtens die Höhe des iFrames nicht variabel lassen, so dass diese Möglichkeit nicht wirklich eine Lösung für mich darstellt.

Danke trotzdem! :)
 
Das Ding was Du suchst heist Centered Frameset,
ist eine kostenlose Erweiterung zu GoLive.

Gehe mal zu Adobe Studio über die Adobe-Site,
da findest Du für alle Adobe Produkte Erweiterungen
und noch viel mehr...

Gruß
Dirk
 
Also danke für den Tipp, allerdings bringt diese Erweiterung meiner Einschätzung nach auch nicht mehr, als wenn man mit ein paar Framesets rumspielt.

Ich hätte es halt gerne so, dass, wenn der Inhalt des mittleren Frames höher als das Browserfenster ist, ich eine "globale" Scrollleiste rechts bekomme, mit dem ich dann nicht nur den mittleren, sondern alle Frames scrolle.

Das geht aber glaube ich nur mit Tabellen. Das wiederum ist total aufwenig...

hmm...
 
Zuletzt bearbeitet:
Hi,

wenn ich dich richtig verstehe, willst du eine Tabellenzelle scrollbar machen, wie Frames? Dazu gibt es eine einfache Zeile Code, die du im Quelltext einfügen musst, eine andere Lösung kenne ich nicht.

Die Codezeile lautet:
<div style="width: 100%; height: 100%; overflow : auto;"></div>

Du musst sie einfach zwischen die <td> und </td> tags einfügen. Bei mehreren Seiten, die du in GoLive schon hast kannst du das vielleicht automatisch durch "Suchen & Ersetzen" erledigen. Kopier dir mal den Quelltext in eine Seite und überprüfe, ob das die Art ist, die du erreichen willst.

Salü,
mactrisha.

HTML: 
t<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<title>Willkommen bei Adobe GoLive 6</title>
	</head>

	<body bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
			<tr>
				<td align="center" valign="middle">
					<table width="642" border="0" cellspacing="0" cellpadding="0" height="503">
						<tr height="540">
							<td bgcolor="#ccff66" width="321" height="540"></td>
							<td bgcolor="#cccccc" width="321" height="540"><div style="width: 100%; height: 100%; overflow : auto;">
									das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt das ist mustertxt</div></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<p></p>
	</body>

</html>
 
Wie wär's mit nem CSS Container (classe) die einfach 50% von links und oben positioniert wird?
 
hey, danke für die vorschläge. habe mich wohl ziemlich schlecht ausgedrückt, deswegen hab ich mal ein kleines bild angehangen. das darauf abgebildete erreich man auf jeden fall mit tabellen, das weiß ich aus persönlicher erfahrung.


ich hab mein problem allerdings nochmal überdacht. im prinzip würde es mir schon helfen, wenn ich wüsste, wie ich den ganzen bis jetzt schon erstellten inhalt der seite (ebenen, layout-textrahmen,...) in eine tabelle verschoben bekomme.

alternativ dazu, kannst du, josh, mir das mit dem css-container (was ist ein container?) mal näher erklären. ;-)
 

Anhänge

  • bild.jpg
    bild.jpg
    10,1 KB · Aufrufe: 83
Zuletzt bearbeitet:
Übrigens kannst Du ja in jede Website, die das macht, was Du auch möchtest, in den Quelltext reingucken, um zu sehen, wie die das gemacht haben.

No.
 
Also, ein "Container" ist im prinzip eine Klasse.

Man defeniert also eine Klasse (z.B. .container {...}) dessen linke obere Ecke sich quasi 50% horizontal und 50% vertikal am Bildschirm befindet. Über weitere Kommandos verschiebt man dann die Ecke um die halbe Breite & Höhe wieder nach oben und erreicht so eine konstante Zentrierung auf dem Bildschirm.

Und eben diesen Container bzw. diese classe öffnet man dann vor der Site und schließt ihn danach.
<body>
<div class="container">
<... deine Homepage...>
</div>
</body>
 
Josh_AT schrieb:
Also, ein "Container" ist im prinzip eine Klasse.

Man defeniert also eine Klasse (z.B. .container {...}) dessen linke obere Ecke sich quasi 50% horizontal und 50% vertikal am Bildschirm befindet. Über weitere Kommandos verschiebt man dann die Ecke um die halbe Breite & Höhe wieder nach oben und erreicht so eine konstante Zentrierung auf dem Bildschirm.

Und eben diesen Container bzw. diese classe öffnet man dann vor der Site und schließt ihn danach.
<body>
<div class="container">
<... deine Homepage...>
</div>
</body>
Zum Vergrößern anklicken....

Hast nicht zufällig ne Seite mit sowas, bei der ich den Quelltext klauen kann, oder?
 
Wenn mir jetzt noch jmd den Quelltext einer css-datei hier postet, muss ich wirklich gar nichts mehr machen... (hehe) :)

PS: Hab es mal ausprobiert und für den Abstand links und oben testweise ein paar Ziffern eingegeben. Das Problem dabei ist, dass nur der Text verschoben wird.
Liegt wahrscheinlich daran, dass ich den Rest immer auf Ebenen verteilt habe, resultierend aus mangelnder Kenntnis des Programms...
 
Zuletzt bearbeitet:
Etwa sowas wie...

Code: 
.container {
  width:800px; /* Breite deiner Seite */
  position:absolute;
  margin-left:-400px; /* Hälfte der Breite der Seite */
  left:50%;
}

Weiß aber nicht wie das in GoLive mit Ebenen abläuft. Wenn die absolut positioniert werden bringt dir das alles nix.
 
SaC schrieb:
Etwa sowas wie...

Code: 
.container {
  width:800px; /* Breite deiner Seite */
  position:absolute;
  margin-left:-400px; /* Hälfte der Breite der Seite */
  left:50%;
}

Weiß aber nicht wie das in GoLive mit Ebenen abläuft. Wenn die absolut positioniert werden bringt dir das alles nix.
Zum Vergrößern anklicken....


Genauso ist es...darin liegt das Problem. :/

Aber danke für den Code...
 
RobnN schrieb:
Genauso ist es...darin liegt das Problem. :/
Zum Vergrößern anklicken....
In dem Fall müsstest du sämtliche deiner Ebenen von Hand neu Positionieren.
Und zwar nach demselben Schema wie in meinem Beispiel:

Code: 
position:absolute;
left:50%;
margin-left:-50; /* Abstand der Ebene von der Mitte des Fensters */

Hoffe das bringt dir was...
 
Nice!!!!

Hab deinen Code jetzt mal in meine css-Datei kopiert (hatte vorher nur Joshs erklärung falsch in die Tat umgesetzt) und siehe da:
Ich muss die Ebenen gar nicht alle seperat positionieren. Es ordnet sich alles schön dem Browserfenster entsprechend in der Mitte an!

Ich hab also endlich die Lösung, die ich gesucht habe.

Ein riesiges Dankeschön,vor allem an Josh und SaC!!! :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten