DIV aautmatisch zentrieren?

JensenJR · 18.02.2009

Hallo,

ich baue gerade eine kleine PHP-Seite. Dabei gibt es die Möglichkeit, dass dem User eine eigenständige Fehlerseite angezeigt wird. Die Seite ist sehr einfach gehalten. Sie soll im Grunde genommen nur aus einem DIV bestehen.

Ich möchte nun gerne, dass dieses einzelne DIV automatisch zentriert dargestellt wird, egal welche Bildschirmauflösung der User verwendet.

Habt Ihr eine Idee?

Danke für Eure Hilfe!

AleX94x · 18.02.2009

AW: DIV aautmatisch zentrieren?

probiers mal mit
<div align="center">

bigpaul · 18.02.2009

AW: DIV aautmatisch zentrieren?

Um genau zu sein:
<div align="center">
<div id="deineDivBox">
//Dein Inhalt
</div>
</div>

Herr_D · 18.02.2009

AW: DIV aautmatisch zentrieren?

Ignorier das über mir

Webseite horizontal und vertikal zentrieren - dailystuff

JensenJR · 18.02.2009

AW: DIV autmatisch zentrieren?

Hallo,

herzlichen dank für die Info. Super erklärt. Meine ehemalige Umsetzung war nicht so professionell. Ich schicke trotzdem mal den Code. Ihr könnt dann gerne meine Mängel analysieren. Ich freue mich über jede konstruktive Kritik.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Gedichtwettbewerb</title>
<link rel="stylesheet" type="text/css" href="index1.css">
</script>
</head>
<body>
<div align="center">
<div id="test">Testen, Testen, Testen</div>
</div>
</body>
</html>

Die CSS-Datei:

@charset "utf-8";
* {
padding:0px;
margin:0px;
}

body {
margin:0px;
padding:0px;
background-color:#8B0000;
}

#test {
width:300px;
height:80px;
margin-top:250px;
color: #FAF0E6;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
line-height:14px;
text-align:left;
padding-left:30px;
padding-top:30px;
background-color:#7A8B8B;
}

Grüße,
JensenJR

webginga · 18.02.2009

AW: DIV aautmatisch zentrieren?

Hallo jensenjr,

Das charset für die html Datei würde ich auf utf 8 umstellen.
Für die CSS datei brauchst du das, glaube ich gar nicht
es reicht wenn beim universalselektor
* {
padding:0px;
margin:0px;
}
steht, das brauchst du für den body nicht wiederholen, da greift ja die Cascade.
solche Anweisungen.
<div align="center"> würde ich nur im Stylesheet machen gar nicht im HTML Code. Ja und die Angaben für das div text nageln dieses an eine bestimmte Stelle fest. Das sieht eben dann je nach Auflösung unterschiedlich aus und wirkt sich nicht automatisch so aus, dass das div in der Mitte landet.

LG Webginga

bigpaul · 18.02.2009

AW: DIV aautmatisch zentrieren?

Die von Herrn D vorgeschlagene Methode funktioniert nur bei festen div Container Größen. Also ignorier seinen Beitrag mal -.- (was isn das bitte für ne Art..)
Ums für dich nicht so umständlich zu machen, hab ichs direkt in Html reingeschrieben. Geht natürlich auch per CSS file.

Top_Gun · 19.02.2009

AW: DIV aautmatisch zentrieren?

bigpaul schrieb:
Die von Herrn D vorgeschlagene Methode funktioniert nur bei festen div Container Größen. Also ignorier seinen Beitrag mal -.- (was isn das bitte für ne Art..)
Ums für dich nicht so umständlich zu machen, hab ichs direkt in Html reingeschrieben. Geht natürlich auch per CSS file.

An deinen Beiträgen sieht man, dass du noch einige Wissenslücken aufweist.
Du kannst ausschließlich nur dann einen Container zentrieren wenn er eine feste Größe hat.

Und der Code, den du gepostet hast (unabhängig von dem was du "direkt in Html reingeschrieben" hast), ist totaler Mist. Den zu ignorieren ist der beste Rat gewesen den jemand geben konnte.

NINNICK · 19.02.2009

AW: DIV aautmatisch zentrieren?

...da schließ ich mich Top_Gun völlig an...

Auch ich bin ein Fan der mittigen Ausrichtung.
Das Ganze hat aber auch Nachteile woran man denken sollte.

Durch die negativen Einzüge schiebt sich das Div links und unten aus dem Bildschirm.
Eine Navigation links im Div z.B. wird dann bei einem kleinen Bildschirm unter Umständen unerreichbar.
Genauso mit einer Navileiste z.B. unten !

bigpaul · 19.02.2009

AW: DIV aautmatisch zentrieren?

Ähm.. man kann ein Div nicht nur mit einer festen Größe zentrieren. Das ist eine Tatsache und ich hab das auch schon bei mehreren Websiten in verwendung.
Und was ist bitte an dem Code "totaler Mist"?
Wie würdest du es denn machen?
Einfach nur zu beleidigen, ohne es besser zu machen ist wohl sinnlos.

Top_Gun · 19.02.2009

AW: DIV aautmatisch zentrieren?

Ein Div ohne feste Größe nimmt sich den Platz vom linken Browserrand bis zum rechten Browserrand, wie bitte willst du da etwas zentrieren ohne eine feste Größe oder margin (welches du in deinem Beispiel nicht benutzt) zu verwenden?

Dein Codebeispiel ist deshalb totaler Müll, weil für jedes zu zentrierende div ein weiteres benötigt werden würde.
Wenn jetzt jemand, der noch keine fundierten Kentnisse in HTML hat, sich an dein Beispiel hält, käme am Ende eine div-Suppe heraus mit mehreren ungenutzten und unnötigen Containern. Sollte er damit Hilfe suchen (zB hier im Forum) würde jeder der Ahnung hat, sehen dass es totaler Müll ist und ihm raten, seinen Quelltext komplett zu überarbeiten.
Und spätestens in diesem Moment sieht sogar derjenige, der kaum eine Ahnung hatte und sich an deine Hilfe gehalten hat, ein, dass er doch lieber auf den "unfreundlichen" Herr_D hätte hören sollen und deinen Post vergessen.

bigpaul · 19.02.2009

AW: DIV aautmatisch zentrieren?

Es ging darum _ein_ div in der Mitte zu platzieren. Und das ist dann einfach die einfachste Methode.
Also für alle die das lesen: Nur bei dem oben beschrieben Problem benutzen, sonst kommt eine "div-Suppe" heraus. xD..

Top_Gun · 19.02.2009

AW: DIV aautmatisch zentrieren?

Und um _ein_ div mittig auszurichten benötigst du noch _ein_ weiteres div?

Wenn ich einen Poster an die Wand kleben will, klebe ich auch immer erst ein anderes darunter... -_-

bigpaul · 19.02.2009

AW: DIV aautmatisch zentrieren?

Das hat damit nichts zu tun.. Sinnlose Beispiele wie das braucht es nicht. Aber bevor ich mit einer Lösung anfange, die sowieso nicht richtig funktioniert(z.B. wenn man die Fenstergröße verkleinert(dann stimmten die Abstände links und rechts nicht überein)) nehme ich lieber eine einfachere, die schneller ist.

Top_Gun · 19.02.2009

AW: DIV aautmatisch zentrieren?

Das Beispiel spiegelt aber genau das wider, was dein Code macht.

Und die Lösung von Herr_D funktioniert bei jeder Fenstergröße und einfacher und schneller geht es einfach nicht.

Ich weiß auch nicht wo dein Problem ist einzugestehen, dass dein Code nicht das gelbe vom Ei ist. Statt dessen versuchst du hier mit haarsträubenden Ausreden das ganze schön zu reden...

bigpaul · 19.02.2009

AW: DIV aautmatisch zentrieren?

Ich habe nie behauptet mein Code ist das gelbe vom Ei. Natürlich ist die Lösung von herrn d schöner.
Aber die von mir ist einfach simpler und von einem Anfänger sicherlich leichter zu vertehen.
Und dein Beispiel spiegelt nicht annähernd das wieder, was mein Code macht.
Ein korrektes Beispiel wäre, wenn man ein Poster an der Wand hängen hat, welches immer mittig von der Wand ist und dann ein anderes draufklebt. Die Methode von Herrn D wäre dann, das Poster in die Mitte zu hängen, nachdem man zuerst die Wand ausgemessen hat und berechnet hat, wo man das Poster dann hinhängen muss.
Und bei meiner Auflösung (1920x1200) funktioniert die Lösung eben nicht einwandfrei.

Top_Gun · 19.02.2009

AW: DIV aautmatisch zentrieren?

Und auch dieser Post zeigt, dass du Wissenslücken hast. Du hast nicht im geringsten Verstanden wie die Methode von Herr_D funktioniert oder was sie macht.
Und auch die Diskussion was einfacher ist und was nicht ist müßig. Denk halt was du willst und sieh die Kritik als Beleidigung an, aber du wirst damit leben müssen solange du deine Einstellung nicht änderst.

bigpaul · 19.02.2009

AW: DIV aautmatisch zentrieren?

Mh nein.
Ich muss mich wirklich nicht beleidigen lassen, von dir und auch nicht vom Hern D.
Hab ich gesagt, dass ich keine Wissenslücken habe, oder dass mein Code perfekt ist? Nein.
Irgendwie habe ich das Gefühl du willst dich aufspielen oder so in die Richtung...
Egal. Vergessen wirs =)

Herr_D · 19.02.2009

AW: DIV aautmatisch zentrieren?

whoooups @paulileinchen... hätte ich gewußt, dass du

nicht verstehst, hätte ich doch gleich meine Samthandschuhe ausgepackt... lies dir mal durch und überprüfe, ob du nicht zu sehr auf dem Beziehungsohr hörst... :lol:

Kritik an deinem Code?
Das ist veraltetes html... in Zeiten von CSS sollte man auch CSS einsetzen... wenn du nur mit einem div arbeiten willst, dann versuch mal meine Signatur... dass der von mir gepostete Weg nur bei festen Größen geht(Variablen mit % funzen allerdings auch

) , stimmt allerdings... da die Aufgabenstellung jedoch Minimaltext war, kann man mit dem Dilemma wohl leben....

Was du mit deinem html völlig vernachlässigst, ist die Zentrierung in der Vertikalen... von daher trifft dein Code gerade mal die Hälfte der Aufgabe...

@JensenJR

Was du dort gepostet hast ist so'n Übergangscode von Leutchen, die am Umlernen sind... keine Bange solche Seiten hab ich auch am Start, weil ich manchmal zu faul bin funktionierende Webseiten umzuschreiben...

Wenn ich was neu mache, dann richtig nach den gültigen Webstandards (inklusive validem (x)html und css)