XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS-Table vs Faux-Columns (http://xhtmlforum.de/showthread.php?t=41565)

ulle 25.08.2006 22:07

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>


heiko_rs 26.08.2006 11:22

Zitat:

Zitat von ulle
Irgendwie zu einfach (?!)

Könnte man denken, aber es ist tatsächlich so einfach ;) Die Möglichkeiten mit display: table/table-cell sind erstaunlich, und ausschließlich der IE macht dabei einen Strich durch die Rechnung.

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>


ulle 26.08.2006 12:18

@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.

heiko_rs 26.08.2006 12:46

Zitat:

Zitat von ulle
die Möglichkeiten von [display: table/table-cell] sind mir schon bewußt!

Habe ich auch nicht bezweifelt ;) Ich wollte eher darauf hinaus, daß das einzige Problem bei display: table/table-cell halt der IE ist (was Du ja auch weißt), also denkt man halt manchmal über derartige Lösungen nach (siehe o.g. DD-Menü).

Ü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:

Zitat von ulle
Mir geht es hierbei um den Zusatz-Markup für den IE, bzw. welchen Pferdefuß ich mir mit diesem Konstrukt einhandeln könnte.

Hatte ich auch so verstanden, und wie ich bereits schrieb, ich sehe keinen Pferdefuß. Und wo sollte der auch sein? Alle Browser ignorieren die CCs, während der IE "glücklich" mit ihnen ist, also ist doch alles okay. Ich binde Flash (wenn's denn mal verlangt wird) auf ähnliche Weise ein; der IE 5.x bekommt einen CC mit classid (ohne die er Flash u.U. nicht anzeigt).

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.

ulle 26.08.2006 13:50

@heiko_rs;

Danke Dir, Dein Statment macht mir meine Entscheidung einfacher.

Zitat:

Zitat von heiko_rs
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.

Alternativen? Nicht in diesem Fall (glaube mir)!!

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.

heiko_rs 26.08.2006 13:58

Zitat:

Zitat von ulle
Alternativen? Nicht in diesem Fall (glaube mir)!!

Okay ;) Du hast sicher bereits alles probiert, bevor Du diese Lösung in Erwägung zogst.

Zitat:

Zitat von ulle
Ich bin der letzte der zusätzliche Markup befürwortet

Ich weiß ;) (Und ich gehöre auch zu diesen "Letzten" ;))

Zitat:

Zitat von ulle
Und was macht der IE-Mac mit den CCs

Nix, außer sie zu ignorieren ;)

ulle 26.08.2006 14:13

IE-Mac interpretiert keine CCs :idea: (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

RoToRa 28.08.2006 12:16

Zitat:

Zitat von ulle
Bleibt nur noch das Thema IE7

Nein er kann es nicht:

http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx



Robin

ulle 28.08.2006 21:32

@RoToRa, Danke

Na dann =>
Code:

<!--[if lte IE 7]>


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:28 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019