überbreites Templates zentrieren

[Klaas]

Hallo zusammen,

mein erstelltes Template ist breiter (1440px) als mein Monitor (1048px).
Da ich jedoch nicht das Template verkleinern möchte, wollte ich mich erkundigen ob es eine Möglichkeit gibt, das überbreite Template zu zentrieren und ein horizontales scrolling zu verhindern.

Über Anregungen würde ich mich freuen
Klaas

<div class="container" align="center">  
<table cellpadding="0" cellspacing="0" width="100%">  
  <tr>  
    <td class="top_left" height="368"></td>  
    <td class="top_eye" width="290"></td>  
    <td><a href="http://www.nightfall-events.de"><img src="images/bg_top_center.jpg" border="0" alt="" /></a></td>  
  </tr>  
  <tr>  
     <td colspan="3">  
     	<table cellpadding="0" cellspacing="0" width="1440">  
        	<tr>  
            	<td class="middle_left"><div id="bottom_left"></div></td>  
                <td class="middle_center" align="center">  
                <div id="content">Hier steht Text</div>  
                <div id="impressum">Hier steht ein Impressum</div></td>  
                <td class="middle_right"><div id="bottom_right"></div></td>  
            </tr>  
            </table>  
  
        </td>  
  </tr>  
  
</table>  
</div>

[suit]

mein erstelltes Template ist breiter (1440px) als mein Monitor (1048px).

Ich denke die Breite (ein Längenmaß) in der Realen Welt wird gemäß SI in Metern definiert.

Wieviele Pixel dein Monitor horizontal nativ darstellen kann hat nichts mit der eingestellten Auflösung zu tun (auch wenn es naheliegt). Diese hat wiederum nichts mit der Dimension des Desktops zu tun welche wiederum nichts mit der Große des Browserfensters zu tun hat - und auch dieses hat keinen Einfluss auf die Tatsächliche breite des Anzeigebereichs - abschließend, die breite des Anzeigebereits hat auch nichts damit zu tun, ob die Seitenbreite ausreicht.

Beispiel:
Mein Opera im Wohnzimmer ist auf default 150% Zoom eingestellt - damit kann ich von der Couch alles gut lesen. Auch wenn mein Viewport fast 1920 Pixel breit ist, kann ich nur < 1280 Pixel (interpolier) in der horizontale sehen.

Da ich jedoch nicht das Template verkleinern möchte, wollte ich mich erkundigen ob es eine Möglichkeit gibt, das überbreite Template zu zentrieren und ein horizontales scrolling zu verhindern.

Natürlich - ein automatischer Außenabstand (links und rechts) zentriert zuverlässig Block-Elemente.

Wenn der gepostete Code dein Template darstellt, würde ich dir nahelegen es wegzuwerfen und neu zu erstellen - entsprechend deiner Anforderungen. Das ist mit Sicherheit zielführender (und weniger anstrengend) als in einer Tabellensuppe herumzuwursteln.

Du hast dein Problem übrigens noch nicht gelöst (wenn http://www.nightfall-events.de) die Live-Seite darstellt. Ab 1457 Pixel Viewportbreite fällt das Layout auseinander.

Nachdem du TYPO3 verwendest, müsstest du ansich nur das Template tauschen - damit wärst du deine Probleme dann quasi los. Aufwand würde ich auf etwa 30 Minuten für einen geübten CSS-/-HTML-Autor schätzen - wenn du dich erst einlesen musst: ein paar Stunden.

[Klaas]

Hi Suit,

deswegen versuche ich es mit dem neuen Code, welchen ich im ersten Beitrag gepostet habe. Dieser unterscheidet sich mit dem Code von der Website.
Dieser kann unter http://www.nightfall-events.de/test/ angeschaut werden.

Jedoch ist das Problem dass der Browser mir nicht die Website zentriert sondern mit eine horizontale Scrolleiste einblendet und die Website von links her aufbaut.

Grüße
Klaas

[suit]

deswegen versuche ich es mit dem neuen Code, welchen ich im ersten Beitrag gepostet habe. Dieser unterscheidet sich mit dem Code von der Website.

Mag sein, der Code ist aber keineswegs besser.

Layouten ohne Tabellen
760 Pixel breit und auf der Seite zentriert

[Klaas]

deswegen versuche ich es mit dem neuen Code, welchen ich im ersten Beitrag gepostet habe. Dieser unterscheidet sich mit dem Code von der Website.

Mag sein, der Code ist aber keineswegs besser.

Layouten ohne Tabellen
760 Pixel breit und auf der Seite zentriert

Danke für deinen Tipp, ich selbst habe es breits mehrmals versucht mit CSS und DIVs umzusetzen, jedoch scheitere ich daran die 3 Zeilen unter dem Header gleichlang zu bekommen. Sprich:

---------------------------------------
| Bild       | Content   | Bild       |
| was        | Content   | was        |
| sich       | Content   | sich       |
| der Content| Content   | der Content|
| länge      | Content   | länge      |
| anpasst    | Content   | anpasst    |
---------------------------------------

Grüße
Klaas

[suit]

Danke für deinen Tipp, ich selbst habe es breits mehrmals versucht mit CSS und DIVs umzusetzen, jedoch scheitere ich daran die 3 Zeilen unter dem Header gleichlang zu bekommen.

Du scheiterst ansich daran, zu Design und Inhalt voneinander zu trennen und denkst in Tabellen.

Versuch dich bitte an diesem HTML  - damit müsstest du alles an Elementen haben, die du zur Formatierung benötigst.

  
<!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" xml:lang="de" lang="de">  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    <title>Template</title>  
    <link type="text/css" rel="stylesheet" href="css/screen.css" media="screen, projection" />  
  </head>  
  <body>  
    <div id="container">  
      <div id="header">  
        <h1><a href="/">Nightfall Events</a></h1>  
      </div>  
      <div id="content">  
        <h2>Überschrift</h2>  
        <div id="col0">  
          <p>foo bar baz qux</p>  
        </div>  
        <div id="media"><img src="foo.png" alt="foo" /></div>  
      </div>  
      <div id="menu">  
        <h2>Navigation</h2>  
        <ul>  
          <li>Menüpunkt</li>  
          <li>Menüpunkt</li>  
          <li>Menüpunkt</li>  
        </ul>  
      </div>  
      <div id="footer">  
        footer :)  
      </div>  
    </div>  
  </body>  
</html>

html und body bekommen die Hintergrundbilder die bei Bedarf links und rechts im Nirvana verschwinden, wenn der Viewport kleiner wird

#container stellt deinen eigentliche Seite dar und ist etwa 850 Pixel breit (vergiss das 1440 vorerst). Per automatischem Margin zentriert und mit position: relative ausgestattet
#header ist der Seitenkopf - ansich nur der verzierende Teil. Er ist absolut positioniert und ist etwa 480x200 pixel groß (so groß wie der schriftzug) - eigentlich könnte man auf das element verzichten und direkt dem h1-Element die ID verpassen, aber so ist man flexibler, wenn das Layout mal etwas komplizierter wird. Alternativ: den oberen Teil des Pergaments reinpacken.
#h1 mit seinem Link ist der eigentliche Schriftzug (und ggf. einem link auf die Startseite)
#menu sollte klar sein - dein Menü. Natürlich fehlen noch entsprechende IDs für die Menüpunkte, aber das kannst du vorerst ignorieren, das ist nur eine Kleinigkeit im Menücode von TYPO3 das hineinzugenerieren. absolut hinpositionieren und als rechteck zum testen belassen. Die Einzelnen Menüpunkte folgen später.
#media wird dein Bild im Seitenkopf beinhalten und entspricht dem media-Feld der pages-Tabelle - ebenalls absolut positioniert, muss aber hinter das Menü.
#content ist der Container für den Inhaltsbereich - er bekommt den sich wiederholenden Hintergrund (das Pergament) - als normales Block-Element im Textfluss
#col0 entspricht der Inhaltsspalte 0 (normal) aus tt_content (styles.content.get bzw. colpos=0) ebenso
#footer wird dein seitenende sein (der untere Abschluss des Pergaments) und nochmal normal im fluss.

Arbeite von außen nach innen und gib' den Elementen bunte Farben (nicht die Tatsächlichen) aber die richtigen Abmessungen damit du das Verhalten des Layouts in verschiedenen Browsern testen kannst. Marker für TYPO solltest du ebenfalls außen vorlassen - aktuell ist das Template wichtig, ignoriere dass du TYPO3 verwendest (lediglich bei der Benennung der Elemente solltest du dir meinen Vorschlag zu gemüte führen, es erleichtert die arbeit später, da die Elemente etwa so heißen wie die später verwendeten TYPO3-"Dinge".

[Klaas]

Hi du,

vielen Dank für deine Hilfe,
werde mich morgen mal dran setzen und versuchen daran zu basteln.

Die von dir geschriebene Anordnung vom Code ist aber jetzt einfach "so gewählt", sprich es wird nicht mein Design ergeben? (Ich frage nur, bevor ich mich wundere dass es merkwürdig ausschaut ;) )

Grüße
Klaas

[suit]

Die von dir geschriebene Anordnung vom Code ist aber jetzt einfach "so gewählt", sprich es wird nicht mein Design ergeben? (Ich frage nur, bevor ich mich wundere dass es merkwürdig ausschaut ;) )

Die von mir gewählte Anordung des Codes ist "so gewählt" weil sie imho eine sinnvolle Reihenfolge der Inhalte darstellt.

Wie gesagt: du denkst noch in Tabellen und etwa zu linear. Mit CSS sind die Möglichkeiten breiter gefächert - dein Layout ist mit meinem HTML-Vorschlag denke ich problemlos umsetzbar.

Wenn dennoch Probleme auftauchen, kann man sie aber mit Sicherheit lösen - wie erwähnt, dein Layout ist nicht wirklich sehr komplex.