zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS-Table vs Faux-Columns

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.08.2006, 22:07
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.08.2006, 11:22
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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>

Geändert von heiko_rs (26.08.2006 um 12:10 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.08.2006, 12:18
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

@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>
Mit Zitat antworten
  #4 (permalink)  
Alt 26.08.2006, 12:46
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.

Geändert von heiko_rs (26.08.2006 um 12:50 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 26.08.2006, 13:50
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

@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.
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 26.08.2006, 13:58
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 26.08.2006, 14:13
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #8 (permalink)  
Alt 28.08.2006, 12:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 28.08.2006, 21:32
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

@RoToRa, Danke

Na dann =>
Code:
<!--[if lte IE 7]>
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
table in css Don Roberto CSS 3 08.12.2009 09:45
dynamische Höhe bei div + Mindesthöhe mit faux columns? marven CSS 4 09.04.2008 21:46
Faux Columns - keine Lösung? D3mOn CSS 9 23.09.2007 16:52
Faux Columns advanced Swoop CSS 7 21.05.2005 13:58
faux columns und height:100% sind keine Lösungen Mambo_mango CSS 18 05.05.2005 19:08


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