Wie kann ich Blockelemente mit CSS zentriert ausrichten? Das text-align ist ja nicht für Blockelemente gedacht. Im SelfHTML wurde die Angabe gleicher Werte für margin-left und margin-right vorgeschlagen, aber dann müsste ich mich anscheinend auf eine Auflösung festlegen, und das will ich eigentlich nicht.
Danke und bis denne!
Schnoof
Hallo,
Wenn du mit Dreamweaver arbeitest, gibt es da unter CSS einen Reiter Block, in dem du verschiedenes einstellen kannst. Ist es das, was du suchst?
Gruß Alex
Wenn du mit Dreamweaver arbeitest, gibt es da unter CSS einen
Reiter Block, in dem du verschiedenes einstellen kannst. Ist
es das, was du suchst?
Nein, weil ich weder den Dreamweaver noch irgendeinen anderen WYSIWYG-Editor nutze. Ich suche direkt die CSS-Tags.
Bis denne
Schnoof
Sers,
Die Angabe von Werte für margin-left und -right sorgt nicht dafür, dass du dich auf eine Auflösung festlegen musst.
Du kannst auch prozentuale Angaben machen. z.B.:
Test div-Zentrierung
Text 
Dann passt sich das ganze deiner Auflösung an.
[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]
Hi,
margin-left:auto;
margin-right:auto;
sollte klappen.
Viele Grüße
WoDi
margin-left:auto;
margin-right:auto;
Diese Angabe soll dafür sorgen, dass die gesamte zur Verfügung stehende Breite für den Rand genutzt wird. Firefox macht dann den rechten Rand breiter als den linken, vermutlich überschreibt die zweite Zeile die erste.
War nicht ganz das, was ich suchte.
Bis denne
Schnoof
Sers,
Die Angabe von Werte für margin-left und -right sorgt nicht
dafür, dass du dich auf eine Auflösung festlegen musst.
Du kannst auch prozentuale Angaben machen. z.B.:Test div-Zentrierung
TextDann passt sich das ganze deiner Auflösung an.
Ich möchte gern ein DIV haben, das ist 900px breit und soll zentriert werden. Wenn ich dann den Rand jeweils auf 5% setze, wird der linke Rand genau 5% breit und der rechte kriegt das, was übrig ist. Wenn ich das DIV auf eine relative Breite festlege, wird es gestaucht.
Kann man es nicht richtig in CSS zentrieren oder müsste ich dann auf alte HTML-Tags/-Attribute zurückgreifen?
Danke und bis denne
Schnoof
Mmmhhhh, das sollte schon funktionieren, in allen Browsern, außer [Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]
Diese Angabe soll dafür sorgen, dass die gesamte zur Verfügung
stehende Breite für den Rand genutzt wird. Firefox macht dann
den rechten Rand breiter als den linken, vermutlich
überschreibt die zweite Zeile die erste.
Also bei mir funktioniert din div mit
width: 900px;
margin: 0 auto;
ganz gut… Das ergibt einen Block, der einer schnellen Messung nach horizontal ziemlich pixelgenau zentriert ist. Unterschiedlich breite Ränder konnte ich nicht beobachten. (Getestet in FF 1.0.4, Opera 8, Konqueror 3.3.2)
Also gut, Auszug aus der index.html:
Auszug aus dem Stylesheet:
body {background-color:#d6dffe;}
div {margin: 0px}
div.header
{background-color: #070088;
margin: 0 auto
width: 990px;
height: 106px;
position: fixed;
top: 0px;
color: #ffffff
}
Weiter unten wird kein weiterer header definiert, kann also nicht noch einmal was überschrieben werden. Wenn ich das so mache, dann hab ich in meinem Mozilla (V. 1.7.5) sowie im Firefox (V. 1.0.4) links etwa 2 px Rand, rechts dann das was übrig ist. Wenn ich für beide Ränder 5 px festlege, habe ich links die 5 px, rechts was übrig ist. Wie dem auch sei, irgendwie ist das so eh Schummelei. Ich habe gehofft, es gibt eine echte Zentrierung, sowas wie horizontal-align oder so. Warum gibt es das eigentlich nicht?
Nur so am Rande:
900px Breite? In dem Fall legst du dich doch auf eine feste
Auflösung deiner Webseite fest. Wenn sich dann nur der Rand
anpasst kann man nicht gerade von einer Seite sprechen, die
sich der Auflösung anpasst…
Es sind ein paar Grafiken drin, ganz nach den Vorstellungen meines Freundes, für den ich das mache. Und der hält 1024*768 heutzutage für Minimum-Auflösung, kleiner ist Minderheit. Und für die größeren Auflösungen soll es ordentlich zentriert sein. Es ist aber eigentlich egal, ob es nun 600 px oder 900 px wären (irgendeine feste Pixelzahl gäbe es ohnehin). Es sollte sich auch nur der Rand anpassen, ich wollte eben ein zentriertes DIV, keinen Rand.
Bis denne
Schnoof
Also gut, Auszug aus der index.html:
[snip]
div.header
{background-color: #070088;
margin: 0 auto
width: 990px;
height: 106px;
position: fixed;
top: 0px;
color: #ffffff
}
[snip]
Das Problem ist die Positionierung mittels „fixed“. Wenn du ein Element so positionierst, hat es genau wie ein „absolute“ positioniertes Element ein anderes Elternelement, was dann unter Anderem auch die Größenberechnung stört.
Wie kann ich Blockelemente mit CSS zentriert ausrichten? Das
HTML-Datei:
...
Test
...
CSS-Datei:
body{
/\*FÜR IE TEXT ZENTRIEREN, GILT EBI IE AUCH FÜR DIV\*/
text-align:center;
}
#zentriert {
/\*STANDARDMÄßIGE DIV-ZENTRIERUNG FÜR NORMALE:wink: BROWSER\*/
margin:0px auto;
width:300px;
/\*RÜCKSTELLUNG DER OBIGEN TEXT-ZENTRIERUNG\*/
text-align:left;
}
gruss Markus
Das Problem ist die Positionierung mittels „fixed“. Wenn du
ein Element so positionierst, hat es genau wie ein „absolute“
positioniertes Element ein anderes Elternelement, was dann
unter Anderem auch die Größenberechnung stört.
Das finde ich jetzt aber voll doof. Ganz verstehen tu ich’s auch nicht. Nun gut, dann müssen wir’s entweder anders machen oder linksbündig akzeptieren …
Danke
Schnoof
hi,
div.header
{background-color: #070088;
margin: 0 auto
width: 990px;
height: 106px;
position: fixed;
top: 0px;
color: #ffffff
}
wenns so drin steht, bitte noch ein Semikolon hinter die margin-Angabe.
außerdem text-align:center; Das position:fixed könnte dir bei deinem Vorhaben, wie schon gesagt einen Strich durch die Rechnug machen funktioniert im IE eh nicht (und bringt dort manchmal auch zusätzliche Schwierigkeiten - am Besten so schreiben, dass es der IE erst gar nicht einlesen kann).
Wenn nur ein header auftaucht, warum dann nicht als ID statt als Klasse?
Grüße, Dirk
wenns so drin steht, bitte noch ein Semikolon hinter die
margin-Angabe.
außerdem text-align:center; Das position:fixed könnte dir bei
deinem Vorhaben, wie schon gesagt einen Strich durch die
Rechnug machen funktioniert im IE eh nicht (und bringt dort
manchmal auch zusätzliche Schwierigkeiten - am Besten so
schreiben, dass es der IE erst gar nicht einlesen kann).
Das sieht inzwischen schon wieder alles ganz anders aus. Ja, die Semikoli vergess ich immer mal, zum Glück fällt’s mir i. a. noch auf. ;o) Und dass das fixed so seine Tücken hat, ist mir auch schon aufgefallen. Das habe ich inzwischen durch absolute ersetzt, weil es sich für diese Zwecke als eher ungünstig erwies.
Wenn nur ein header auftaucht, warum dann nicht als ID statt
als Klasse?
Gute Frage. Ich versuch mich gerade in dem Bereich. Ich hab zwar schon mal von IDs gehört, aber bislang noch nie genutzt, die Klassen sind mir geläufiger.
Es ist das erste Mal, dass ich vollständig auf Frames und Layout-Tabellen verzichte. Derzeit klappt es nicht so, wie ich es mir dachte. Der IE haut mir einen riesigen Rand links rein, der Mozilla packt alles lieber nach links (was mir lieber ist als IE’s breiter Rand).
Tja, ich muss noch ein bisschen was lernen.
Bis denne
Schnoof
Hallo,
Wenn nur ein header auftaucht, warum dann nicht als ID statt
als Klasse?Gute Frage. Ich versuch mich gerade in dem Bereich. Ich hab
zwar schon mal von IDs gehört, aber bislang noch nie genutzt,
die Klassen sind mir geläufiger.
Na es funktioniert ja im Prinzip genauso nur das Elemente mit ID nur einmal im Dokument auftauchen dürfen (man markiert sozusagen zentrale Elemente)
Es ist das erste Mal, dass ich vollständig auf Frames und
Layout-Tabellen verzichte. Derzeit klappt es nicht so, wie ich
es mir dachte. Der IE haut mir einen riesigen Rand links rein,
der Mozilla packt alles lieber nach links (was mir lieber ist
als IE’s breiter Rand).
Tja du weißt ja wo du fragen kannst Aber ich vermute Tabellen LAyout hast du auch nicht an einem Tag gelernt.
Gruß, Dirk