Website + Text in allen Browsern zentrieren.

11.07.2011, 21:56

Hey ich arbeite mich gerade ins CSS ein, da ich mir eine Website erstellen möchte.

Ich bekomme aber die Website nicht zentriert und ich hoffe, ihr könnt mir helfen.

1x der HTML Code

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Deejay cpX</title>
    <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
    <meta name="description" content="Offical Website" />
    <meta name="author" content="Tim Kramer" />
    <meta name="keywords" content="Deejay cpX, Offical Website" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
    <link href="styles.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <!-- Zentrierung Seite-->
    <div id="Seite">
    </div>
    <!-- Zentrierung Seite ende -->
    <!-- Kopfbereich anfang -->

    <div id="kopfbereich">
        <p>Deejay cpX</p>
    </div><!-- Kopfbereich ende -->

    <!-- Anfang Steuerungselement -->
    <div id="Steuerung">
    <ul>
        <li><a href="home.html">Startseite</a></li>
        <li><a href="about.html">About Me</a></li>
    </ul>
    </div>
    <!-- Ende Steuerngselement -->

    <!-- Schattenfeld anfang -->
     <div id="Schatten"></div>
    <!-- Schattenfeld ende -->

    <!-- Anfang Inhalt -->
    <div id="Inhalt">
        <ul>
            <li>Willkommen auf meiner Website</li>
            <li>Ich bitte sie um entschuldigung, aber diese
            wird momentan gewartet</li>
        </ul>
    </div><!-- Ende Inhalt -->
    <!-- Anfang Fußzeile -->

    <div id="Fusszeile">
        <p>Deejing Entertainment by Deejay cpX - Offical Website</p>
    </div><!-- Ende Fußzeile -->
</body>
</html>

und dann der css

Code:

<style type="text/css">

<!--
#seite {
    text-align: left;
}
<!--
* {
  margin:0;
  padding:0;

}
-->

<!--
#inhalt h1, h2, h3, p, ul {
  padding-bottom:.7em;
}
-->

<!--
#inhalt ul {
  padding-left:2em;
}
-->

<!--
#kopfbereich  {
  background:url(../../Desktop/saeulen.jpg) no-repeat left top;
  height:150px

}
-->

<!--
#kopfbereich p {
    color:white;
    text-align:right;
    font-size:2em;
    padding:0.4em 0.4em 0 0;
}
-->

<!--
#Steuerung {
  background-color: #4B4B4B;
  height:20px;
  padding-left:1em;
}
-->

<!--
#Steuerung ul {
  list-style:none;
  padding-left:1em;
}
-->

<!--
#Steuerung li {
    float:left;
    padding-left:1em;


}

<!--
#Schatten {
  background:url(../../Desktop/schattenwurf-grau-v.png) repeat-x;
  height:12px
}
-->

<!--
#Inhalt {
   padding-left:2em;
   padding:0.4em 0.4em 0 0;

}
-->

<!--
#html, #body {
    font: 100% Arial, Helvetice, sans-serif;
    font-size:12px;
    text-align: center;
}
-->

<!--
#Fusszeile  {
    background-color: #4B4B4B;
    padding-left:2em;
    font-size:12px;
    color: #0000A0;
    padding:0.4em 0.4em 0 0;

    }
-->

Wo ist der Fehler?

11.07.2011, 22:18

Hi,

warum öffnest du den Container #Seite und schließt ihn dann sofort wieder?
Das macht hier so gut wie keinen Sinn.
Du musst den Container am Anfang öffnen und bevor du das <body> Element schließt, schließt du den Container #Seite.
Außerdem musst du eine Kleinigkeit in deinem CSS-Code ändern und zwar musst du dem div#Seite eine Breite zuweisen und den margin Wert auf 0 auto setzen, z.B.:

HTML-Code:

div#Seite {
    width:980px;
    margin: 0 auto;
}

Anschließend ist alles im Container #Seite, sprich deine Webseite zentriert.

LG Alex