Tabelle2CSS sauber überhaupt möglich?

[Stefan]

Hallo,

Ich spiele gerade etwas mit optischen Möglichkeiten herum.
Gerade versuche ich ein Logo ohne Bilder formschön zu bekommen.

Das geht auch soweit mit einer Tabelle und einigem Stylemischmasch.
Doch genau das wollte ich nicht, denn es soll tabellenlos ein
aber dann auch mit sauberem CSS.

Das scheint nicht möglich zu sein.
Entweder ich nutze Blockelemente, dann muss ich diese
aber floaten, was 1. meiner Meinung nach sowieso ein Getrickse
ist(float) und 2. was browserdifferenzen mit sich bringt, es
sei denn man gibt exakt den Doctype an,usw...

Oder ich nutze Span, wobei ich dann allerdings wieder weitere
spans ineinander verschachteln muss, auch nicht gerade schön.

Aber dennoch CSS muss doch in der Lage sein das gleiche Ergeniss
sauber ohne Tricks zu produzieren wie eine Tabelle, oder?

Beispiel:
*Hinweis
Es geht nur ums Prinzip. Das hier IE spezifisches zum Tragen kommt
und Schriftarten vorausgesetzt werden, hat nichts mit meiner Frage zu tun, auch nicht meine unsaubere Codierung . Ist nur eine Testumgebung. ;-)

<table bgcolor="#FFFFFF" style="border:2px solid #000000;margin-bottom:3px;" cellspacing="3" cellpadding="2" border="1" bordercolor="#000000">
<tr>
<td align="center" style="letter-spacing:4px;width:40px;font-weight:bold;font-size:18px;color:#000000;background-color:#FFFFFF;">
|G|</td>
<td style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#00009F,endColorStr=#EFEFEF);">
<span style="letter-spacing:4px;font-weight:bold;font-size:14px;color:#FFFFFF;">&nbsp;&nbsp;G</span>
<span style="padding:0px;margin:0px;font-size:24px;color:#FFFFFF;font-family:webdings;">&#113;&#113;</span>
<span style="letter-spacing:4px;font-weight:bold;font-size:14px;color:#FFFFFF;">gle&nbsp;&nbsp;</span>
</td>
<td bgcolor="#00009F"><span style="font-weight:bold;font-size:11px;color:#DFDFDF;">&nbsp;inc.&nbsp;</span></td>
</tr>
</table>

Geht das Gleiche in "Schön", "rein CSS" und "wenig Code"?

Gruss Stefan

[Nixwisser]

mit sauberem CSS.

ist(float) und 2. was browserdifferenzen mit sich bringt, es
sei denn man gibt exakt den Doctype an,usw...

Es geht nur ums Prinzip. Das hier IE-Spezifisches zum Tragen kommt
und Schriftarten vorausgesetzt werden, hat nichts mit meiner Frage

Geht das Gleiche in "Schön"

Deine ganze Fragestellung ist ein einziger Widerspruch. Du möchtest "sauberes CSS" haben, willst aber auf gar keinen Fall den Dokumentyp angeben und somit im standardkonformen Modus, dem einzigen, in dem großflächiger CSS-Einsatz überhaupt Sinn macht, arbeiten. Du möchtest eine "schöne" Konstruktion, scherst Dich aber einen Kehrricht darum, dass es nur in einem einzigen Browsertyp funktioniert.

"rein CSS" und "wenig Code"?

Setze die fünf Einzelteile in <div>-Elemente und betoniere diese mit position:absolute und Pixelangaben auf der Seite fest. Bei der Schriftgröße hast Du das schon gemacht, dann spielt's bei der Positionierung auch keine Rolle mehr.

[Stefan]

Hallo,

Setze die fünf Einzelteile in <div>-Elemente und betoniere diese mit position:absolute und Pixelangaben auf der Seite fest. Bei der Schriftgröße hast Du das schon gemacht, dann spielt's bei der Positionierung auch keine Rolle mehr.

dann gehts anscheinend doch nicht und eine Tabelle ist
offensuichtlich doch nicht so ersatzlos zu streichen, wie
viele meinen.

Position absolute, div's, Doctypeangaben....

Wo bleibt da die Flexibilitität?
Für jedes Design/Website neue Angaben?

Da lob ich  mir dann doch die Tabelle:

1.Passt sich als Blockelement automatisch der
Textlänge an, nicht umgekehrt (wie ein zb.DIV)

2. X-Browsersicher

Vielleicht meldet sich ja mal jemand von den CSS
Könnern in Sachen CSS zu Wort. Denn da muss es
doch eine Lösung geben, wenn man immer hört,
"Bloss keine Tabellen"

Gruss
Stefan

[wahsaga]

hi,

Position absolute, div's, Doctypeangaben....

Wo bleibt da die Flexibilitität?

Was verstehst du in Bezug auf den Doctype bitte unter Flexibilität?

Vielleicht meldet sich ja mal jemand von den CSS
Könnern in Sachen CSS zu Wort. Denn da muss es
doch eine Lösung geben, wenn man immer hört,
"Bloss keine Tabellen"

Vielleicht stellst du erst mal eine vernünftige, vollständige Testseite als Online-Beispiel zur Verfügung, damit man erkennen kann, was du eigentlich erreichen willst.

gruß,
wahsaga

[Stefan]

Was verstehst du in Bezug auf den Doctype bitte unter Flexibilität?

Na was wohl?
Das es egal ist auf welcher Seite oder welchem CMS System
auch immer, dieser Code läuft. Denn man kann nicht wegen einem
kleinen CSS Schnipsel ganze Seiten umwerfen.

Vielleicht stellst du erst mal eine vernünftige, vollständige Testseite als Online-Beispiel zur Verfügung, damit man erkennen kann, was du eigentlich erreichen willst.

Der Code dürfte wohl mehr als vollständig sein.
Warum online stellen? Stell mir gerade vor alle Codes hier im
Forum müssten online sein, weils sonst keiner versteht.

Kann ja verstehen wenn jemand meckert auf eine frage die kein bisschen Code zeigt, aber deine Meckerei.....

Im Übrigen: Mit der Tabelle klappts egal wo, egal in welchem Browser.

Also wenn das nicht in CSS gehen sollte, dann ist das
eine Schlappe für alle "Bloss keine Tabellen"-Erzähler.

Gruss
Stefan

[Struppi]

Im Übrigen: Mit der Tabelle klappts egal wo, egal in welchem Browser.

Nur wenn du ein Tabellendesign machen willst, dann ist es Quatsch es ohne Tabellen zu versuchen, weil dann das passiert was du sagst.

Tabellen haben einige Nachteile und spätestens, wenn du eine Seite neu gestalten willst wirst du die Vorzüge eines CSS Design zu schätzen Wissen, dürfte aber noch ein weiter Weg für dich sein.

Also wenn das nicht in CSS gehen sollte, dann ist das
eine Schlappe für alle "Bloss keine Tabellen"-Erzähler.

Nein es ist eine Schlappe, für dich, da du dir kein Design vorstellen kannst, das nicht in Reihen und Spalten aufgebaut ist. Mit CSS gibt es (noch) kaum Möglichkeiten ein derartiges Design ohne Workarounds zu erstellen, da es nicht dafür ausgelegt ist. Wenn du dich von deiner Tabellen Vorstellung trennst, dann klappt's auch mit dem CSS.

Struppi.

[wahsaga]

hi,

Was verstehst du in Bezug auf den Doctype bitte unter Flexibilität?

Na was wohl?
Das es egal ist auf welcher Seite oder welchem CMS System
auch immer, dieser Code läuft. Denn man kann nicht wegen einem
kleinen CSS Schnipsel ganze Seiten umwerfen.

Schön - was soll das mit der Wahl des passenden Doctypes zu tun haben?

Du machst nicht den Eindruck, dass du etwas von Doctypes und ihren Auswirkungen auf das Renderverhalten der Browser verstündest.

Der Code dürfte wohl mehr als vollständig sein.

Blödsinn.
Eine vollständiges HTML-Dokument fängt nicht mit <table> an.

gruß,
wahsaga

[Timo "God's Boss" Reitz]

Das es egal ist auf welcher Seite oder welchem CMS System
auch immer, dieser Code läuft. Denn man kann nicht wegen einem
kleinen CSS Schnipsel ganze Seiten umwerfen.

Nein, aber wenn die Seiten unsauber sind (invalider, miserabler HTML-Code beispielsweise), *dann* sollte man ganze Seiten umwerfen. CSS ist ideal für valide, saubere HTML-Dokumente. Je schmutziger, desto schlechter.

Im Übrigen: Mit der Tabelle klappts egal wo, egal in welchem Browser.

In meinem Lynx sehen Tabellen aber sehr seltsam aus. Bei Datentabellen muss ich das hinnehmen, aber bei Layouttabellen hat einfach der Designer gepennt.

Also wenn das nicht in CSS gehen sollte, dann ist das
eine Schlappe für alle "Bloss keine Tabellen"-Erzähler.

Ich weiß nicht mal genau, wie ich dein Beispiel im Ausgangsbeitrag nun interpretieren soll. Diese Menge Code für nichtmal 20 Zeichen ist auf jeden Fall viel zuviel!

[Blaubart]

Tach.

Ich spiele gerade etwas mit optischen Möglichkeiten herum. Gerade versuche ich ein Logo ohne Bilder formschön zu bekommen.

Herzlich willkommen zu einer neuen Ausgabe von "Wer keine Probleme hat, macht sich welche".

Vom Designstandpunkt gesehen wären viele frohe, wenn sie häufiger Bilder benutzen könnten – größere Gestaltungsfreiheit und berechenbares Erscheinungsbild, da fast vollständig unabhängig von irgendwelchen Browsermacken. Ein Logo ist sicher etwas, wofür selbst die Hardcoreverfechter der reinen CSS-Lehre ein Bild "akzeptieren".

Du hingegen versuchst lieber, dir auf umständliche Weise eine Alternative (welche Vorteile hat die deiner Meinung nach einem Bild gegenüber?) zusammenzuschrauben und moserst letztlich doch nur darüber, daß dieser Weg offensichtlich der falsche war.

Wenn du Bilder malen möchtest, nimm weder Tabellen noch DIVs noch SPANs ... sondern Bilder!

Position absolute, div's, Doctypeangaben....

Wo bleibt da die Flexibilitität?
Für jedes Design/Website neue Angaben?

Adressat, Absender, Briefkopf in einem formellen Schreiben ...

Wo bleibt da die Flexibilität?
Für jeden Brief neue Angaben?

Mir scheint fast, du hast diesen ganzen Logo-mit-HTML-und-CSS-Versuch bloß deshalb angefangen, um einen fadenscheinigen Vorwand zu haben, ein bißchen im Forum zu trollen.

[Stefan]

Mir scheint fast, du hast diesen ganzen Logo-mit-HTML-und-CSS-Versuch bloß deshalb angefangen, um einen fadenscheinigen Vorwand zu haben, ein bißchen im Forum zu trollen.

»»

Das scheint mir so bei dir.

Wie ich anfangs bereits erwähnte geht es mir um
gestalterische Möglichkeiten  mit Lerneffekt in Sachen CSS.

Also versuche ich, weil ich selber lieber auf den ganzen HTML
Kram verzichten möchte, bisherige Möglichkeiten in CSS
umzusetzen. Kann ja nicht verkehrt sein.

Warum ich nicht lieber ein Bild nehme?
Weil es sich nicht nur auf ein kleines Logo beschränkt, sondern
dieser Versuch stellvertretend ist für Anderes.

Aber nach deine Aussage sollte ich dann wohl demnächst nur
Bilder einsetzen in den Formaten 800x600.

Kleiner Tipp, denk nach bevor du meckerst.

Stefan

[Blaubart]

Tach.

Mir scheint fast, du hast diesen ganzen Logo-mit-HTML-und-CSS-Versuch bloß deshalb angefangen, um einen fadenscheinigen Vorwand zu haben, ein bißchen im Forum zu trollen.

»»

Das scheint mir so bei dir.

Du hast recht. Den ganzen Nachmittag über saß ich mit meiner Stefan-Voodoopuppe im Wohnzimmer und versuchte, dich zu diesem HTML-Experiment und dem Eröffnen dieses Threads zu bewegen. Erfolgreich, wie man sieht. Endlich! Mir gingen schon die Nadeln und die Gummihühner aus ...

Wie ich anfangs bereits erwähnte geht es mir um gestalterische Möglichkeiten  mit Lerneffekt in Sachen CSS. Also versuche ich, weil ich selber lieber auf den ganzen HTML Kram verzichten möchte, ...

Ohne HTML kommst du auch mit CSS nicht weit.

... bisherige Möglichkeiten in CSS umzusetzen. Kann ja nicht verkehrt sein.

Dafür scheinst du aber bereits eine ziemlich feste Meinung über Flexibilität, Doctypes, Tabellen [1], CSS allgemein sowie float und absolute Positionierung im besonderen zu haben, die du dir mit deinem Experiment noch einmal bestätigen möchtest. Sämtliche Reaktionen auf Antworten und Nachfragen, die du bisher erhalten hast, erwecken nicht den Anschein, als wolltest du wirklich Hilfe.

Übrigens: Wenn du zum Kennenlernen ernsthaft mit CSS, so wie es vom W3C spezifiziert wird (!), experimentieren möchtest, bist du mit dem IE als Testumgebung IMO schlecht beraten.

Warum ich nicht lieber ein Bild nehme?
Weil es sich nicht nur auf ein kleines Logo beschränkt, sondern
dieser Versuch stellvertretend ist für Anderes.

Was sich aus deiner Beschreibung und Nachfrage bzgl. *Logo* ganz selbstverständlich ergibt.

Aber nach deine Aussage sollte ich dann wohl demnächst nur
Bilder einsetzen in den Formaten 800x600.

Wenn das für dich noch ein Logo ist ...

Kleiner Tipp, denk nach bevor du meckerst.

Ja, Stefan. Tschüß, Stefan.

[1] Wo liest du z. B. ständig "Bloß keine Tabellen"? Hier im Forum sicher nicht, da der Tenor eher "Verwende Tabellen für *tabellarische Daten* ... und CSS für die graphische Gestaltung der Seite" ist.

[Timo "God's Boss" Reitz]

Wie ich anfangs bereits erwähnte geht es mir um
gestalterische Möglichkeiten  mit Lerneffekt in Sachen CSS.

Dann lerne als Erstes, wozu CSS dient. Dazu gehört auch, dass es keine Bilder ersetzt.

Also versuche ich, weil ich selber lieber auf den ganzen HTML
Kram verzichten möchte, bisherige Möglichkeiten in CSS
umzusetzen. Kann ja nicht verkehrt sein.

Ganz auf HTML kannst du nicht verzichten. CSS dient ja gerade dazu, HTML-Dokumente mit Layout zu versehen. Kein HTML-Dokument, kein Layout.
Anmerkung: Es können auch andere Dokumente mit CSS formatiert werden (Stichwort XML). Das ist aber für eine Webseite zur Zeit irrelevant.

Aber nach deine Aussage sollte ich dann wohl demnächst nur
Bilder einsetzen in den Formaten 800x600.

Wenn du so große Bilder hast: Ja.
Falls du jedoch Fließtext, tabellarische Daten, etc. hast: Nein.

[Nixwisser]

Setze die fünf Einzelteile in <div>-Elemente und betoniere diese mit position:absolute und Pixelangaben auf der Seite fest. Bei der Schriftgröße hast Du das schon gemacht, dann spielt's bei der Positionierung auch keine Rolle mehr.

dann gehts anscheinend doch nicht

Meine Aussage war nicht dahingehend zu verstehen, dass es nicht ginge (drei Kästchen in einem großen Kästchen sollten ein Leichtes sein), sondern dass es bei Deiner Aufgabenstellung allgemein wie auch Deiner Tabellenvorgabe im Speziellen sinnlos ist, zu versuchen, dies in eine "schön" aufgebaute HTML/CSS-Kombination zu gießen.

Solange Du an der Meinung festhältst, HTML sei ein Zeichenwerkzeug und keine Textbeschreibungssprache, ist jede weitere Überlegung sinnlos, denn auf dieser Basis wirst Du mit CSS genauso ein unbrauchbares Kauderwelsch fabrizieren wie mit dem Tabellenlayout - da kannst Du auch gleich beim Tabellenlayout bleiben.

CSS ist kein primitiver Tabellenersatz, CSS ist ein eigenständiges Layoutwerkzeug. Falls Du für Deinen Seelenfrieden eine Blankobestätigung brauchst, dass man mit CSS nicht alles 1:1 vom Tabellenlayout übernehmen kann: Ja, das ist so. Dies gilt allerdings auch umgekehrt.

Wo bleibt da die Flexibilitität?
Für jedes Design/Website neue Angaben?

Wenn Du für jedes Angebot dieselben Angaben benutzt, wäre die Frage wohl eher, wo _Deine_ Flexibilität bleibt.

Da lob ich  mir dann doch die Tabelle:

1.Passt sich als Blockelement automatisch der
Textlänge an, nicht umgekehrt (wie ein zb.DIV)

Dass ein <div>-Element sich nicht seinem Inhalt anpassen würde, ist mir neu.

2. X-Browsersicher

Ich bin gespannt, wie Deine Tabellenseiten mit Lynx oder Vorleseprogrammen für Blinde daherkommen. (Und jetzt komme bitte nicht wie viele andere mit der Taktik, Dein "X-Browsersicher" salamischeibenmäßig Stück für Stück einzugrenzen, bis nur noch die Browser drin sind, die Dir in den Kram passen.)

[Timo "God's Boss" Reitz]

dann gehts anscheinend doch nicht und eine Tabelle ist
offensuichtlich doch nicht so ersatzlos zu streichen, wie
viele meinen.

Nein, Tabellen sind sogar unverzichtbar: Für tabellarische Daten!

Position absolute, div's, Doctypeangaben....
Wo bleibt da die Flexibilitität?
Für jedes Design/Website neue Angaben?

Eine Doctype-Angabe ist doch ohnehin Pflicht, sonst ist die Seite invalide und alle Browser nutzen ihren lustigen Ratemodus. Absolute Positionierung hingegen sollte man tatsächlich vermeiden, solange man kann.
Und dass man für ein neues Design andere CSS-Angaben machen muss, ist ja wohl logisch. Wie groß die Überschneidungen gleicher CSS-Angaben bei verschiedenen Layouts sind, hängt wiederum vom Einzelfall ab.

1.Passt sich als Blockelement automatisch der
Textlänge an, nicht umgekehrt (wie ein zb.DIV)

Komisch, divs ohne formatierende Angaben machen genau das: Sie passen ihre Größe dem Inhalt an. Seltsam.

2. X-Browsersicher

Joa, z.B. im Lynx und anderen Textbrowsern. Übrigens hat Tabellen-Layout immer mindestens einen gravierenden Nachteil: Die Inflexibilität gegenüber Breitenveränderungen des Viewports. Zwar können sich die Spalten (und somit die Zellen) der verfügbaren Breite anpassen, aber das macht oft nur in Maßen Sinn. Mit CSS hingegen kann man realisieren, dass bei einer bestimmten Breite zwei, bei einer viel größeren Breite jedoch drei (oder gar mehr) Blöcke nebeneinanderstehen!
Das klappt zwar ebenfalls nicht in Textbrowsern, aber die zeigen (dank sauberem HTML) wenigstens den Inhalt ordentlich an.

Vielleicht meldet sich ja mal jemand von den CSS
Könnern in Sachen CSS zu Wort. Denn da muss es
doch eine Lösung geben, wenn man immer hört,
"Bloss keine Tabellen"

Siehe oben: Tabellen für tabellarische Daten. Und eine Lösung für dein "Problem" wurde bereits genannt.

[Timo "God's Boss" Reitz]

Gerade versuche ich ein Logo ohne Bilder formschön zu bekommen.

Ein Logo ist in der Regel (da nicht bloß Schrift, sondern oft Grafik, Buntes, etc.) ein Paradebeispiel für den Einsatz eines Bildes. Ob Hintergrundbild oder echtes Inhaltsbild hängt dann vom Einzelfall ab.

Das geht auch soweit mit einer Tabelle und einigem Stylemischmasch.
Doch genau das wollte ich nicht, denn es soll tabellenlos ein
aber dann auch mit sauberem CSS.

HTML und CSS sind kein Zeichenbrett!

<table ...>
...
</table>

Das meine ich mit "HTML und CSS sind kein Zeichenbrett". Das hier könntest du wunderbar als Bild (mit sinnvollem Alternativtext) realisieren. Übrigens ist &#113; "q" und damit nicht der Buchstabe, den du wahrscheinlich wolltest. *orakel*