Du bist nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: WebStyleBoard. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

1

Samstag, 18. Januar 2003, 22:42

Elemente mittels CSS zentriert ausrichten

Wie kann ich Elemente wie z.b. TABLE oder DIV mittig ausrichten? Ich suche die CSS-Variante für z.b. <table align="center">, was ja bedeutet dass die tabelle mittig ausgerichtet ist (und nicht der Inhalt; soll heißen ich suche nicht nach text-align)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »marvin« (18. Januar 2003, 22:43)


2

Sonntag, 19. Januar 2003, 08:46

Das geht so:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<style type="text/css">
div.center {
margin-left: auto;
margin-right : auto;
width: 80%; /* Wichtig, bei div-Elemente immer auch eine Breitenangabe machen,
da das div-Element normalerweise immer 100% breit ist und dann bringt es nichts,
es zu zentrieren */
border: 1px solid black; /* Nur um zu zeigen, dass das Element wirklich zentriert ist */
}
table.center {
margin-left: auto;
margin-right : auto;
border: 1px solid black; /* Nur um zu zeigen, dass das Element wirklich zentriert ist */
}
</style>
</head>
<body>
<div class="center">Test</div>

<table class="center"><tr><td>Test</td></tr></table>
</body>
</html>
Signatur von »Darii« Against TCPA - TCPA heißt Freiheit verlieren
D.A.R.I.I.: Digital Artificial Replicant Intended for Infiltration

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »memowe« (7. April 2003, 17:47)


3

Sonntag, 19. Januar 2003, 13:12

ich danke dir. hatte es irgendwo schonmal gelesen, nur konnte mich gestern beim besten willen nicht entsinnen wo. :)

4

Sonntag, 19. Januar 2003, 13:53

Achtung: soviel ich weiß, beherrscht der IE das nur in seinem Standards compliance Modus. Also unbedingt korrektes (X)HTML verwenden. :)

mem

5

Donnerstag, 23. Januar 2003, 20:24

Seltsam... Habe ich gemacht, trotzdem funktioniert es im Internet Explorer mal wieder nicht.

6

Donnerstag, 23. Januar 2003, 22:14

... am sichersten ist es, den CSS-Befehl und align="center" parallel anzuwenden - dann wird's auf alle Fälle zentriert. ;)

7

Freitag, 24. Januar 2003, 08:12

Zitat

Original von DukeXP
... am sichersten ist es, den CSS-Befehl und align="center" parallel anzuwenden
Es gibt keine CSS-Eigenschaft, die align heißt. Und Befehle schon garnicht. Was Du meinst, ist text-align und das funktioniert nur mit Inlineelementen. Das ist etwas anderes als das gewünschte.

mem

8

Freitag, 24. Januar 2003, 08:29

Nachtrag: es geht also doch, der IE muss halt standards compliance getriggert sein. Ich habe etwas gegoogled und das hier gefunden: http://www.fractatulum.de/fraccss/sample/layout7a.htm (Ich glaube dem Autor mal, dass das im IE funktioniert, überprüfen kann ich es selber leider nicht. ;))

HTH! :)
mem

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »memowe« (24. Januar 2003, 08:30)


9

Freitag, 24. Januar 2003, 15:36

mit meinem 5.5er funktioniert es leider nicht.

10

Freitag, 24. Januar 2003, 15:53

Wenn man also kompatibel zu WinDOSen mit IE sein will, muss man wohl oder übel

Quellcode

1
2
3
<div align="center>
...
</div>
verwenden. Dann ist aber aus mit Strict. Das Attribut align ist nur Transitional. :(

mem

EDIT: Die Frage ist noch offen. Wir arbeiten daran. Bitte diesen Beitrag noch mit Vorsicht genießen.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »memowe« (25. Januar 2003, 00:07)


11

Freitag, 24. Januar 2003, 18:29

Zitat

Original von memowe

Zitat

Original von DukeXP
... am sichersten ist es, den CSS-Befehl und align="center" parallel anzuwenden
Es gibt keine CSS-Eigenschaft, die align heißt. Und Befehle schon garnicht. Was Du meinst, ist text-align und das funktioniert nur mit Inlineelementen. Das ist etwas anderes als das gewünschte.

mem


... was ich damit eigentlilch sagen wollte: kombiniere doch einfach HTML- und CSS-Zentrierung.

12

Samstag, 25. Januar 2003, 00:18

OK, mit einem Würgaround geht es auch mit marvs merkwürdigem IE 5.5. Im Quelltext von http://www.fractatulum.de/fraccss/sample/layout7.htm seht Ihr, dass das zu zentrierende Block-Element im BODY liegt, für den ein text-align:center definiert wurde. Das darf zwar eigentlich garnicht funktionieren, tut es aber. Naja, jetzt habt Ihr einen hypschen Würgaround für Onkel IE und das Problem sollte gegessen sein. ;)

Gute Nacht! :)
mem

13

Sonntag, 26. Januar 2003, 12:14

war zwar in #html.de schon geklärt, aber ich sage auch hier nochmal dankeschön. es ist übrigens nicht "marvs komischer ie5.5" ;-) ich benutze selbst nur mozilla; den internetexplorer nur zum testen der kompabilität. nur so als bemerkung am rande :)

14

Sonntag, 26. Januar 2003, 12:23

Zitat

Original von marvin
es ist übrigens nicht "marvs komischer ie5.5" ;-)
Jaja, red Dich nur raus... Kleinweich-Kuschler. :D

Zitat

ich benutze selbst nur mozilla;
Guter Versuch. Aber ob Du damit das Image wiederherstellen kannst? :rolleyes:

Zitat

den internetexplorer nur zum testen der kompabilität.
Sicherlich. Zelebriere mal die wahre Enthaltsamkeit! Bei mir läuft "marvs komischer ie" garnicht. Darum muss ich auch immer wieder fluchen, wenn ich beim nachträglichen Testen bei anderen Leuten feststellen muss, was der jetzt schon wieder falsch interpretiert. Naja, bleibt zu hoffen, dass die Brauser sich wieder mehr den Standards annähern. Und damit ist der Fred ja auch gegessen.

me"Hab mich wieder lieb, marv!"mowe. ;)

15

Dienstag, 1. Juli 2003, 09:27

Nachtrag: das ist eine so oft gestellte Frage, dass man den Fred schnell wiederfinden muss. Daher als "wichtig" markiert.

Mirko :)

16

Freitag, 22. August 2003, 12:26

da ich mich auch gerade mit dem Problem rumschlagen tun tu ... hab ich folgendes bei SelfHTML gefunden:

Zitat

Wenn Sie eine Tabelle zwar linksbündig oder rechtsbündig ausrichten wollen, aber zugleich verhindern wollen, dass nachfolgende Inhalte um die Tabelle fließen, dann schließen Sie die gesamte Tabelle in ein allgemeines Blockelement (div) ein und richten Sie dieses mit align= oder einer entsprechenden CSS-Eigenschaft (style="text-align:") aus.


klingt doch irgendwie logisch ... ich also ran ans Werk:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
<div style="text-align:center; width:100%">
<table>
 <tr>
  <td><img src="images/on.gif" border=0></td>
  <td class="sfont">neue Beiträge    </td>
  <td><img src="images/off.gif" border=0></td>
  <td class="sfon">keine neuen Beiträge    </td>
  <td><img src="images/offclosed.gif" border=0></td>
  <td class="sfont">Forum ist geschlossen</td>
 </tr>
</table>
</div>

und was soll ich sagen ... Firebird lässt die Tabelle knallhart links .... :(
Also kann mir einer flüstern, was daran nu für den Firebird nicht logisch ist ?
Signatur von »TheNobody Style«

17

Freitag, 22. August 2003, 12:46

Zitat

Original von TheNobody Style
Firebird lässt die Tabelle knallhart links .... :(
Also kann mir einer flüstern, was daran nu für den Firebird nicht logisch ist ?


hi,
das liegt zum einen daran, daß sich bei 100% breite nichts mehr zentrieren läßt; zum anderen gehört der firebird zu den browsern, die sich an den standard halten und 'text-align' nur auf inline-elemente anwenden. ergo sollten in deinem beispiel - sofern nicht über css anders definiert - nur die images und texte in der tabelle über die "vererbung" zentriert werden.
falls es immer noch nicht klar sein sollte, vielleicht noch 'ne kurze zusammenfassung:
http://www.1ngo.de/web/zentrierung.html
gruß
Ingo

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Ingo« (22. August 2003, 12:51)


18

Freitag, 22. August 2003, 13:18

ergo ...
was nicht geht wird brutalst passend gemacht:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
<div style="text-align:center">
<table style="margin:auto;text-align:right">
 <tr>
  <td><img src="images/on.gif" border=0></td>
  <td class="sfont">neue Beiträge    </td>
  <td><img src="images/off.gif" border=0></td>
  <td class="sfon">keine neuen Beiträge    </td>
  <td><img src="images/offclosed.gif" border=0></td>
  <td class="sfont">Forum ist geschlossen</td>
 </tr>
</table>
</div>


Das ist wirklich nen Würgaround schlechthin und funzt :hupferl:
Signatur von »TheNobody Style«

19

Dienstag, 15. Juni 2004, 10:06

Block Elemente zu zentrieren ist doch nicht so sonderlich schwer, und eine Kompatibilität zu IE5, IE6, Mozilla und Opera kann man auch herstellen. Das geht sogar mit validem XHTML 1.0 Strict.

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Horizontale Zentrierung</title>
    </head>
    <body style="text-align:center;">
        <p style="width:10em; margin:auto; text-align:left;">
            --- Inhalt ---
        </p>
    </body>
</html>


Normal sollte das wunderbar mit margin:auto; funktionieren. Das klappt auch im IE6, wenn man die XML Deklaration weglässt. Da die nicht zwingend notwendig ist, kann man das auf jeden Fall schonmal so machen. Um jetzt für den IE5 noch das Ergebnis zu erreichen nutzt man einen Bug aus. Der IE5 zentriert mit text-align:center; auch block Elemente. Deshalb wenden wir das auf den <body> an und das nun zentrierte Element bekommt text-align:left; damit darin wieder alles schön linksbündig ausgerichtet ist.

Eine Beispieldatei kann man hier finden: www.frixon.de/tuts_ex/hcenter.html

Mfg Frixon

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »FriXon« (15. Juni 2004, 10:08)


20

Dienstag, 15. Juni 2004, 10:39

also da bleib ich lieber bei der meinigen Variante, da den body auf center zu setzen nicht wirklich fetzt ... weil du dann alle Elemente, welche nicht mittig sein sollen, extra auf align=left bauen musst. :)

PS: mit korrigierten IMG-Tags ist auch der meinige Code oben valides XHTML-Strict ;)
Signatur von »TheNobody Style«