Seite zentriert

Mway · 30.01.2009

Seruv, ich möchte meine Seite die ich über Tabellen erstellt habe horizontal und vertikal im Browser zentrieren.

Ich google mich schon seit gestern Tot finde aber keine Lösung.

Ich hab die ganzen Tabelle in einen DIV gepackt und diesen versucht in einer extrenen css datei zu zentrieren.

kann mir hier jemand helfen ?

maxderboss · 30.01.2009

AW: Seite zentriert

Das müsste so laufen, dass du das div benennst und dann in der CSS so deklarierst:

#name {
margin: 0 auto;
}

ich bin auch noch afänger also teste mal, ich glaub es klappt

tombeat · 30.01.2009

AW: Seite zentriert

Also wenn du soooo viel gesucht hättest, dann hättest du auch den Thread 5 Threads unter deinem Entdeckt :/
Da wurde das Ausführlich und auf verschiedene Weisen geklärt

Mway · 30.01.2009

AW: Seite zentriert

alles schon durch und nichts funktioniert.

zur Info ich musste auf grund einer Gallerie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

benutzen und seit dem geht es nicht mehr.

hab es jetzt mit margin-top: 5%;
gelöst mit allem anderen geht es nicht

tombeat · 30.01.2009

AW: Seite zentriert

Das nächste mal schreib bitte dazu das was du schon alles versucht hast, und was welche/ob auswirkungen gehabt hat, und gaaaanz wichtig.
Ohne Code und vill. nen Link zur Page können wir nur die Kristallkugel auspacken!
Zur Info:
Die Kristallkugel ist für 2 Dinge da:
1. Vermutungen über ein Problem von dem wir keine Informationen haben anzustellen
2. Sie als Wurfgeschoss verwenden und demjenigen der die Informationen hätte auf den Kopf zu werfen

Herr_D · 30.01.2009

AW: Seite zentriert

Ich meine... wenn du sowieso mit Tabllen arbeitest, was soll dann das Rumgeeier mit margin und padding?

Code:

<table style="text-align: left; width: 100%; height: 100%;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="text-align: center; vertical-align: middle; height: 100%; width: 100%;">Anderer Code (jetzige Tabelle)</td>
</tr>
</tbody>
</table>

Ja ich weiß, dass das nicht valigne und w3c-konform ist, aber wenn eh ne Tabelle zum Layouten benutzt wird, kommt es darauf auch nicht mehr an

Mway · 30.01.2009

AW: Seite zentriert

hab die Page jetzt sowieso angeschossen und muss von vorne anfangen.
Gibt es den ein gutes Tutorials wie man Seite nun ohne Tabelen machen ?
Ich nehme mal an es wird jetzt über css gemacht.

Kennt jemand ein guten Link?

tombeat · 30.01.2009

AW: Seite zentriert

Mway · 30.01.2009

AW: Seite zentriert

Danke, hab ein paar Sachen überflogen. Scheint garnicht so kompliziert zu sein.

feelx75 · 30.01.2009

AW: Seite zentriert

Hi
Ja.. der Teufel steckt da halt im Detail. Aber gut, dass du versuchst, ohne Tabellen auszukommen.
Zum Problem - wenn du ohne Tabellen auskommen willst... Weisst du denn, wie breit und v.a. wie hoch der "content-bereich" (= den, den du zentrieren willst) sein soll? Oder variiert die höhe?

Mway · 30.01.2009

AW: Seite zentriert

der content variiert, aber dieser wird ja nicht zentriert sondern ist in der Div linksbündig.

Zentriert wird ja nur der umschliessende Container, wenn ich es richtig verstanden habe.

Aber wie gesagt, ich habe es nur überflogen und muss es mir mal in ruhe aneignen.

feelx75 · 30.01.2009

AW: Seite zentriert

Mway schrieb:
Zentriert wird ja nur der umschliessende Container, wenn ich es richtig verstanden habe.

Ja genau... Aber ist der Container immer GLEICH hoch? (notfalls mit Scrollbalken)?

Wenn er variiert, dann ist das vertikale zentrale Ausrichten etwas schwierig (da würde ich, obwohl verpöhnt, auf EINE Tabelle setzen, so wie es Herr_D vorschlug, um zu zentrieren, allenfalls mit CSS zentrieren, aber TABELLE als Mittel der Wahl). Da drin kannst du ja auf weitere Tabellen verzichen...
Aber vll wäre es dann eher vorzuziehen, auf eine VERTIKALE zentrierung zu verzichten.... denn was bringt diese, wenn die höhe > 800px ist und über den Screen hinausreicht, dafür oben unnötige (z.B) 300px verschwendet. Vllt wäre da eine Alternative ein kleiner Abstand von oben zu wählen... (50-80px als Beispiel)

Mway · 31.01.2009

AW: Seite zentriert

Das Problem ist, daß z.B auf der Startseite relativ wenig Content ist und dann sieht es etwas doof aus wenn die Seite oben am Browser hängt.

Ich werd es einfach mal testen wie es rüber kommt. Die Tabelle ist ja schnell drum rum gebaut.

Aber wie gesagt ich muss mich da erst wieder reinwursteln. Als ich HTML gelernt habe, hat man noch mit Frames gearbeitet ^^.

Frit · 31.01.2009

AW: Seite zentriert

feelx75 schrieb:
Ja genau... Aber ist der Container immer GLEICH hoch? (notfalls mit Scrollbalken)?

Wenn er variiert, dann ist das vertikale zentrale Ausrichten etwas schwierig (da würde ich, obwohl verpöhnt, auf EINE Tabelle setzen, so wie es Herr_D vorschlug, um zu zentrieren, allenfalls mit CSS zentrieren, aber TABELLE als Mittel der Wahl). Da drin kannst du ja auf weitere Tabellen verzichen...
Aber vll wäre es dann eher vorzuziehen, auf eine VERTIKALE zentrierung zu verzichten.... denn was bringt diese, wenn die höhe > 800px ist und über den Screen hinausreicht, dafür oben unnötige (z.B) 300px verschwendet. Vllt wäre da eine Alternative ein kleiner Abstand von oben zu wählen... (50-80px als Beispiel)

Die Höhe des Containers ist echt ein kleines, aber nicht unlösbares Problem. Erstens kennen die meisten der neueren Browser die CSS-Angabe "min-height", zweitens kann man den Versatz durch die Scrollbar vermeiden, wenn man der Seite gleich sagt, dass sie größer als die Browserhöhe sein soll, dann hat man zwar immer eine vertikale Scrollbar, aber es stört IMHO weniger als das hin- und herspringen des Inhalts.

Also den Container z.B. so setzen:

#container {
position: relative;
width: 1000px;
min-height: 700px;
margin: 20px auto;
padding: 0px 0px 0px 0px;
}

20 Pixel nach oben sollten reichen, die Angabe "auto" für Rechts und Links zentrieren den Inhaltscontainer. Um das horizontale "Zucken" durch die Scrollbar zu vermeiden kann man sowas machen:

body {
margin:0px;
padding:0px;
height:101%; /* Versatz durch Scrollbar vermeiden */
}

Zum Thema Tabellenlayout: Heutzutage stehen mit den (fast) einheitlich implementierten CSS-Angaben Mittel zur Verfügung, die ein Tabellenlayout komplett überflüssig machen. Zum einen kann man so semantisch sinnvoll geschriebene Seiten verwirklichen, die z.B. auch für Anwender mit Screenreadern oder Sprachausgabe nutzbar sind, zum anderen ist man deutlich flexibler, was verschiedene andere Ausgabemedien betrifft: Ein Stylesheet für den "normalen" Bildschirm, einen für Druck, einen für Handheld-Geräte...

Ich hab' selbst vor ca. 15 Jahren (ich sag' nur NCSA Mosaic und die ersten Netscapes!) mit Begeisterung auf Tabellenlayout gesetzt, weil's einfach zu "besser" aussehenden und "schöner" strukturierten Seiten führte. Naja, glücklicherweise lernt man nie aus ... ;-)

feelx75 · 31.01.2009

AW: Seite zentriert

@Frit: Es ging ja noch darum, diesen Container vertikal zentriert zu positionieren. Deshalb ja der Vorschlag mit einer einzigen(!) Tabelle gemäss Herr_D, das ganze zu zentrieren.
Wenn man die Höhe des Containers allerdings kennt, dann liesse sich das anders, eleganter lösen...
Nehmen wir an, die Höhe sei 600px / breite 700px, dann könnte man das DIV mit position: absolute: top: 50%, left: 50% positionieren und dann mit margin-top: -300px und margin-left: -350px (jeweils der Hälfte von Höhe/Breite) mittig ausrichten. Bei unbekannter Höhe kommt mir da nix vergleichbares in den Sinn, womit das Ziel vertikal zentriert ausrichten erreichen könnte. (ausser eben Tabelle)

Mway · 31.01.2009

AW: Seite zentriert

oh ihr macht mich hier fertig ^^.

Ich hab mir noch nicht mal die simpelsten Tutorials richtig durchgelesen und ihr kommt mit sowas.

Ich kann zwar etwas HTML aber mein neuster Stand war arbeiten mit Tabellen. Als ich angefangen habe wurde noch mit Frames gearbeitet.

Im moment hab ich leider auch nicht so viel Zeit, aber sobald ich welche habe werd ich die Tutorials hier mal genau durchlesen.

lucy_lawless · 03.02.2009

AW: Seite zentriert

#container {
position: relative;
width: 1000px;
min-height: 700px;
margin: 20px auto;
padding: 0px 0px 0px 0px;
}

gibts da nen bestimmten grund für das position:relative? einen wert übergibts du dem ja nicht. position:relative heißt nix andres, als das der div relativ zu seiner eigentlichen position verschoben wird. diese verscheibeung mußt du dann definieren: z.b. mit top:50px; 50pixel nach unten.

ohne ein solche angabe macht position:relative keinen sinn. oder ist mir da irgendwas entgangen?

ach und padding:0; reicht vollkommen

Frit · 05.02.2009

AW: Seite zentriert

@lucy_lawless: Die "überflüssigen" CSS-Angaben kommen daher, dass ich gerade ein Projekt mit halbwegs passendem Stylesheet offen hatte, und per copypasta gearbeitet habe - bin halt ein fauler Mensch! ;-)

Aber es stimmt schon: Die Angaben sind hier überflüssig, waren aber im Zusammenhang mit oben angesprochenem Projekt erstmal notwendig. (Zu faul zum Löschen, siehe oben...)

afr0kalypse · 05.02.2009

AW: Seite zentriert

ich hab hier noch nen selfhtml link gefunden

und den hier: http://d-graff.de/fricca/center.html