tabelle über CSS zentrieren ua.

[Stefan]

hi

wahrscheinlich ist dies schon längst im selfhtml 8.0 beschrieben aber ich kann es einfach nicht finden

wie kann ich eine tabelle über CSS zentrieren?
dass ich einfach center oder middle schreiben muss

eine anfrage: wie kann ich so eine offline suche wie bei selfhtml 8.0 erzeugen? +markier-button der treffer

vielen dank!!!!!

mfg
Stefan

[Ilia]

Merkwürdig, dass dir noch kein einziger der Professoren hier keine Antwort gegeben hat. Na ja, hier der Link [link]http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm[/link] Vielleicht ist das nicht das was du meinst, aber ich hatte trotzdem das Bedürfnis, gerade jetzt jemandem zu Helfen (ich habe das eigentlich sehr oft, und nur dann , wenn das auch sachlich ist, im Vergleich zu manchen Professoren {Ja ja, es geht immer noch um Netscape, ich vergesse nichts}). Viele Grüsse von Ilia

P.S. Würde mich freuen, wenn du mal eine Nachricht hinterlässt, ob das dir auch geholfen hat.

[Thomas J.S.]

Hallo,

wie kann ich eine tabelle über CSS zentrieren?
dass ich einfach center oder middle schreiben muss

in deinem css:
div.tabelle { text-align:center; }

in deiner html

<div class="tabelle">
<table>...</table>
</div>

eine anfrage: wie kann ich so eine offline suche wie bei selfhtml 8.0 erzeugen?

muss du Oliver Garcia fragen;
http://selfhtml.teamone.de/navigation/suche/unten.htm#kontakt

grüße
thomas

[Stefan Einspender]

Hallo Thomas,

div.tabelle { text-align:center; }

in deiner html

<div class="tabelle">
<table>...</table>
</div>

eigentlich wollte ich es eben unter Ilia's Posting schreiben, das
text-align hier nicht funktioniert und auch nicht korrekt ist, aber
jetzt schreibst Du es auch?!

siehe auch: http://www.w3.org/TR/REC-CSS2/text.html#propdef-text-align

Viele Grüße,
Ste*erstaunt*fan

[Thomas J.S.]

Hallo Stefan,

eigentlich wollte ich es eben unter Ilia's Posting schreiben, das
text-align hier nicht funktioniert und auch nicht korrekt ist, aber
jetzt schreibst Du es auch?!

ja. weil es funktioniert. und weil es richtig ist.

siehe auch: http://www.w3.org/TR/REC-CSS2/text.html#propdef-text-align

ich kenne das. und? genau das steht dort was ich empfohlen habe.
der einzige was er noch machen "müsste", der tabelle eine text-align:left; vepassen:
-------
In this example, note that since 'text-align' is inherited, all block-level elements inside the DIV element with 'class=center' will have their inline content centered.

DIV.center { text-align: center }
------

falsch wäre gewesen wenn ich
table { text-align:center; } für ihn empfohlen hätte.

grüße
thomas

[Stefan Einspender]

Hallo Thomas,

ja. weil es funktioniert. und weil es richtig ist.

siehe auch: http://www.w3.org/TR/REC-CSS2/text.html#propdef-text-align

In this example, note that since 'text-align' is inherited, all block-level elements inside the DIV element with 'class=center' will have their inline content centered.

genau, der inline content der im DIV enthaltenen block-level elements
wird zentriert, aber nicht diese selbst.

"This property describes how inline content of a block is aligned"
Wenn irgendwo steht:

<div><table></table></div>

dann ist table doch weiterhin ein block-level element.

Viele Grüße,
Stefan

[Thomas J.S.]

Hallo Stefan,

<div><table></table></div>
dann ist table doch weiterhin ein block-level element.

ja.

aber genau das war, was ich den "alten" browser gutgeschrieben habe: denn sonst hätte man keine möglichkeit (so wie im opera und ns6.x jetzt der fall ist) mit css blocks zu zentrieren.

und wenn er auf strickt -valide html / xhtml besteht, dann hat er absolut keine möglichkeit mehr irgendeinen block zu zentrieren.
es sei dem mit einem großen aufwad mit javascript.

ob das so toll ist, wenn man die standards immer braw befolgt?

grüße
thomas

[Stefan Einspender]

Hallo Thomas,

denn sonst hätte man keine möglichkeit (so wie im opera und ns6.x jetzt der fall ist) mit css blocks zu zentrieren.

der Fehler ist, dass man diese Möglichkeit "ausgebaut" hat, aber zu-
gleich die Unterstützung der Alternative vergessen hat:
http://bjoernsworld.de/test/margin-auto.html

Viele Grüße,
Stefan

[Thomas J.S.]

Hallo Stefan,

denn sonst hätte man keine möglichkeit (so wie im opera und ns6.x jetzt der fall ist) mit css blocks zu zentrieren.

der Fehler ist, dass man diese Möglichkeit "ausgebaut" hat, aber zu-
gleich die Unterstützung der Alternative vergessen hat:
http://bjoernsworld.de/test/margin-auto.html

Autsch!
Bitte sowas nicht zitieren!!

Da steht:
margin: auto should center an element, see http://www.w3.org/TR/REC-CSS2/visudet.html#q6

margin:auto; heisst nichts anders als margin:0;
ich weiss nicht woher Björn seine aussage hernimmt, aber sie ist falsch.

da (http://www.w3.org/TR/REC-CSS2/visudet.html#q6)steh aber nicht vom "es sollte zentriert werden":
"If 'left' or 'right' are given as 'auto', their computed value is 0."

unter http://www.w3.org/TR/REC-CSS2/visudet.html#q17
steht: "If 'top', 'bottom', 'margin-top', or 'margin-bottom' are 'auto', their computed value is 0."

nochmal also: margin:auto; heisst nichts anders als margin:0;

Grüße
Thomas

[Jens]

Hallo Stefan,

Tach,

http://bjoernsworld.de/test/margin-auto.html
Bitte sowas nicht zitieren!!

Da steht:
margin: auto should center an element, see http://www.w3.org/TR/REC-CSS2/visudet.html#q6

margin:auto; heisst nichts anders als margin:0;
ich weiss nicht woher Björn seine aussage hernimmt, aber sie ist falsch.

bevor du falsche Aussagen verbreitest, solltest du dich damit beschaeftigen. Da steht (unter #q6 und nochmal unter #q7):

| if both margins are 'auto', their computed values are equal.

nochmal also: margin:auto; heisst nichts anders als margin:0;

nochmal falsch.

Jens

[Thomas J.S.]

Hallo Jeas,

bevor du falsche Aussagen verbreitest, solltest du dich damit beschaeftigen. Da steht (unter #q6 und nochmal unter #q7):

| if both margins are 'auto', their computed values are equal.

nochmal also: margin:auto; heisst nichts anders als margin:0;

nochmal falsch.

teilweise hast du sogar recht. ;-)
margin:auto; heisst  margin:0,X,0,X; wobei 'X' hier für auto steht.
wo du recht hast, ist dass auto hier wirklich gleich sein sollte.

allerdigs es steht nach wie vor nirgenwo geschrieben dass 'gleich' eine zentrierung bewirken sollte. gleich kann ebenso 0 wie 50% oder 100% bedeuten.

daher ist die annahme, dass margin:auto; etwas zentrieren sollte, eine irrige. offensichtlich sind auch die browserhersteller an der meinung, denn sie haben ziemlich alle 0 für auto genommen.

grüße
thomas

[Jens]

Hallo Jeas,

Tach,

| if both margins are 'auto', their computed values are equal.

teilweise hast du sogar recht. ;-)
margin:auto; heisst  margin:0,X,0,X; wobei 'X' hier für auto steht.
wo du recht hast, ist dass auto hier wirklich gleich sein sollte.

allerdigs es steht nach wie vor nirgenwo geschrieben dass 'gleich' eine zentrierung bewirken sollte. gleich kann ebenso 0 wie 50% oder 100% bedeuten.

da steht ganz genau, wie es berechnet wird:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

Was allerdings auch Björn Höhrmann nicht beachtet hat, ist folgender Satz:

| If 'width' is set to 'auto', any other 'auto' values become '0' and
| 'width' follows from the resulting equality.

Und width ist per default 'auto'.

daher ist die annahme, dass margin:auto; etwas zentrieren sollte, eine irrige. offensichtlich sind auch die browserhersteller an der meinung, denn sie haben ziemlich alle 0 für auto genommen.

kommt drauf an.

Folgendes zentriert korrekt (Unter Annahme der Standardwerte)
Mozilla und Opera können es. IE 6 (wie so vieles) nicht:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
    <title>zentriert</title>

<style type="text/css"><!--
    div {width:100%;}
    table {margin:auto;}
    --></style>
</head>

<body>
<div>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</div>
</body>
</html>

Hier sieht man, warum ein einfaches margin:auto nicht zum zentrieren eines divs reicht:
wenn nämlich div-Bereiche non-replaced elements sind, haben sie per default incl. Box usw. 100% Breite und damit ist margin:auto tatsächlich margin:0.

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
    <title>zentriert</title>

<style type="text/css"><!--
    div {margin:auto; width:20%; border:thin solid;}
    table {margin:auto;}
    --></style>
</head>

<body>
<div>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</div>
</body>
</html>

Jens

[Thomas J.S.]

Hallo Jens,

da steht ganz genau, wie es berechnet wird:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

da steht nicht mehr und weniger, als wie die gesamtbreite eines elemes berechnet wird.

wozu allerdings die ganze diskussion nun gut war:

div {width:100%;}
    table {margin:auto;}

<body>
<div>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</div>
</body>
</html>

also die antwort auf die ursprüngliche frage wurde gefunden.

grüße
thomas

[Jens]

Hallo Jens,

Tach,

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
da steht nicht mehr und weniger, als wie die gesamtbreite eines elemes berechnet wird.

da steht, warum margin-left und margin-right bei margin:auto nicht 100% sein können, wie du behauptet hast (aber das wurde ja von dir sinnentstellend weggekürzt).

Jens

[Thomas J.S.]

Hallo Jens,

Ich habe's endlich verstanden, ist in Ordnung:

Du hast das letze Wort!

Definitiv.
Endgültig.
Ein für alle Mal.

MfG
Thomas