|
|||
Darstellungsproblem tabelle zeillenhöhe xhtml vs html (styleübernahme)
Hallo,
ich wollte das Styling einer alten HTML-Seite in eine XHTML-Seite übernehmen. Folglich soltle das ganze via stylesheet designed werden. Bei Tabellen habe ich ein Problem. Die Zeilenhöhe ist in html vom standard anders als bei xhtml. line-height oder height wurde irgendwie ignoriert. Kann mir jemand sagen das Standardstyling einer Table und tr bzw. td in html ist und wie ich das gleiche Layout auf xhtml konvertiert bekomme? Habe leider bei meinem Freund google, nichts brauchbares gefunden Code ist genau der gleiche nur das <html> Tag ist anders. Ist als Sample nur eine Tabelle mit zwei Zeilen und einmal mit <p>, was m.E. korrekter sein sollte, als die 2. Zeile ohne <p> html: Code:
<html > <head> <title>html table</title> <style type="text/css"> table { color: #000066; background-color:#FFFFCE; } tr { vertical-align:middle; height:15px; } </style> </head> <body> <table> <tr> <td ><p>erste Zeile, erste Spalte</p></td> <td><p>erste Zeile, zweite Spalte</p></td> </tr> <tr> <td >zweite Zeile, erste Spalte</td> <td>zweite Zeile, zweite spalte</td> </tr> </table> </body> </html> HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>xhtml table</title> <style type="text/css"> table { color: #000066; background-color:#FFFFCE; } tr { vertical-align:middle; height:15px; } </style> </head> <body> <table> <tr> <td ><p>erste Zeile, erste Spalte</p></td> <td><p>erste Zeile, zweite Spalte</p></td> </tr> <tr> <td >zweite Zeile, erste Spalte</td> <td>zweite Zeile, zweite spalte</td> </tr> </table> </body> </html> Vielen Dank im Voraus. Geändert von SteveB (06.05.2011 um 15:51 Uhr) Grund: Beitragsinformation genauer beschrieben |
Sponsored Links |
|
||||
Zitat:
Mit "Styling" hat weder HTML noch XHTML etwas zu tun. Das ist auch in HTML so. Zitat:
Zitat:
Zitat:
Weiterhin ist ein <p> in <td> IMHO nicht sinnvoll. Eine Tabellenzelle enthält Text, keinen Absatz. gruß, take |
Sponsored Links |
|
||||
Zitat:
Ich denke, die Tabelle ist dein Problem, mehr dazu später. Zitat:
Diesen siehst du in deinem HTML-Dokument nicht, weil sich dieses im Quirksmode befindet. Da werden Sonderregeln angewendet, die für ältere Dokumente gedacht sind. Zitat:
Siehe Little Boxes Teil 1 online lesen Zitat:
Zum Thema Qirksmode siehe Der DOCTYPE-Switch und seine Auswirkungen
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
|
|||
Hey,
super, die Links helfen ungemein weiter. Vielen Dank. Konnte sie zwar nur überfliegen, werde mich dem Problem aber heute Abend widmen. So wie ich das bisher verstanden habe könnte ich das Problem via display: block; fixen um die Line-Box zu umgehen/deaktivieren was aber nach wie vor unsauber wäre, da man nicht mehr via Tabelle Layouten soll. |
|
|||
Zitat:
Zitat:
Du kannst, nachdem du dich mit dem grundwissen vertraut gemacht hast, gerne deine strukturierten Inhalte hier mal vorstellen, bevor du mit der Gestaltung beginnst. Dann geben wir gerne Verbeserungsvorschlage.
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
|
|||
Hm, stimmt display:block; hilft mir nichts.
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> </head> <body> <div class="color" style="background-color:#FFFFCE;"> <p style="height:15px; width:124px; display:block;"> <font size='-1' face='Verdana, Arial'><b><span style='mso-bidi-font-size: 13.5pt; mso-ansi-language: EN-GB' lang='EN-GB'>Bad Vilbel</span></b></font> </p> <p style="width:94px;">WE 0811</p> <p style="width:77px;">Samstag</p> <p style="width:20px;">07.</p> <p style="width:35px;">Mai.</p> <p style="width:51px;"> 10 Uhr</p> <p style="width:94px;">1 Tag</p> <p style="width:94px;">180 €</p> <p style="width:122px;">Fr 20. Mai. </p> </div> </body> </html> Ineinander verschachtelt war auch keine glorreiche Lösung und x Spans für die Einzelbereiche zu definieren kann nciht Sinn und Zweck des ganzen sein, oder? Codesample nur ohne spans: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> </head> <body> <div class="color" style="background-color:#FFFFCE;"> <p style="width:775px;"> <p style="height:15px; width:124px; display:inline;"> <font size='-1' face='Verdana, Arial'><b><span style='mso-bidi-font-size: 13.5pt; mso-ansi-language: EN-GB' lang='EN-GB'>Bad Vilbel</span></b></font> </p> <p style="width:94px;">WE 0811</p> <p style="width:77px;">Samstag</p> <p style="width:20px;">07.</p> <p style="width:35px;">Mai.</p> <p style="width:51px;"> 10 Uhr</p> <p style="width:94px;">1 Tag</p> <p style="width:94px;">180 €</p> <p style="width:122px;">Fr 20. Mai. </p> </p> </div> </body> </html> Ist p evtl. das falsche tag? Das ganze sollte eben in einer Zeile sein, aber die Abstände in Reihe von Zeilenbeginn fortlaufend in Bereiche unterteilt, die so breit sind wie die momentan im xhtml angegebenen width. Werd da grade nicht schlau, aber Tabellenlayout war ja wie gesehen und wie beschrieben auch nicht der ideale weg p generiert halt je p Tag eine neue Zeile, und das ganze sollte eigentlich auch 15px hoch sein und der text zentriert. Die letzten eben genannten Attribute habe ich bewusst gerade nciht im Style angegeben, da ich ja in den Basics noch Probleme habe Hilfe bzw. ein Tipp wäre super. Vielen Dank im Vorraus Geändert von SteveB (07.05.2011 um 00:24 Uhr) Grund: Korrektur2 |
|
|||
Hallo,
ich verstehe nicht, was auf deiner Seite wie dargestellt werden soll. Erst mal fehlen dir die Grundlagen, ansonsten würdest du z. B. auf Leerzeichen als Lückenfüller verzichten. Und dann sind HTML / CSS nicht dafür gedacht, Informationen, wie z. B. Texte, millimeter- bzw. pixelgenau zu übermitteln. Wer das machen will, muss zu einer Textverarbeitung, einem Zeichenprogramm oder ähnlichem greifen. Da hat man die volle Kontrolle über das Layout. Bei HTML muss man die recht wenigen Möglichkeiten der Strukturierung (Überschriften, Absätze, Listen, Tabellen u.s.w.) kennen und korrekt einsetzen. Danach kann mittels CSS noch etwas am Aussehen "gedreht" werden. Dabei hat man dann noch mit vielen Unwägbarkeiten zu kämpfen, die man nicht beeinflussen kann, da sie beim Besucher liegen: - Was für ein Betriebssystem nutzt der? - Welchen Browser? - Welche Auflösung? - Welche Fenstergröße? - Was für Schriftfarten sind installiert? - Nutzt der Besucher überhaupt einen Bildschirm oder ein anderes Ausgabegerät? Von daher müsste man schon wissen, was du überhaupt darstellen willst? Wenn noch weitere Angaben folgen, kann eine Tabelle durchaus das richtige Mittel sein. Tabellen sind ja nicht "schlecht", weil sie Tabellen sind, sondern nur, wenn sie zum falschen Zweck eingesetzt werden. Gruss MrMurphy |
|
|||
Im Endeffekt soll eine "Tabelle" im Contentbereich angezeigt werden, die eine Kursübersicht enthält.
Also Kurs, KursNr, Kurstermin & Beginn(hierbei sollen 3 einzelinformationen übermittelt werden - Tag - Datum - Uhrzeit), Kursdauer, Kursgebühr, Prüfungstermin und darunter die Informationen der einzelnen Kurse. Ob ich das ganze wie Fließtext mit Abständen, als Liste oder als Tabelle darstelle halte ich eigentlich für Geschmacksache, wobei Fließtext vom Markup her, am wenigsten zutrifft. Tabelle wäre am geeignetsten, aber sind mittlerweile verpönt.... Das Hauptproblem am Ende für mich ist es, dass ich zwar die width-barrierefrei angeben konnte, aber das mir die Height unglaubliche Probleme bereitet. Die Height ist daher wichtig, da das Ende der KursInformationen in Linie mit der Navigation bündig aufhören solle. Daher komm ich um eine fixe Zeilenhöhe, idealerweise bei Tabelle m.E. nicht wirklich drum herum. |
|
||||
Zitat:
Für eine zweidimensionale Übersicht von Daten ist eine Tabelle genau das richtige Mittel, manchmal sogar das einzig richtige. Zitat:
p ist ein Element, <p> und </p> sind Tags. Aber ja, p ist das falsche Element, HTML besteht aus über 70 Elementen und die meisten davon sind für einen bestimtmen Zweck sehr gut geeignet. Nebenbei: Tabellen bestehen aus bis zu 10 Elementen, von denen du bei einer sinnvollen Tabelle auch mindestens 4 bis 5 verwenden solltest. Zitat:
Vergiss zuerst die Gestaltung. Erstelle eine sinnvolle Datentabelle für deine Inhalte und sieh dann nach, was du noch zusätzlich gestalten willst. Nebenbei verhinden Pixel im IE den Textzoom, diese Maßeinheit solltest du daher nicht unbedingt bevorzugen Auch von font-Elementen rate ich dir ab. Zuerst der Inhalt. Gestaltung kommt später. Mit Hilfe der Variante Strict und dem Validator, wäre dir dieser Fehler nicht passiert Zitat:
Grundlagen durcharbeiten. Das hört man als Anfänger natürlich nicht gerne, aber wenn du dir die Zeit nimmst, wirst du in Zukunft wesentlich weniger Probleme haben. Sobald du das relativ einfach Konzept von HTML verstanden hast, kannst du sich an Fortgeschrittene CSS-Konzepte wagen.
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
|
|||
Erst einmal vielen Dank, dass du so ausführlich geantwortet hast, aber letztendlich habe ich absolut keine Informationen erhalten ob ich am Ende bei einer Tabelle die Gesamthöhe bzw. am besten die Zeilenhöhe explizit angeben kann?!
Sofern es möglich ist, wäre ich über diese Info dankbar. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
HTML mit CSS und XHTML von Kopf bis Fuß | DaBra | Offtopic | 6 | 23.12.2010 20:41 |
Barrierefreiheit: html 4.01 strict vs. xhtml | WebFreeway | Barrierefreiheit | 10 | 12.05.2009 20:14 |
HTML --> XHTML = Probleme | Dorsk51 | (X)HTML | 2 | 09.09.2004 17:36 |
HTML 4.01 ist ok, XHTML validiert und trotzdem zerschossen | Pigpen | (X)HTML | 3 | 02.09.2004 16:43 |
noch mal xhtml | Broken | CSS | 13 | 03.08.2003 22:56 |