zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Artikel in 2 table-cell teilen / CrossBrowser

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.04.2005, 12:29
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard Artikel in 2 table-cell teilen / CrossBrowser

Moin,

ich möchte einen/mehrer Artikel/Absätze teilen und nebeneinander Darstellen (= Zeitungsstil). Mit Float ginge es wohl auch, aber ich möchte einen neuen Weg gehen und die Blöcke nebeneinander, inhaltsabhängig und mit gleicher Höhe haben.

Ergo liegt eine Tabelle nahe. Um aber die Sematik (im Markup) nicht zu stören habe ich mir folgende "moderne" Lösung ausgedacht. Diese würde wahrscheinlich auch Cross-Browser funktionieren, halt nicht in jedem Browser nebeneinander. Was ja nicht so schlimm ist.

Diesen Code würde ich gerne mal diskutieren bzw. hätte gerne von Euch einen Cross-Browser Test, DANKE.

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" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 

<style type="text/css" media="screen,projection" title="Druckvorschau -> Semantic-Test">
/*<![CDATA[*/ 


*			{
			margin:  0;
			padding: 0;
			
			/* Tabellen
			 */
			border-collapse:collapse;
			border-spacing: 0;
			}

html		{
			/* permanent Scrollbalken
			 * Gecko => nicht Valide
			 */
			overflow: -moz-scrollbars-vertical;
			}
			
html,
body		{
			color:		#000000;
			background:	#FFDD22;
			
			/* line-height ohne Einheit - sonst Vererbung
			 */
			line-height: 1.45;
			}

body		{
			padding: 5px 0;
			
			/* Nur hier, sonst gibt es
			 * eventuell Vererbungsprobleme.
			 */
			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}


div			{
			display: table;

			width: 80%;
			
			margin: 0 auto;
		
			background-color:	#FFFFFF;
			}			

		
p			{ 
			display:table-row;
			
			background-color:	#FF0000;
			
			font-size: .8em;
			}

			
span		{ 
			display: block;

			border: 1px solid #000000;
			padding: 1em;
			
			background-color:	#2299FF;
			}


head:first-child+body div p span
			{
			/*
			 * In der Annahme:
			 * Browser die diesen Selector
			 * lesen - koennen [display: table-cell;]
			 *
			 * Selector (gute Browser)
			 * Gecko / Opera 7.xx
			 * + alle die es lernen
			 */
			display: table-cell;
			}			
	

/*]]>*/ 
</style> 


</head> 
<body>

<div>
	


	  <span>cell 1
.
.
.
.
.
.
.</span>
	  <span>cell 2</span>
	</p>
	


	  <span>cell 3</span>
	  <span>cell 4
.
.
.
.</span>
	</p>
</div>

</body> 
</html>
Ach noch was, an den vielen Hintergrundfarben nicht stören lassen, die sind nur zur Kontrolle.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.04.2005, 12:58
Benutzerbild von magick
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 05.09.2004
Ort: Hamburg
Beiträge: 302
magick befindet sich auf einem aufstrebenden Ast
Standard

Gute Idee!

Sieht im FF, Opera und Konqueror unter Linux ok aus.

Allerdings ist die Auswahl der Elemente eher ungünstig, wenn man z.B. eine Liste oder mehrere Textabsätze in einer Zelle unterbringen möchte. Ich würde da doch eher eine div-suppe vorziehen, dann kann man den Text innerhalb der Zellen wenigstens semantisch korrekt darstellen.
__________________
Gruss, Merlin
xw3.org - light your style
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.04.2005, 13:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Mein Cross-Browser-Test unter OSX ergibt folgendes überraschendes Ergebnis:
Safari: table + table-cell klappt, border-collapse ignoriert (lässt sich verschmerzen)
Camino: klappt vollständig
NN7: klappt vollständig
Opera 6: natürlich nicht
IE5: sowieso nicht

[Wieso der Safari es hier kann, unser letztes Beispiel aber nicht, muss ich gelegentlich eruieren - vielleicht mag er's nur im body nicht...]

Grundsätzlich:
Ich stehe dem Mehr-Spalten-Satz am Bildschirm zwiespältig gegenüber.
Im Gegensatz zum Druck hat man am Bildschirm nicht die Möglichkeit einen echten Blocksatz und vor allem saubere Umbrüche zu erzeugen, deshalb werden schmale Spalten schnell scheußlich und unleserlich.
(Ich gehe mal davon aus, dass in die Spalten Fließtext soll...)
Eine Breitenangabe in em und eine Mindesbreite würde in deinem Beispiel IMHO eine Verbesserung bringen.

Wenn ich ehrlich bin, finde ich die Verwendung von display:table/-cell um Spalten zu erzeugen ebenso einen Missbrauch wie "echte" tables.
Spalten sind Spalten und keine Tabellen. Spalten müssten ein grundsätzlich anderes Verhalten haben (z.B. der Text von einer in die nächste fließen).
Provokation: Es gibt eben keine Spalten fürs Web - und das ist auch gut so.


Grüße
fricca

*aufweitereMeinungengespannt*
Mit Zitat antworten
  #4 (permalink)  
Alt 02.04.2005, 14:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.033
Swoop befindet sich auf einem aufstrebenden Ast
Standard

ok also win:

ie5:
ie6:
ff 1.02:
opera 7.54:

Zum Zweck des ganzen kann ich nicht so wirklich ne Aussage machen, da es mir nicht sonderlich zusagen würde / zusagt eine "Zeitung" am Bildschirm zu lesen ich ziehe da doch das gedruckte vor..
__________________
Shibby.....

Mein Blog
Mit Zitat antworten
  #5 (permalink)  
Alt 02.04.2005, 23:35
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

DANKE Euch für diesen aufwändigen CROSS-Browser Test.

Ich fasse nochmal zusammen, da die Browser ja auch den "schlauen Selektor" kennen.
(erstaunlich das es doch sehr viele sind)

Code:
head:first-child+body {}
Okay waren:

Firefox
Opera (7.xx)
Konqueror (Linux)
Netscape7
Camino
Safari (wobei dieses Teil schon merkwürdig ist, kein min-height und dann sowas
siehe http://www.xhtmlforum.de/viewtopic.php?p=22974#22974)



Schlecht und alt sind:
Opera 6
Netscape 4 (wenn schon eine rote Liste, dann auch er)
IE6
IE5 (Ich hoffe doch das der IE5 wenigstens das gleiche zeigt wie IE6)

_______________

Zitat:
Zitat von magick
Allerdings ist die Auswahl der Elemente eher ungünstig,......
Jepp, aber ich bin doch schreibfaul, die vielen Klassen und außerdem soll es ja auch nur Benutzbar für die sein, die es auch verstehen (immerhin sind hier immer so ca. 30 Schwarzleser)

Zitat:
Zitat von fricca
Spalten müssten ein grundsätzlich anderes Verhalten haben (z.B. der Text von einer in die nächste fließen).
Sowas in dieser "Art" wollte ich ja erreichen, aber ein übergreifender Inhaltsfluss ist wohl was anderes. Wie Du schon sagst, der Anwendungsfall ist sehr begrenzt, allein eine vernüftige Breite für einen Blocksatz bedingt schon einiges, somit ist eine min-width sinnvoll, und damit eine Ausgabe auf "schmalen" Ausgabemedien quasi unmöglich. Da wäre ein Float besser geeignet.

Eine weitere Frage ist der Screenreader, wie liest er es vor ? Immerhin erkennen diese Teile ja auch [display: none;], wie wird es mit [display: table-cell;] sein ?

Hmm, eine Menge die dagegen spricht, und einen Anwendungsfall zu konstruieren ist auch mühsam, wichtiger ist wohl das bewußtsein über diese Möglichkeit.
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 03.04.2005, 19:55
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo, Ulle!

Dieser Beitrag hier ist (wieder einmal) typisch für Dich: eingetretene Trampelpfade verlassen, Bewährtes in Frage stellen und nach neuen Wegen suchen! Das meine ich jetzt wirklich als Anerkennung!

Aber diesmal liegst Du für meine Begriffe daneben; das eigentliche Problem an Deinem Versuch ist nicht das "rein technische" (das wirst Du eh lösen! ), sondern das psychologische!

Die Begründung für obige Behauptung wird etwas ausführlicher ausfallen (Achtung, Terry, jetzt kommt eine meiner "Schöpfungsgeschichten"!), weil es sich ja schliesslich um ein Thema handelt, das von grundsätzlicher Bedeutung ist!

Also: Immer wieder wird - völlig zu recht! - darauf hingewiesen, dass das Internet ein eigenständiges Medium ist und nicht etwa ein auf eine andere Plattform adaptiertes Fernsehen, eine Zeitschrift, ein Buch oder sonstwas! Und immer wieder wird gegen eben diese Erkenntnis verstoßen! Auch Du willst hier eine "Zeitung nachbauen"!

Bekanntermaßen sind die Lesegewohnheiten im Internet völlig andere als bei anderen Medien, namentlich den Print-Medien. Obwohl beide Medien identische Inhalte aufweisen können, muss die Aufbereitung medienspezifisch erfolgen. Das würdest Du mit Deinem Zeitungsspaltensatz nicht erreichen!

Eine meiner Meinung nach falsche "Aufbereitung" einer Website ist per se das weit verbreitete Dreispalten-Layout. Dieses fast schon als Standard-Layout zu bezeichnende "Erzeugnis" halte ich für nutzerunfreundlich, weil es viele User ganz einfach überfordert!

Das menschliche Hirn ist aufgrund seiner kognitiven (erkennenden) Fähigkeiten auf das duale Erfassen der Umwelt optimiert. Dies kannst Du unter anderem auch daran erkennen, dass unsere Sinnesorgane, die optische und akustische Reize empfangen und damit eine Übersicht über die aktuelle Situation der Umgebung, in der das die Reize aufnehmende Individuum sich bewegt, möglich machen.

Nun sind wir modernen Menschen ja sehr gerne und immer sehr schnell bereit zu glauben, wir würden nicht mehr auf den Bäumen herumhängen. Aber nach wie vor sind wir aufgrund des genetischen Erbes aus grauer Vorzeit immer noch damit beschäftigt, die Welt dual wahrzunehmen und sie auch in unserer Sprache in Wortpaaren (gut und böse, schwarz und weiss, hel und dunkel, etc.) dual abzubilden.

Bei ausreichender Übung ist es uns natürlich auch möglich, die Welt etwas differenzierter, etwas breiter zu sehen. Aber nicht jeder hat die Übung (so wie Du), eine dreispaltige Internetseite zu "lesen" ohne einen für ihn wichtigen oder interessanten Teil (z. B. einen Link) zu übersehen.

Ein weiteres Problem stellt der immer wieder erwähnte "Normaluser" dar. Dieser ist - und es gibt ihn in Massen! - weniger erfahren im Web als Du und was viel bedeutsamer ist: der Normaluser ist ein Gelegenheitsuser - er ist nicht regelmäßig im Netz! Und unterschätz nie die mangelnden Kenntnisse anderer!

Bis dann!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #7 (permalink)  
Alt 03.04.2005, 20:35
Benutzerbild von Floele
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.03.2005
Beiträge: 355
Floele befindet sich auf einem aufstrebenden Ast
Standard

Vielleicht ist das ja auch interessant bezüglich "Zeitungsstil":
http://oswd.org/design/1414/gazetteer/
Mit Zitat antworten
  #8 (permalink)  
Alt 04.04.2005, 12:03
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

@Dieter

Deinen Ausführungen ist nichts hinzu zufügen, ich stimme Dir im Prinzip zu. Wie ich ja schon in meine 2. Post einige Nachteile aufgezählt habe. Trotzdem macht es ja auch keinen Sinn ewig lange Zeilen von Text zu produzieren. Also ist der Designer in einer geeigneten Form gefordert.

Was bleibt unterm Strich, eine Möglichkeit die ich aufzeigen bzw. austesten wollte. Der Anwendungsfall ist wohl sehr begrenzt.

Ich habe nochmal ein Beispiel zusammen gestellt, welches wohl die Problematik von Textdarstellung verdeutlicht. Einfach mal im IE und FF anzeigen lassen.

Wobei Spalten lassen sich wohl mit der Eigenschaft [float] wirklich Barrierefrei realisiern.

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" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/


*			{
			margin:  0;
			padding: 0;
			
			/* Tabellen
			 */
			border-collapse:collapse;
			border-spacing: 0;
			}

html		{
			/* permanent Scrollbalken
			 * Gecko => nicht Valide
			 */
			overflow: -moz-scrollbars-vertical;
			}
			
html,
body		{
			color:		#000000;
			background:	#FFDD22;
			
			/* line-height ohne Einheit - sonst Vererbung
			 */
			line-height: 1.45;
			}

body		{
			/* Nur hier, sonst gibt es
			 * eventuell Vererbungsprobleme.
			 */
			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}

			
div			{ 
			width: 95%; 
			 
			margin: 0 auto; 

			background-color:   #FFFFFF; 
			}

			
p			{
			background-color:   #FF0000;
			
			font-size: .8em;
			}

			
span		{
			display: block;

			padding: 0 2% 0 1%; 
			
			background-color:   #FFFFFF;
			}

			
h1			{
			padding: 0 1% .5em;
			
			font-size: 1.2em;
			}
			
h2			{
			padding: 0 1% 1em;
			
			font-size: .8em;
			}


head:first-child+body div p
			{
			/*
			 * In der Annahme:
			 * Browser die diesen Selector
			 * lesen - koennen [display: table-cell;]
			 *
			 * Selector (gute Browser)
			 * Gecko / Opera 7.xx
			 * + alle die es lernen
			 */
			display: table;
			width:   100%;
			}

			
head:first-child+body div p span
			{
			display: table-cell;
			
			width: auto;
			}

			
head:first-child+body div p>span:first-child
			{
			/*
			 * Breitenangabe nur fuer 
			 * erste Zelle, um Rundungfehler 
			 * auszugleichen. Leider kein
			 * Erfolg im Gecko !!
			 */
			width: 46.9%;

			background-color:   #EEEEEE;
			}		
		

/*]]>*/
</style>

</head>
<body>

<div>
	<h1>NRW-Grüne greifen Hans Eichel an</h1>
	<h2>Sie werfen ihm vor, auch mehr als zwei Monate nach der Einigung der Bundesregierung auf die steuerliche Förderung von Rußpartikelfiltern liege noch kein Gesetzentwurf vor.</h2>
	


		<span>
		Berlin - Der Parlamentarische Geschäftsführer der Grünen-Fraktion im Düsseldorfer Landtag, Johannes Remmel, wirft dem zuständigen Finanzministerium in der "Berliner Zeitung" Zeitverschwendung vor. "Ich verstehe nicht, warum das so lange dauert."
		Wenn Eichel nicht handle, "dann müssen eben die Bundestagsfraktionen sehr schnell ans Werk gehen."
		</span>
		<span>
		Die Filter produzierenden Unternehmen in Nordrhein-Westfalen brauchten Investitionssicherheit, ergänzte der Grünen-Politiker. Mit einem Gesetz könne auch der "massiven Zurückhaltung" von Autobesitzern, ihre Fahrzeuge mit Filtern auszurüsten, begegnet werden.
		</span>
	</p>
</div>

</body>
</html>
Der Text ist natürlich Wertfrei !!!!!
__________________
</ulle>
Mit Zitat antworten
  #9 (permalink)  
Alt 04.04.2005, 12:21
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Tach, Ulle!

Selbstverständlich ( ) kannst Du floatende Spalten barrierefrei anlegen - kein Thema. Zumindest nicht für Screen Reader! Anders verhält es sich da schon bezüglich der angesprochenen Probleme bei optischer Wahrnehmung!

Zu diesem Thema habe ich mir auch schon meine Gedanken machen müssen, wegen der Chroniken auf meiner Seite. Am Schluss habe ich mich dafür entschieden, die optische Auftelung der Texte mit Überschriften und Absätzen vorzunehmen. Siehe http://www.koblenz-metternich.de/his...metternich.php

Das macht bei längeren Textpassagen ebenso Sinn wie bei kürzeren. Denn eines kommt als zusätzliches Problem bei Deiner Lösung ja noch dazu: wenn der zweiten, der rechten Spalte nur ein einziges Pixelchen an Fensterbreite fehlt, dann wird sie nach unten geschoben. Und wenn dann rechts, das eine Pixelchen bereits abgezogen, noch 200 oder mehr Pixel frei bleiben - dann sieht das bescheiden aus, oder!?
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."

Geändert von Dieter (14.12.2008 um 01:00 Uhr) Grund: Link geändert
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.04.2005, 12:51
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Dieter
Das macht bei längeren Textpassagen ebenso Sinn wie bei kürzeren. Denn eines kommt als zusätzliches Problem bei Deiner Lösung ja noch dazu: wenn der zweiten, der rechten Spalte nur ein einziges Pixelchen an Fensterbreite fehlt, dann wird sie nach unten geschoben.
Nein wird sie nicht. Dies passiert nicht bei einer Tabelle, dies passiert wenn die "Spalten" als Float-Container realisiert wären, was auch im Sinne von Barrierefrei sinnvoll ist. Und die bessere Lösung, wenn ein Artikelstil gewünscht ist.

Nochmal, ich will ja nicht auf den Anfangs erwähnten Anwendungsfall, der eines geteilten Artikels, festlegen. Dafür ist FLOAT wirklich besser geeignet, genau aus Deinem angeführten Platzproblem. Kein Platz -> also drunter, es ist ja auch nicht mehr notwenig den Artikel dann nebeneinander stehen zu haben wenn die Zeilen sowieso nicht mehr "überlang" sind.

Nein, es geht doch im 2 gleich Hohe nebeneinander stehende Container, die sich in der Höhe anpassen. Sprich immer gleich hoch sind.

Zum Beispiel in einem Formular, oder was auch immer !!
__________________
</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
Myspace Fehler zwischen FF und IE? soren.designs (X)HTML 1 05.09.2009 17:02
table table table tr tr td td td{...} hinkel11 CSS 4 11.03.2009 00:14
Myspace problem... Rechte Säule verschiebt sich im IE. calledmarcel CSS 1 27.02.2009 10:12
Myspace-Probleme Nora-B CSS 3 16.09.2008 00:17
Falsche Darstellung im Internet Explorer Janizzle CSS 0 30.08.2007 20:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:16 Uhr.