|
HTML - Tabellenausrichtung mit CSS
Hallo
ich habe folgendes Problem: Nun habe ich jedoch folgendes Problem: Unter Mozilla Firefox sind die Tabellen durch die CSS-Eigenschaft "margin: auto" mittig auf dem Bildschirm ausgerichtet, unter dem InternetExplorer jedoch nicht. Das HTML-Attribut "align" möchte ich nicht benutzen, da meine Website HTML4.01 Strict valid sein soll. Wie kann ich es nun einrichten, dass die Tabellen auch unter IE mittig angezigt werden? :gruebel: Gruß engel90 ----------------------------------------------------------------------------------------- Der Quellcode für meine Website: (  Link)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>Informatik Grundkurs</title> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <meta name="author" content="Stefan Engelhardt"> </head> <body style="background-color: #FFFFFF"> </p> <table cellpadding="2" cellspacing="0" border="0" style="width: 50%; margin: auto"> <tr align="right" valign="middle"> <th><span style="font-size: 20px; color: #000000; font-family: Courier New">Delphi Projects - Informatik Grundkurs</span></th> </tr> </table> <table cellpadding="2" cellspacing="0" border="0" style="width: 50%; margin: auto"> <tr style="height: 20px"> <th> </th> <th style="width: 10px"> </th> <th></th> <th style="width: 10px"> </th> <th style="width: 50px" align="right"> </th> </tr> <tr style="height: 2px"> <td style="background-color: #000000"> </td> <td style="width: 10px; background-color: #000000"> </td> <td style="background-color: #000000"> </td> <td style="width: 10px; background-color: #000000"> </td> <td style="width: 50px; background-color: #000000" align="right"> </td> </tr> <tr style="height: 5px"> <td> </td> <td> </td> <td> </td> <td> </td> <td align="right"> </td> </tr> <tr> <td><span style="font-size: 14px; color: #000000; font-family: Courier New">editor.zip</span></td> <td> </td> <td><span style="font-size: 14px; color: #000000">Einfacher Texteditor (Nach Vorbild des "Editors" von Micosoft)</span></td> <td> </td> <td align="right"><span style="font-size: 14px; color: #000000">[url="data/editor.zip"]766KB[/url]</span></td> </tr> <tr> <td><span style="font-size: 14px; color: #000000; font-family: Courier New">taschenrechner.zip</span></td> <td> </td> <td><span style="font-size: 14px; color: #000000">Einfacher Taschenrechner mit Standard-Funktionen</span></td> <td> </td> <td align="right"><span style="font-size: 14px; color: #000000">[url="data/taschenrechner.zip"]595KB[/url]</span></td> </tr> <tr> <td><span style="font-size: 14px; color: #000000; font-family: Courier New">wuerfelspiel.zip</span></td> <td> </td> <td><span style="font-size: 14px; color: #000000">Wuerfelspiel</span></td> <td> </td> <td align="right"><span style="font-size: 14px; color: #000000">[url="data/wuerfelspiel.zip"]486KB[/url]</span></td> </tr> <tr> <td><span style="font-size: 14px; color: #000000; font-family: Courier New">muster.zip</span></td> <td> </td> <td><span style="font-size: 14px; color: #000000">Programm zur Erstellung von Mustern aus einzelnen Zeichen (Uebung zur Anwendung Schleifen)</span></td> <td> </td> <td align="right"><span style="font-size: 14px; color: #000000">[url="data/muster.zip"]475KB[/url]</span></td> </tr> <tr> <td><span style="font-size: 14px; color: #000000; font-family: Courier New">messwerte.zip</span></td> <td> </td> <td><span style="font-size: 14px; color: #000000">Programm zur Auswertung von Messwerten (Durchschnitt, Realtiver Fehler, Absoluter Fehler)</span></td> <td> </td> <td align="right"><span style="font-size: 14px; color: #000000">[url="data/messwerte.zip"]435KB[/url]</span></td> </tr> <tr> <td><span style="font-size: 14px; color: #000000; font-family: Courier New">minigolf_v1.0.zip</span></td> <td> </td> <td><span style="font-size: 14px; color: #000000">Programm zur Auswertung von Minigolfturnieren</span></td> <td> </td> <td align="right"><span style="font-size: 14px; color: #000000">[url="data/minigolf_v1.0.zip"]528KB[/url]</span></td> </tr> <tr> <td><span style="font-size: 14px; color: #000000; font-family: Courier New">minigolf_v2.0.zip</span></td> <td> </td> <td><span style="font-size: 14px; color: #000000">Programm zur Auswertung von Minigolfturnieren mit der Möglichkeit die Turniere in XML-Dateien zu speichern/laden</span></td> <td> </td> <td align="right"><span style="font-size: 14px; color: #000000">[url="data/minigolf_v2.0.zip"]545KB[/url]</span></td> </tr> <tr> <td><span style="font-size: 14px; color: #000000; font-family: Courier New">xml.pas</span></td> <td> </td> <td><span style="font-size: 14px; color: #000000">Delphi-Unit mit Befehlen zum Lesen und Schreiben in XML Dateien</span></td> <td> </td> <td align="right"><span style="font-size: 14px; color: #000000">[url="data/xml.pas"]11KB[/url]</span></td> </tr> <tr> <td><span style="font-size: 14px; color: #000000; font-family: Courier New">compare.zip</span></td> <td> </td> <td><span style="font-size: 14px; color: #000000">Programm zum einfachen Vergleichen von 2 Bitmaps (Gibt die Anzahl der unterschiedlichen Pixel an, Bitmaps muessen die gleiche Groeße haben)</span></td> <td> </td> <td align="right"><span style="font-size: 14px; color: #000000">[url="data/compare.zip"]420KB[/url]</span></td> </tr> <tr> <td><span style="font-size: 14px; color: #000000; font-family: Courier New">data.zip</span></td> <td> </td> <td><span style="font-size: 14px; color: #000000">Programm zum erstellen von bis zu 2Mrd. zufaelliger Zahlen (z.B. Zum Testen der Geschwindigkeit von Sortieralgorithmen)</span></td> <td> </td> <td align="right"><span style="font-size: 14px; color: #000000">[url="data/data.zip"]425KB[/url]</span></td> </tr> </table> <table cellpadding="2" cellspacing="0" border="0" style="width: 50%; margin: auto"> <tr align="right" valign="middle"> <th><span style="font-size: 10px; color: #000000">Powerd by Stefan Engelhardt © 2007</span></th> </tr> </table> </p> </p> <table cellpadding="2" cellspacing="0" border="0" style="width: 50%; margin: auto"> <tr align="center" valign="middle"> <th> <span style="font-size: 10px"> Der Autor dieses Programms haftet nicht für Schäden an Soft- oder Hardware oder Vermögensschäden, die durch das Benutzen des Programms entstehen, es sei denn diese beruhen auf einem grob fahrlässigen oder vorsätzlichen Handeln des Autors, seiner Erfüllungsgehilfen oder seiner gesetzlichen Vertreter. Für Schäden an der Gesundheit, dem Körper oder dem Leben des Nutzers haftet der Autor uneingeschränkt. Ebenso haftet er für die Verletzung von Pflichten, die zur Erreichung des Vertragszwecks von besonderer Bedeutung sind (Kardinalspflichten). </span> </th> </tr> </table> </body> </html> |
Re: HTML - Tabellenausrichtung mit CSS
Hallo,
wenn sich der IE an die Standards halten würde, wärst du damit sicherlich auf dem richtigen Weg... Gibt da leider nicht viele Möglichkeiten, aber eine ist, deine komplette Layout Tabelle in eine weitere, Ein-Zellige Tabelle zu packen, und diese auf 100% Bildschirmbreite zu strecken, jedoch im td Tag das align Attribut auf center zu setzten. In selbigem ist das align Attribut bis XHTML 1.1 erlaubt. Eine weitere Möglichkeit wäre es, dem IE ein paar neue Tricks beizubringen, mit beispielsweise der IE7 JavaScript Bibliothek http://dean.edwards.name/IE7/, welche, wenn ich mich Recht erinnere, unter anderem diesen CSS Verarbeitungsfehler behebt. Leider ist die Entwicklung von diesem Projekt scheinbar eingeschlafen...Btw, solltest du gerade bei der Verwendung bzw. der Auslieferung einer HTML Datei im Strict Standard auf Tabellenlayouts verzichten, da diese, unter Umständen verschieden dargestellt werden. |
Re: HTML - Tabellenausrichtung mit CSS
ok danke :thumb: :dp:
ich werd alles in eine große tabelle packen ^^ |
Re: HTML - Tabellenausrichtung mit CSS
Hallo,
Tabelle ist schlecht, probiers erstmal mit "text-align: center;" fürs elternelement aus. das ist allemal besser als ne große tabelle zu bauen. |
Re: HTML - Tabellenausrichtung mit CSS
Welche IE-Version willst du unterstützen? Mittige Ausrichtung mit margin:auto geht im IE mindestens seit Version 6 - allerdings nicht im Quirks-Modus. Und in den schaltet der IE, wenn in der ersten Zeile des Dokuments nicht die (richtige) Doctype-Definition steht.
Also: Kommentar in der ersten Zeile entfernen und staunen ;-) |
Re: HTML - Tabellenausrichtung mit CSS
Zitat:
Warum Layout mit Tabellen dumm ist …Zitat:
Und um dein Problem zu lösen: CSS4YOU: Wird vor dem <!DOCTYPE> ein Kommentar oder eine XML-Angabe eingefügt, so schaltet der IE immer in den Quirks-Modus. Es reicht also, den Kommentar in der allerersten Zeile zu entfernen. Zitat:
text-align nur den Text und anderen Inhalt in einem Element aus, nicht die Elemente selbst. |
Re: HTML - Tabellenausrichtung mit CSS
Zitat:
|
Re: HTML - Tabellenausrichtung mit CSS
Code:
wird bei mir im Fx und im IE korrekt angezeigt. Voraussetzung ist natuerlich, dass du deine Seite nicht im Quirks-Modus laufen hast, was bei dir allerdings der Fall ist. Nimm mal den einleitenden Kommentar raus, und sorg dafuer dass der DOCTYPE ganz am Anfang des Dokuments steht, dann passts auch.
<table style="width:20%;margin:auto;"...>...
Greetz alcaeus |
Re: HTML - Tabellenausrichtung mit CSS
Zitat:
|
Re: HTML - Tabellenausrichtung mit CSS
@Thorben77: Dein Link warum Layout mit Tabellen schlecht ist, ist recht pauschal. Gepaart mit PHP (oder anderen Scriptsprachen) wird nicht einmal Inhalt mit Layout vermischt (auf Programmiererebene) denn Tabelleninhalte können dynamisch von anderen Orten geladen werden. Vielleicht sollte man zu dem Thema mal einen eigenen Thread aufmachen (denn ich denke so ziemlich alle Argumente kann man entkräften bzw. durch Gegenargumente kann man auch das FÜR hervor heben)
|
| Alle Zeitangaben in WEZ +1. Es ist jetzt 20:03 Uhr. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz