CSS Tutorials > Seite in der Mitte platzieren

CSS > Seite in der Mitte platzieren

Autor: gor

Hallo zusammen, mit diesem Tutorial will ich euch nur mal kurz zeigen wie man seine Seite mittig Positionieren kann.

Schritt 1 - HTML anlegen

Als erstes müsst ihr in eurer index.html ein umfasenden Container haben der alle inhalte beinhaltet z.b:

Code:

< !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>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
< title> WME Tutorial < /title>
< link rel="stylesheet" type="text/css" href="style.css" media="screen" />

< body>

< div id="container">

< div id="header">
< div id="navigation">
< div id="content">
< div id="footer">

< /div>

< /body>
< /html>

Bei mir ist alles im Container von header bis footer.

So damit haben wir schon ersten Schritt fertig.
Schritt 2 - CSS anlegen

Als nächstes müsst ihr eine CSS-Datei anlegen.
In der css-datei müsst ihr für euren container definieren:

Code:

#container {
width: 700px;
margin: 0 auto;
}

Und schon ist eure Seite in der mitte des Browsers.
Viel Spass beim basteln.

Aktuell 3/5 Sternen.
1
2
3
4
5

Dieses Tutorial wurde geschrieben von gor - Homepage

Kommentare

Kommentare schreiben

Um einen Kommentar zu schreiben musst du eingeloggt sein.

Noch nicht registriert?

Kommentare

Kommentare zu dieser Tutorial

Das ist genau das was Gor da auch stehn hat, nur ist seine die
Kurzschreibweise und daher die bessere und professionellere Variante.

05.06.2009 18:44 Stone

Man kann es auch andesr machen, und zwar richtig: [code] #container
{ width: 700px; margin-left:auto; margin-right:auto; } [/code]
05.06.2009 12:06 newwarrior

Aber das hier geht, ich habe alle unötigen 'spaces'
entfernt <div id="container"> <div
id="header">hier header</div> <div
id="navigation">hier navigation</div> <div
id="content">hier content</div> <div
id="footer">hier footer</div> </div>
21.03.2009 23:00 Muller

der geht net!
05.02.2009 14:25 Froschi

Home