Struktur von der Darstellung trennen: CSS nicht mächtig genug?

[0x7F800000]

Schönen guten Tag allerseits.

Ich bin neu hier in diesem Forum, und komme unter anderem wegen der folgenden Frage:

Ich habe mich gefragt, wie man denn einem <div>-Block ein hübsches Aussehen mit einem Rahmen und runden ecken verleiht. CSS2 scheint dafür nicht mächtig genug zu sein. Erst bei CSS3 soll es dafür eine Lösung geben.

Dank Google bin ich meistens auf folgende Lösungen gestoßen:

1. den eigentlichen Inhalt mit vielen unsinnigen <div>-blöcken umgeben
2. den eigentlichen Inhalt mit einer ebenso sinnfreien tabelle umgeben
   1&2) in beiden Fällen die gesamte Konstruktion mit CSS ausmalen.

was mir daran nicht passt ist die Tatsache, dass ich dafür Änderungen an der XHTML datei vornehmen muss, die ja eigentlich für den "Inhalt" steht, und dabei die logische Struktur des Dokumentes ruiniere.

Und wenn ich mich dann doch umentscheide, und beschliesse, dass auf 239 Dokumenten auf meiner Seite die Blöcke nun doch rechteckig aussehen sollen, dann darf ich das alles manuell in jeder xhtml-datei ändern?

Inhalt<->Darstellung     XHTML<->CSS
ist zwar wünschenswert, aber scheinbar bisher nicht direkt möglich.
Wie Kriegt man die Trennung denn normalerweise sauber hin?

danke für Ideen/Vorschläge/Links/Literaturtipps im Voraus.

[Kai345]

[latex]Mae  govannen![/latex]

Ich habe mich gefragt, wie man denn einem <div>-Block ein hübsches Aussehen mit einem Rahmen und runden ecken verleiht. CSS2 scheint dafür nicht mächtig genug zu sein. Erst bei CSS3 soll es dafür eine Lösung geben.

Ja, so sieht es aus.

Dank Google bin ich meistens auf folgende Lösungen gestoßen:

1. den eigentlichen Inhalt mit vielen unsinnigen <div>-blöcken umgeben
2. den eigentlichen Inhalt mit einer ebenso sinnfreien tabelle umgeben
   1&2) in beiden Fällen die gesamte Konstruktion mit CSS ausmalen.

was mir daran nicht passt ist die Tatsache, dass ich dafür Änderungen an der XHTML datei vornehmen muss, die ja eigentlich für den "Inhalt" steht, und dabei die logische Struktur des Dokumentes ruiniere.

Wenn du das Markup nicht an vielen Stellen verändern willst, bleiben dir mehrere Wege:

a) Du siehst die Sache pragmatisch und fügst die entsprechenden CSS3-Regeln in dein Stylesheet ein. Browser, die das verstehen, stellen die Elemente entsprechend dar, alle Anderen ignorieren es.

b) Du veränderst den Elementbaum durch entsprechendes Javascript, z.B. aus
<div class="abgerundet">....</div>  (@all: ja, ich weiß, unpassender Klassennname)
macht das Javascript dann eine entsprechende verschachtelte Struktur wie z.B.

<div class="abgerundet">  
  <div class="ro">  
    <div class="lo">  
      <div class="lu">  
        <div class="ru">  
          ....  
        </div>  
      </div>  
    </div>  
  </div>  
</div>

Dann mußt du nur allen zu ändernden Elementen diese Klasse verpassen. Änderungen nur im Script notwendig.
Nachteil: Ohne JS wird es wie bisher eckig dargestellt.

c) im Prinzip ähnlich wie b), allerdings schon auf dem Server (php, perl oder was auch immer für eine Scriptsprache dort läuft) mit einer Art Template-System, die die entsprechenden Element-Strukturen ersetzt/generiert. Dann mußt du nur dort eingreifen, um überall die Darstellung zu ändern.

Cü,

Kai

[0x7f800000]

Kai: danke schon mal!

Also die Umsetzung mit CSS3 würde ich mir bisher nicht zutrauen, weil ich das ergebnis meiner Arbeit ja gar nicht sehen kann, weil es kein Browser bisher unterstützt (oder doch? O_O ? )

Die Lösung mit javascript würde mir zumindest das manuelle Abändern ersparen, aber das alles serverseitig zu lösen erscheint mir nun am besten geeignet. Ich halte dann den layout-struktur-markup getrennt vom inhalts-markup, und bastle daraus dann auf dem server eine große xhtml-ausgabe, die dann zum client gesandt wird.

Danke nochmal
greetz, 0x7F800000

[Kai345]

[latex]Mae  govannen, Infinity![/latex]

Also die Umsetzung mit CSS3 würde ich mir bisher nicht zutrauen, weil ich das ergebnis meiner Arbeit ja gar nicht sehen kann, weil es kein Browser bisher unterstützt (oder doch? O_O ? )

Webkit kann das, d.h. Safari (wie es mit Chrome aussieht, weiß ich nicht, soll ja angeblich auf einer älteren Webkit-Version basieren).

Schau mal hier:  http://www.css3.info/preview/ genauer gesagt die Bereiche „border-radius“ und „border-image“

Cü,

Kai

[Gunnar Bittersmann]

@@0x7f800000:

Ich halte dann den layout-struktur-markup getrennt vom inhalts-markup, und bastle daraus dann auf dem server eine große xhtml-ausgabe

Wozu http://de.selfhtml.org/xml/darstellung/xslgrundlagen.htm@title=XSLT [XSLT] prädestiniert ist.

Live long and prosper,
Gunnar

[Beat]

Inhalt<->Darstellung     XHTML<->CSS
ist zwar wünschenswert, aber scheinbar bisher nicht direkt möglich.
Wie Kriegt man die Trennung denn normalerweise sauber hin?

Die setzt hier Verpackung und Ausschmückung gegenüber. Inhalt ist in meinen Augen ganz etwas anderes.

mfg Beat

[0x7F800000]

Die setzt hier Verpackung und Ausschmückung gegenüber. Inhalt ist in meinen Augen ganz etwas anderes.

Hm, also wenn ich einen kilometerlangen Artikel zu irgendeinem Thema verfasse, und hier und da ein paar Bilder und Applets einfüge, das alles mit xhtml-markup, dann ist das doch eindeutig "Inhalt", auch wenn es nicht ständig dynamisch verändert und in irgendwelchen Datenbanken abgespeichert wird.

Also muss ich das doch irgendwie von der
"Verpackung"=Layout-Strukturierung-xhtml
und der
"Ausschmückung"=CSS
trennen. Oder wie hast du das gemeint?

greetz. 0x7F800000

[bleicher]

Grüße,
wo soll das Problem liegen? Wenn du dich auf den guten Browser - Opera verlassen kannst- nimm :before und :after, so wie hier und gut ist!

MFG
bleicher

[0x7F800000]

Oha! Also, mit :before und :after hab ich das heute recht lange und völlig erfolglos versucht (und das lag wahrscheinlich nicht mal an Firefox) :) Freut mich, dass es Leute gibt, die da mehr Geduld haben. Allerdings, so wie der Autor das beschreibt, war das eine Schlacht von epischen Ausmaßen, also nicht unbedingt schnell & easy, wie ich mir das eigentlich gewünscht hätte :) Ich werde es morgen aber nochmal auf diese Art und weise versuchen, wenn es nicht innerhalb von 4 Stunden was wird, bastele ich mir dann doch lieber irgendein Servlet, das inhalt und layout markup durcheinanderwirbelt, und gut ist.

Danke für die Idee jedenfalls!

[Tennchen]

Schönen guten Tag allerseits.

Ich bin neu hier in diesem Forum, und komme unter anderem wegen der folgenden Frage:

Ich habe mich gefragt, wie man denn einem <div>-Block ein hübsches Aussehen mit einem Rahmen und runden ecken verleiht. CSS2 scheint dafür nicht mächtig genug zu sein. Erst bei CSS3 soll es dafür eine Lösung geben.

So ist es leider. Es gibt noch keine zufriedenstellende Lösung.

Die einfachste und schönste Lösung stellt imho jQuery und dessen round_corners dar. Das ganze basiert zwar auf Javascript (was auch nicht so dolle ist), sieht aber deutlich besser aus (weiche Ränder) und man muss nur sehr wenig Code schreiben, den man auch leicht anpassen kann. Zusätzlich kann man damit noch andere Dinge anstellen, als nur runde Ecken zu zeichnen.

Leider wird auch mit CSS³ die Welt nicht allzuviel besser. Damit man wirklich grenzenlose Macht über die Darstellung hätte, müsste CSS zu einer Programmiersprache werden bzw. touringmächtig sein. Aber es wird besser...

[Gunnar Bittersmann]

@@Tennchen:

müsste CSS […] touringmächtig sein.

Oh-oh. Ich sehe Browser in Endlosschleifen hängen und Nutzer auf Sanduhren starren ....

Live long and prosper,
Gunnar

[Tennchen]

@@Tennchen:

müsste CSS […] touringmächtig sein.

Oh-oh. Ich sehe Browser in Endlosschleifen hängen und Nutzer auf Sanduhren starren ....

Aber nur einmal, denn du wirst diese Seite sicherlich für ein paar Jahrhunderte nie wieder aufrufen.

[Gunnar Bittersmann]

@@0x7F800000:

Inhalt<->Darstellung     XHTML<->CSS
ist zwar wünschenswert, aber scheinbar bisher nicht direkt möglich.

Doch:
XHTML → XSLT → XHTML ↔ CSS

Wie Kriegt man die Trennung denn normalerweise sauber hin?

Serverseitige oder clientseitige Transformation mit http://de.selfhtml.org/xml/darstellung/xslgrundlagen.htm@title=XSLT. [XSLT]

Live long and prosper,
Gunnar

[0x7F800000]

Doch:
XHTML → XSLT → XHTML ↔ CSS

Danke schön! Das war genau das, wonach ich gesucht habe, werde mich umgehend damit befassen!