Website im Browser zentrieren

Dieses Thema im Forum "Web-Editoren" wurde erstellt von RobnN, 31.01.2005.

  1. RobnN

    RobnN Thread Starter MacUser Mitglied

    Beiträge:
    360
    Zustimmungen:
    1
    MacUser seit:
    06.11.2004
    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 von einem Moderator bearbeitet: 13.03.2016
  2. balufreak

    balufreak MacUser Mitglied

    Beiträge:
    1.560
    Zustimmungen:
    28
    MacUser seit:
    12.10.2003
    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: 31.01.2005
  3. RobnN

    RobnN Thread Starter MacUser Mitglied

    Beiträge:
    360
    Zustimmungen:
    1
    MacUser seit:
    06.11.2004
    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! :)
     
  4. Dirk Levy

    Dirk Levy MacUser Mitglied

    Beiträge:
    606
    Zustimmungen:
    0
    MacUser seit:
    03.02.2002
    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
     
  5. RobnN

    RobnN Thread Starter MacUser Mitglied

    Beiträge:
    360
    Zustimmungen:
    1
    MacUser seit:
    06.11.2004
    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: 31.01.2005
  6. mactrisha

    mactrisha MacUser Mitglied

    Beiträge:
    674
    Medien:
    2
    Zustimmungen:
    4
    MacUser seit:
    27.11.2003
    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>
     
  7. macmaniac_at

    macmaniac_at MacUser Mitglied

    Beiträge:
    3.586
    Zustimmungen:
    103
    MacUser seit:
    26.09.2004
    Wie wär's mit nem CSS Container (classe) die einfach 50% von links und oben positioniert wird?
     
  8. RobnN

    RobnN Thread Starter MacUser Mitglied

    Beiträge:
    360
    Zustimmungen:
    1
    MacUser seit:
    06.11.2004
    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
      Dateigröße:
      10,1 KB
      Aufrufe:
      34
    Zuletzt bearbeitet: 02.02.2005
  9. norbi

    norbi MacUser Mitglied

    Beiträge:
    3.506
    Zustimmungen:
    22
    MacUser seit:
    14.01.2003
    Ü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.
     
  10. macmaniac_at

    macmaniac_at MacUser Mitglied

    Beiträge:
    3.586
    Zustimmungen:
    103
    MacUser seit:
    26.09.2004
    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>
     
Die Seite wird geladen...

Diese Seite empfehlen