|
|||
CSS-Table vs Faux-Columns
Hallo,
da ich eine CSS-Auszeit hatte bin ich mit meinen KnowHow ein wenig unsicher geworden, deshalb hätte ich gerne zu folgendem Code negativen Feedback. Ziel ist die Umsetzung einer CSS-Table, da dies mit dem IE leider noch nicht möglich ist, habe ich für diesen UA mittels entsprechenden Conditional Comments eine echte (X)HTML-Table eingesetzt. Irgendwie zu einfach (?!) TEST-Case: Code:
<!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" xml:lang="de-DE" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>localhost :: TEST-Case</title> <style type="text/css" media="screen"> /*<![CDATA[*/ * { margin: 0; padding: 0; /* Tabellen */ border-collapse:collapse; border-spacing: 0; } html[xmlns^="http"] { overflow-y: scroll; } html, body { color: #000000; background: transparent; line-height: 1.45; } body { font-size: 100.01%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } /* ------------------------- */ #wrap { display: table; width: 95%; margin: 1em auto; border: 1px solid #000000; background-color: #FFFFFF; } table.wrap { width: 100%; } #content, td.content, #column, td.column, #beside, td.beside { display: table-cell; vertical-align: top; } #content, td.content { background-color: #CCCCCC; } #column, td.column { width: 10em; background-color: #2299FF; } #beside, td.beside { width: 20em; background-color: #FF9922; } div.spacer { height: 5em; background-color: #FFEE00; } p { margin: 1em; font-size: .8em } /*]]>*/ </style> <style type="text/css" media="print"> /*<![CDATA[*/ #wrap, table.wrap { width: 100%; } #column, td.column, #beside, td.beside { display: none; } /*]]>*/ </style> </head><body><div id="wrap"> <!--[if lte IE 6]> <table class="wrap"><tr><td class="content"> <![endif]--> <div id="content"> #content <div class="spacer">height: 5em;</div> <p> Da der IE leider kein [display: table;] versteht, ich aber auf eine CSS-Table angewiesen bin, habe ich mir den hier gezeigten Weg über CC gewählt. Ob der IE7 CSS-Tables können wird ist mir auch noch nicht klar! Ziel ist es tatsächlich gleich Höhe Spalten zu erreichen. </p> <p> In dieser SPALTE wird der Inhalt sein, der Inhalt der auch gedruckt werden soll. Die beiden anderen Spalten sind für den Druck nicht relevant. </p> </div> <!--[if lte IE 6]> </td><td class="column"> <![endif]--> <div id="column"> #column <div class="spacer" style="height: 8em;">height: 8em;</div> textfluss.... .... </div> <!--[if lte IE 6]> </td><td class="beside"> <![endif]--> <div id="beside"> #beside <div class="spacer" style="height: 32em;">height: 32em;</div> textfluss.... .... </div> <!--[if lte IE 6]> </td></tr></table> <![endif]--> </div></body></html>
__________________
</ulle> |
Sponsored Links |
|
||||
Zitat:
Angeregt durch das CSS-Dropdown-Menü von Stu Nicholls hatte ich mir daher auch schonmal eine vertikale Zentrierung überlegt, die ohne jegliches Zusatz-Markup auskommt (d.h. das das zentrierte Element ist das einzige innerhalb von <body>). Nur der IE bekommt zwei kurze CCs im body, sowie natürlich die übliche "CSS-Extrawurst". Der Vorteil bei dieser Methode ist, daß man die Höhe des zentrierten Elementes nicht kennen muß; es wird völlig unabhängig von seiner Höhe vertikal zentriert. Erfolgreich getestet in Gecko ab Netscape 7.1, Opera ab 7.2, IE ab 5.0 und Safari. Die CCs habe ich rot markiert, was etwas ungewohnt aussieht, aber das übliche Grün ist ja bereits vergeben Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Zentrierung</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } html { display: table; border-collapse: collapse; } body { display: table-cell; vertical-align: middle; } div { height: 200px; width: 200px; background: gray; color: black; margin: 0 auto; } </style> <!--[if IE]> <style type="text/css"> table { height: 100%; width: 100%; border-collapse: collapse; } td { vertical-align: middle; text-align: center; } div { text-align: left; } </style> <![endif]--> </head> <body> <!--[if IE]><table><tr><td><![endif]--> <div>text</div> <!--[if IE]></td></tr></table><![endif]--> </body> </html> Geändert von heiko_rs (26.08.2006 um 13:10 Uhr) |
Sponsored Links |
|
|||
@heiko_rs
Sicher die Möglichkeiten von [display: table/table-cell] sind mir schon bewußt! Mir geht es hierbei um den Zusatz-Markup für den IE, bzw. welchen Pferdefuß ich mir mit diesem Konstrukt einhandeln könnte.
__________________
</ulle> |
|
||||
Zitat:
Übrigens: Deinen verlinkten Post kannte ich nicht, da habe ich dann ja "das Rad neu erfunden" (zumindest den Teil für die guten Browser) Zitat:
Nur schön oder elegant sind solche CC-Lösungen im Markup natürlich nicht, und daher bin ich solchen Lösungen gegenüber auch immer etwas skeptisch, zumindest wenn es Alternativen gibt, die komplett ohne Zusatz-Markup auskommen. Aber das muß jeder für sich selbst entscheiden. Nur rein technische Nachteile gibt es nicht. Geändert von heiko_rs (26.08.2006 um 13:50 Uhr) |
|
|||
@heiko_rs;
Danke Dir, Dein Statment macht mir meine Entscheidung einfacher. Zitat:
Ich bin der letzte der zusätzliche Markup befürwortet, aber in diesem Fall komme ich nicht umhin, denn anders wäre der variable Content-Bereich (links) nicht so einfach möglich, ausgehend davon dass die Navi rechts einen Platz finden soll und alles natürlich Schriftgrößenkompatibel (Spaltenbreite) verbunden mit Background-Images usw... Nicht zu vergessen ist die Markup Reihenfolge!! Bleiben mir 2 Fragen: Wer weiß wie der IE7 mit [display: table / table-cell] verfahren wird? Und was macht der IE-Mac mit den CCs, nicht dass ich den IE-Mac unterstützen will, aber den zusätzliche Markup soll der Mac nun auch nicht darstellen. Und das Verhalten mit den CCs und dem IE-Mac ist mir schlicht entfallen.
__________________
</ulle> |
|
|||
IE-Mac interpretiert keine CCs (Yes)
d.h. es ist ein reine IE-Win Prothese !! Tipp: Übrigens lassen sich auch sehr gut Listen-Elemente zu CSS-Tables verarbeiten, und diverse andere float/inline/line-height Problemchen umgehen. Bleibt nur noch das Thema IE7
__________________
</ulle> |
|
|||
Zitat:
http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx Robin |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
table in css | Don Roberto | CSS | 3 | 08.12.2009 10:45 |
Myspace Fehler zwischen FF und IE? | soren.designs | (X)HTML | 1 | 05.09.2009 17:02 |
dynamische Höhe bei div + Mindesthöhe mit faux columns? | marven | CSS | 4 | 09.04.2008 22:46 |
Faux Columns - keine Lösung? | D3mOn | CSS | 9 | 23.09.2007 17:52 |
Faux Columns advanced | Swoop | CSS | 7 | 21.05.2005 14:58 |