CSS Seite zentrieren?

Carrera · #1 (**permalink**) 21.12.2011, 10:06

Hallo, ich bin neu hier im Forum und habe eine Frage. Ich habe vor 15 Jahren mal HTML programmierung gelernt und dann knapp 10 Jahre nichts mehr mit der Thematik zu tun gehabt. Heute ist das ganze alles veraltet. Ich möchte mir nun etwas CSS anlernen.

Ich habe folgendes Problem:
Ich möchte den Inhalt einer CSS website komplett zentrieren (Horizontal und Vertikal)

Ich habe schon vieles gelesen allerdings verschiebt sich bei mir das ganze Template wenn ich es versuche zu zentrieren.

Hier mal der Quellcode:

Zitat:

<!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>
<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>

</head>
<body style="background-color:#FFFFFF;">

<center>
<div id="Tabelle_01">
<div id="index-01_">
<img id="index_01" src="images/index_01.jpg" width="679" height="250" alt="" />
</div>
<div id="index-02_">
<img id="index_02" src="images/index_02.jpg" width="145" height="350" alt="" />
</div>
<div id="Pferdetraining_">
<span
onMouseOver="document.pferdetraining.src='images/pferdetraining_hoover.jpg'"
onMouseOut="document.pferdetraining.src='images/pferdetraining.jpg'">
<a href="pferdetraining.html">
<img src="images/pferdetraining.jpg" name="pferdetraining" width="105" height="100" border="0">
</a>
</span>
</div>
<div id="index-04_">
<img id="index_04" src="images/index_04.jpg" width="429" height="12" alt="" />
</div>
<div id="index-05_">
<img id="index_05" src="images/index_05.jpg" width="235" height="338" alt="" />
</div>
<div id="hundetraining_">
<span
onMouseOver="document.hundetraining.src='images/hundetraining_hoover.jpg'"
onMouseOut="document.hundetraining.src='images/hundetraining.jpg'">
<a href="hundetraining.html">
<img src="images/hundetraining.jpg" name="hundetraining" width="121" height="116" border="0">
</a>
</span>
</div>
<div id="index-07_">
<img id="index_07" src="images/index_07.jpg" width="73" height="338" alt="" />
</div>
<div id="index-08_">
<img id="index_08" src="images/index_08.jpg" width="105" height="250" alt="" />
</div>
<div id="index-09_">
<img id="index_09" src="images/index_09.jpg" width="121" height="222" alt="" />
</div>
</div>
</center>
</body>
</html>

Vielleicht kann mir einer helfen und mir erzählen, wie ich es am besten mache?

hubspe · #2 (**permalink**) 21.12.2011, 10:43

Moin,

position:absolute ist für dein Vorhaben leider ziemlich ungeeignet.

So zentriert man eine Website horizontal/vertikal. Den Link findest du auch in unserer CSS-FAQ Punkt 5.

Um modernes CSS zu lernen ist Little Boxes vielfach bewährt!

Carrera · #3 (**permalink**) 21.12.2011, 10:57

Kannst du mir eventuell anhand meine Codes an einem beispiel zeigen wie ich es abändere?

hubspe · #4 (**permalink**) 21.12.2011, 11:20

Zitat:

Zitat von Carrera

Kannst du mir eventuell anhand meine Codes an einem beispiel zeigen wie ich es abändere?

das würde dir doch nix bringen!

Solltest du mit dem Link zur horizontalen/vertikalen Zentrierung nicht klarkommen, kommst du nicht
umhin die Grundlagen mithilfe von Little Boxes zu erlernen. Du hast ja auch gepostet das du dir modernes CSS aneignen willst.

Wenn ich dir jetzt ne fertige Lösung poste kannst du damit doch gar nix anfangen, weil du sie
wg. fehlender Grundlagen schlichtweg nicht verstehen würdest, oder?

cebito · #5 (**permalink**) 21.12.2011, 11:41

Noch besser so... Webseite vertical und horizontal zentrieren ohne Position und zusätzliches Markup da musst nicht mal die Höhe wissen, bist also absolut flexibel

Carrera · #6 (**permalink**) 21.12.2011, 11:41

Das ist richtig allerdings dauert das ganze etwas, doch es ist sehr wichtig das die homepage online geht.

hubspe · #7 (**permalink**) 21.12.2011, 11:46

Zitat:

Zitat von cebito

Noch besser so... Webseite vertical und horizontal zentrieren ohne Position und zusätzliches Markup da musst nicht mal die Höhe wissen, bist also absolut flexibel

naja ist das Gleiche in grün, oder

Allerdings finde ich gut, das du eine zusätzliche Lösung gepostet hast.

Zitat:

Zitat von Carrera

Das ist richtig allerdings dauert das ganze etwas, doch es ist sehr wichtig das die homepage online geht.

Ein Forum bietet i.d.R. Hilfe zur Selbsthilfe.
Falls du eine fertige Lösung haben willst bist du hier natürlich auch richtig.
Die meisten Helfenden sind Webentwickler deren täglich Brot solche Aufgabenstellungen sind.
Ich bin vollkommen sicher einem bezahlten Job stehen hier alle sehr positiv gegenüber.

cebito · #8 (**permalink**) 21.12.2011, 11:52

Nee, braucht kein zusätzliches Markup (distance) und ist in der Höhe absolut flexibel. Man kann also jederzeit Content hinzufügen oder wegnehmen, ohne an der Höhenschraube zu drehen.

hubspe · #9 (**permalink**) 21.12.2011, 11:54

Zitat:

Zitat von cebito

Nee, braucht kein zusätzliches Markup (distance) und ist in der Höhe absolut flexibel. Man kann also jederzeit Content hinzufügen oder wegnehmen, ohne an der Höhenschraube zu drehen.

hab mein posting schon geändert, damit nicht der Eindruck entsteht ich würde deine Lösung geringschätzen.

Das wäre vielleicht auch ein Kandidat zur Ergänzung unserer CSS-FAQ.

protonenbeschleuniger · #10 (**permalink**) 21.12.2011, 13:59

Zitat:

Zitat von Carrera

Kannst du mir eventuell anhand meine Codes an einem beispiel zeigen wie ich es abändere?

Das hat er doch gemacht. In dem Beitrag davor ist ein Link und wenn du da drauf klickst, kommt ein Beispiel, mit Code! Wie du es abändern willst, können wir natürlich nicht Wissen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
erste seite mit css, problem....	carpital	CSS	1	09.09.2009 17:25
Bitte um Hilfe - Möchte diese Seite am Browser zentrieren	oldi	CSS	11	19.04.2009 12:40
Für jede Seite eine CSS datei?	Spähling	CSS	11	02.04.2009 17:30
Die erste Seite mit css	Micme	Site- und Layoutcheck	31	09.04.2008 13:08
css einsteiger div zentrieren..	Holger (HMR)	CSS	10	13.11.2004 16:23