Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 25.08.2006, 22:07
ulle ulle ist offline
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