Zur Navigation

Eine komplette Homepage zentrieren

1 Moody (Gast)

Hallo
ich möchte gerne eine ganze homepage zentrieren wie geht das? Also mit welchen Befehlen muss ich alle DIVs in einen großen usw.

Habe eine home.html und eine style.css

12.11.2005 09:21

2 Jörg Kruse

Hallo Moody,

ich nehme an, das äußere div, das zentriert werden soll, hat eine feste Breite von beispielsweise 750 px; dem div gibt man eine ID, z.B. "aussen", das würde in der home.html in etwa so ausschauen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>Titel der Homepage</title>

      <!-- weitere Angaben im head -->

   </head>
   <body>
      <div id="aussen">

         <!-- weitere Elemente und Inhalt der Homepage -->

      </div>
   </body>
</html>

und in der style.css folgende Angaben für body und das div mit der ID "aussen":

body {
text-align:center;
}

div#aussen {
width:750px;
margin:auto;
text-align:left;
}

mfG Jörg

12.11.2005 09:50

3 ! (Gast)

Das Beispiel klappt nicht!!

21.08.2008 15:11

4 Jörg Kruse

Bei mir funktioniert es. Hast du die CSS-Datei korrekt eingebunden?

21.08.2008 17:57

... 10 Monate später ...

5 Steffen (Gast)

eine sehr einfache möglichkeit ist...
nach <body> einfach <center>
und vor </body> einfach </center> in die .html

also:

<html>
<body>
<center>
.
.
.
</center>
</body>
</html>
oder so ählich

14.07.2009 09:37

6 Jörg Kruse

"<center>" gilt als veraltet ("deprecated"), d.h. dass es in späteren HTML-Versionen nicht mehr enthalten sein wird.

14.07.2009 19:00

... 6 Monate später ...

7 Lositio (Gast)

die
<center> </center>
Version ist nicht nur veraltet, sondern macht dir arbeit die du im grunde nicht brauchst,
denn durch diesen Befehl wird auch die Schrift innerhalb der Container zentriert und man müsste zu jedem div in der CSS datei ein:
text-align: left;
schreiben was bei langen, bzw großen Seiten sehr nervig sein kann....

suche aber auch noch eine vernünftige Lösung um die Seite zu zentrieren, denn das mit dem:
margin: auto;
scheint auch nicht richtig zu funktionieren oder zumindest nich in allen browsern

02.02.2010 09:08

8 Jörg Kruse

margin:auto funktioniert in allen modernen Browsern inklusive IE 6, wenn eine Doctype-Angabe für HTML strict oder XHML strict verwendet wird - dann rendern die Browser die Seite im standardkonformen Modus.

Ansonsten funktioniert die Lösung in Beitrag 2.

02.02.2010 09:49

... 5 Monate später ...

9 Martin (Gast)

Das erste Beispiel von Jörg klappt gut. Man muss allerdings, wenn man noch ein "width: 750px" im body{ ... } der CSS-Datei stehen hat dieses entfernen, damit es geht.

MfG,
ein C++ Programmierer der sich seit 5 Minuten mit HTML und CSS rumschlägt.
@.@

13.07.2010 20:55

... 5 Monate später ...

10 Gast (Gast)

Hab eine ähnliche Variante wie am Anfang: Sie hat bei mir im Firefox und im Internetexpl. geklappt

Hier der html Text


<html>

<head>

<title>Titel der Homepage</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="css/center.css" rel="stylesheet" type="text/css">

</head>

<body>
<div id="center">

<!-- weitere Elemente und Inhalt der Homepage -->

</div>
</body>
</html>
......und in der css Datei "center" hab ich dan das folgende geschrieben

body {
text-align:center;
}
div#center {
background-color:#FFFFFF; height:100%; width:1000px; margin: 0 auto 0 auto;
}

18.12.2010 15:08