[CSS] Seite in der Mitte, egal welche Auflösung

1337PillEr · 3. September 2007

Hiho liebe Community,
diesmal hab ich auch mal ein Problem und das diesmal in CSS. Ich bin dort noch in der "Lernphase" und habe mich mal an einem 3-Spaltigen Layout versucht. Das Problem ist das ich es mit CSS mittels "margin-left: Zahlpx;" gemacht habe und so natürlich nur in meiner Auflösung(1650x1080) halbwegs zentriert ist.Nun suche ich eine Lösung wie ich die Seite so programmiere das sie mit der Auflösung variiert. Ich habe hier zwar schon die Suche benutzt und einen Thread gefunden, allerdings hilft er mir nicht wirklich mit der Lösung des Problems. Achja bevor ich's vergesse. Ich möchte möglichst nur lösungen in CSS haben und kein html. Ich weiß nicht ob es überhaupt funktioniert aber deswegen frage ich ja (:

Hier noch ein Beispiel: www.florian-sites.com (nicht über Farben oder sonstiges wundern>wiegesagt CSS-Neuling (; )

Mit freundlichen Grüßen

1337PillER

SirTwist · 3. September 2007

AW: [CSS]Seite in der Mitte, egal welche Auflösung

das was du brauchst heisst: margin: auto

aber wie bei fast allen tollen Sachen gibts einen Hacken: der IE raffts leider nicht!

Kampfgnom · 3. September 2007

AW: [CSS]Seite in der Mitte, egal welche Auflösung

Wenn du nicht gerade im Quirks-Mode arbeitest schafft er es ohne Probleme...

PS/OT: Sehr schöne Links zum Thema Doctypes/MIME-Types + IE ist http://juicystudio.com/article/content-negotiation.php
sowie http://www.456bereastreet.com/archive/200408/content_negotiation/
und http://www.autisticcuckoo.net/archive.php?id=2004/11/03/content-negotiation (leider down

)

Zweipunktnull · 3. September 2007

AW: [CSS]Seite in der Mitte, egal welche Auflösung

aber wie bei fast allen tollen Sachen gibts einen Hacken: der IE raffts leider nicht!

Erstens stimmt das - wie Kampfgnom bereits erwähnte - so nicht und zweitens ist der Workaround für margin: auto wohl einer der einfachsten die es gibt...
(Den man allerdings wohlgemerkt nur dann brauch, wenn man den MSIE5 noch unterstützen möchte.)

SirTwist · 3. September 2007

AW: [CSS]Seite in der Mitte, egal welche Auflösung

@computerfreak: was meinst du mit Workaround?

wie löst du denn das Problem wenn etwas mittig ausgerichtet werden soll im IE?

Backslash · 3. September 2007

AW: [CSS]Seite in der Mitte, egal welche Auflösung

style.css

Code:

body { 
text-align:center; 
}

div.content { 
width:800px;
text-align:left; 
margin:auto;
border-style:dashed;
}

index.html

Code:

<html>
 <head>
  <title>test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  <div class="content">
   Der Inhalt...
  </div>
 </body>
</html>

Wichtig ist das text-align:center für body und dann um den echten Text linksbündig zu haben das text-align:left für das div.
Außerdem, für non-IE Browser (also eig. richtig) das margin:auto für das div.

mfg

/edit: code korrigiert *schäm*

KonKorT · 3. September 2007

AW: [CSS]Seite in der Mitte, egal welche Auflösung

Den Befehl margin: auto; zur Zentrierung kennen alle Internet Explorer Versionen aufwärts von 6.0. Insofern sehe ich kein Bedenken, margin: auto; nicht zu nutzen. Der Anteil der User, die mit < IE 6.0 surfen stellen die deutliche Minderheit dar, die im unteren, einstelligen Prozentbereich liegen sollte.

1337PillEr · 3. September 2007

AW: [CSS]Seite in der Mitte, egal welche Auflösung

Vielen dank für die zahlreichen und hilfreichen Antworten. Nur jetzt habe ich das Problem wenn ich jetzt die linke Spalte, Mitte und rechte Spalte auf margin: auto stelle, das alle 3 ganz links "übereinander" sind. Ich zeig hier mal den Code,und hoffe das es verständlicher wird.

Code:

#inhalt {
  position: absolute;
  padding-left: 0px;
  width: 365px;
  margin: 0px 660px;
  background-color: #ffffc6;
  margin: auto;
}
#menu {
  position: absolute;
  top: 228px;
  margin: auto;
  width: 160px;
  height: 300px;
  background-color: #ffcc00;
  padding-left: 15px;
}
#rechts {
  position: absolute;
  top: 228px;
  margin: auto;
  width: 160px;
  height: 300px;
  background-color: #ffcc00;
}

menu ist die linke spalte und der rest ist dann wahrscheinlich selbsterklärend.
Meine Frage ist dann natürlich wie ich sie wieder unterm "header" bekomme und das nebeneinander.

Mit freundlichen Grüßen,
1337PillER

Backslash · 3. September 2007

AW: [CSS]Seite in der Mitte, egal welche Auflösung

Alles in ein div packen und für dieses margin:auto setzten, nicht für jede spalte einzeln.
mfg

1337PillEr · 3. September 2007

AW: [CSS]Seite in der Mitte, egal welche Auflösung

Sry könntest du mir ein Beispiel geben? Ich verstehe zwar was du meinst aber nicht wie ich das genau umsetzen soll. Danke schonmal im Vorraus.

Zweipunktnull · 3. September 2007

AW: [CSS]Seite in der Mitte, egal welche Auflösung

HTML:

<div id="wrapper">
  <div id="menu"></div>
  <div id="inhalt"></div>
  <div id="rechts"></div>
</div>

Code:

div#wrapper {
  margin: auto;
  width: 685px;  // Gesamtbreite deiner drei Spalten
}

Das margin: auto dann natürlich wieder aus den Definitionen für menu, inhalt und rechts löschen.

PuppetMaster · 3. September 2007

1337PillEr schrieb:
Sry könntest du mir ein Beispiel geben? Ich verstehe zwar was du meinst aber nicht wie ich das genau umsetzen soll. Danke schonmal im Vorraus.

Die erste Voraussetzung ist ein valider Doctype, z. B.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
...

1337PillEr · 3. September 2007

Wow super vielen Dank, hat alles super funktioniert (:

Suche

[CSS] Seite in der Mitte, egal welche Auflösung

1337PillEr

Cadet 1st Year

SirTwist

Ensign

Kampfgnom

Lt. Commander

Zweipunktnull

Commander

SirTwist

Ensign

Backslash

Captain

KonKorT

Lt. Commander

1337PillEr

Cadet 1st Year

Backslash

Captain

1337PillEr

Cadet 1st Year

Zweipunktnull

Commander

PuppetMaster

Admiral Pro

1337PillEr

Cadet 1st Year

Ähnliche Themen