• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

"Optimale" Trennung von Layout und Inhalt

K

Kniffel

Neues Mitglied
Hallo, nach der Theorie sollen ja Layout (CSS) und Inhalt (HTML) strikt getrennt werden. Wenn ich nun in Aufzählungen einmal 'decimal' verwende, in anderen 'disc', oder 'circle' oder 'square' u.a., was soll ich denn dann als Klassen angeben?
 
Hallo Kniffel

Das kommt drauf an, wie dein HTML-Gerüst aussieht - da kannst du dann evtl. mit Selektoren arbeiten oder du vergibst einfach entsprechende Klassen für die jeweiligen Darstellungen.



Grüsse
 
Hi, hier wäre noch eine Möglichkeit
So könntest du die Eigenschaften für alle listen anpassen und noch die einzelnen besonders anfassen.
Falls ich deine Frage richtig verstanden hatte


HTML: 
<html>
<head>
<style type="text/css">
.list {    font-size: larger;}
.decimal {    list-style-type:decimal;}
.square {    list-style-type:square;}
</style>
</head>
<body>
<ul class="list decimal">
<li>Test</li>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>

<ul class="list square">
<li>Test</li>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>

</body>
</html>
 
@soulxheart und @B3nnoX
Eure Vorschläge widersprechen genau der Trennung von Layout und Inhalt. Wenn ich als Klasse in HTML square angebe, so gebe ich schon im Text den Hinweis auf die Darstellung.
Und wenn, was ja der Sinn der Auslagerung in CSS ist, die bisherigen "square"-Listen eine andere Formatierung (z.B. decimal) erhalten sollen ohne dass der HTML-Text geändert wird, so hast du in css plötzlich .square { list-style-type:decimal;} Nicht ganz logisch, oder?
 
An soulxheart und B3nnoX,
ich hoffe, die Antwort kommt jetzt nicht zweimal, sonst bitte löschen.

Euer Vorschlag widerspricht aber der Forderung nach der Trennung von Inhalt und Layout.
Grund: Die Klasse "square", "decimal" weist schon in html auf die Darstellung hin.
Wenn, was ja der Sinn der Auslagerung in CSS ist, nun Square-Listen jetzt als Decimal-Listen dargestellt werden sollen, heißt dies nach der Theorie "einfach in CSS das Attribut der Klasse square von square auf decimal ändern".
Ein css-Eintrag


.square { list-style-type:decimal;}
scheint mir aber nicht logisch zu sein.
 
Hallo Kniffel

style.css
HTML: 
@charset "utf-8";
/* CSS Dokument */

.list {
    font-size:larger;
}

.decimal {
    list-style-type:decimal;

}

.square {
    list-style-type:square;
}

index.html
HTML: 
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Titelbeschreibung</title>
</head>

<body>
    <ul>
        <li class="list">Punkt 1</li>
        <li class="decimal">Punkt 1</li>
        <li class="square">Punkt 1</li>
    </ul>
</body>
</html>

Mit <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> lagerst du das Stylesheet extern aus und hast damit die gewollte Trennung von Inhalt und Design. Was die Namensgebung angeht: Selbst CMS verwenden bspw. für eine Sidebar die Klasse sidebar-left oder änhliches.



Grüsse
 
Hi,
das das CSS ausgelagert ist, versteht sich von selbst. Nicht verstehen wird aber ein Anwender, der das Projekt übernimmt, nachdem es mehrfach geändert wurde, wenn er im CSS liest


.square { list-style-type:decimal;}
.decimal { list-style-type:lower-roman;}
.....
 
Kniffel schrieb:
Hallo, nach der Theorie sollen ja Layout (CSS) und Inhalt (HTML) strikt getrennt werden. Wenn ich nun in Aufzählungen einmal 'decimal' verwende, in anderen 'disc', oder 'circle' oder 'square' u.a., was soll ich denn dann als Klassen angeben?
Zum Vergrößern anklicken....

Meiner Ansicht nach ist eine strikte Trennung von Layout und Inhalt sowieso nie möglich, da das eine immer etwas über das andere "wissen" muss. Das gilt sowohl im Web wie auch bei einer Desktop-Anwendung. Was nicht heißen soll, dass man es nicht so gut wie möglich probieren soll/kann.
Nach dieser allgemeinen Einschätzung konkret zu Deiner Frage:
Eigentlich müsstest Du die Klassen nicht nach dem Aussehen (circle, square...) benennen, sondern nach dem Inhalt, also eher: "neue_beitraege", "beste_xy", o.ä. Und im CSS wird dann für jede dieser Klassen festgelegt, ob diese mit disc, square oder was auch immer dargestellt werden. Möglicher Nachteil: Wenn Du sehr viele, aber inhaltliche unterschiedliche Listen dieser Art hast, die aber alle gleich aussehen, hast Du viele CSS-Klassen mit identischem Inhalt. Dies könnte man aber mit Vererbung etwas abmildern.
Manchmal kann man die Klassen und damit die Namen verallgemeinern. Also anders als oben, eben nicht z.B. "neue_beitraege", "beste_xy" sondern: "allgemeine_listen", "top5_listen","navigation" o.ä. Und diese Klassen wendest Du dann auf alle Listen an, die diesen Typ an Inhalt haben.

Streng genommen ist HTML aber gar nicht der Inhalt, sondern auch nur eine (grundlegende) Layout-Festlegung, denn im HTML legst Du fest, dass der Inhalt als Liste und nicht z.B. als Fließtext oder Table, divs oder was auch immer dargestellt wird.

HTH
Alex
 
Kniffel schrieb:
Euer Vorschlag widerspricht aber der Forderung nach der Trennung von Inhalt und Layout.
Grund: Die Klasse "square", "decimal" weist schon in html auf die Darstellung hin.
Zum Vergrößern anklicken....

Hier verstehe ich ehrlich gesagt dein Problem nicht.
Verwende doch einfach Namen die nicht auf die Darstellung hinweisen. Schliesslich kannst du doch die Namen mit wenigen Einschränkungen frei wählen.

soulxheart schrieb:
Mit <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> lagerst du das Stylesheet extern aus
Zum Vergrößern anklicken....

Da bist du wohl bei Copy&Paste in die falsche Zeile gerutscht, denn das hat nicht das geringste mit dem Stylesheet zu tun.

hfb schrieb:
Streng genommen ist HTML aber gar nicht der Inhalt, sondern auch nur eine (grundlegende) Layout-Festlegung, denn im HTML legst Du fest, dass der Inhalt als Liste und nicht z.B. als Fließtext oder Table, divs oder was auch immer dargestellt wird.
Zum Vergrößern anklicken....

Aber hallo Alex!

HTML hat nicht das geringste mit dem Layout oder der Darstellung des Inhalts zu tun.

Gruss
Elroy
 
Zuletzt bearbeitet:
Elroy schrieb:
Hier verstehe ich ehrlich gesagt dein Problem nicht.
Verwende doch einfach Namen die nicht auf die Darstellung hinweisen. Schliesslich kannst du doch die Namen mit wenigen Einschränkungen frei wählen.
Zum Vergrößern anklicken....
Der Vorschlag der Klassen "square", .... kam von einem anderen Forumsteilnehmer. Daher habe ich diesen darauf hingewiesen, dass dies nicht korrekt ist.

Elroy schrieb:
Aber hallo Alex!
HTML hat nicht das geringste mit dem Layout oder der Darstellung des Inhalts zu tun.
Zum Vergrößern anklicken....
Aber nur wenn man großzügig ist!
Fast jedes tag hat gestalterische Wirkungnen (<br>, <p>,<h1>.....)
Gruss
Knittel
 
Kniffel schrieb:
Euer Vorschlag widerspricht aber der Forderung nach der Trennung von Inhalt und Layout.
Grund: Die Klasse "square", "decimal" weist schon in html auf die Darstellung hin.
Zum Vergrößern anklicken....

Das hat mit der Trennung von Inhalt und Layout aber so gut wie gar nichts zu tun. Das Wichtige an dem Trennungsgebot ist die Nutzung von HTML als reine Auszeichnungssprache für die inhaltliche Struktur (wozu auch Listen gehören) der Seite und von CSS für die optische Gestaltung (also keine HTML-Tags für die Erstellung des Layouts). Das du dein CSS ins HTML einbinden musst ist klar, aber ob deine Benennungen von Klassen nun aufs Design zurückschließen lassen ist dabei egal. Schließlich sind die Namen nicht für das Layout verantwortlich, sondern das CSS, das dahintersteht.
 
Kniffel schrieb:
Fast jedes tag hat gestalterische Wirkungnen (<br>, <p>,<h1>.....)
Zum Vergrößern anklicken....

Genau diese Tags sollen aber genau nicht als optische, sondern als inhaltlich strukturierende Mittel eingesetzt werden. Die Optik des Inhalts dieser Tags bestimmst du nach wie vor über CSS, sie selbst sollen nur deutlich machen, dass es sich um einen eigenständigen Absatz, eine Überschrift von bestimmter Wichtigkeit usw. handelt.
 
Kniffel schrieb:
Fast jedes tag hat gestalterische Wirkungnen (<br>, <p>,<h1>.....)
Zum Vergrößern anklicken....
Aber wirklich nur rudimentär. Und das sind dann eben noch die Reste aus den Zeiten, als es noch kein CSS gab (z.B. <h1> wird größer angezeigt als <h2>).

Das Gebot "Trennung von Inhalt und Aussehen" meint, dass keine expliziten Angaben zum Aussehen im HTML gemacht werden, z.B. Font-Angaben, Farb-Angaben, Angaben zum Hintergrund, Angaben zum Rahmen um eine Tabelle, oder noch schlimmer, die Positionierung von verschiedenen Inhalten mittels einer Tabelle oder den früher so beliebten "blind.gif".

Wenn Du per CSS ein Reset auf das HTML-Dokument machst, dann sind auch diese minimalen Design-Vorgaben aufgehoben. Wobei z.B. eine Liste immer noch wie eine Liste aussieht, und eine Tabelle sieht auch immer noch wie eine Tabelle aus. Aber das entspricht ja auch der Bedeutung des Inhalts.
 
Kniffel schrieb:
Aber nur wenn man großzügig ist!
Fast jedes tag hat gestalterische Wirkungnen (<br>, <p>,<h1>.....)
Zum Vergrößern anklicken....

Schau dir mal Zen Garden an dann verstehst du vielleicht was ich meine.

Das HTML ist immer das gleiche nur das CSS wird geändert, und doch sehen alle Seiten völlig unterschiedlich aus. Da wird nichts mit HTML gestaltet.

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben