HTML5 und CSS

[Windig]

Hallo,
wenn ich einen Textteil einrücken möchte (z.B. 5em),
defniere ich dann in CSS z.B. Absatz5em {margin-left: 5em;}
und in Html <section/artikle class="Absatz5em">?

[henman]

servus Windig,

wenn ich einen Textteil einrücken möchte (z.B. 5em),
defniere ich dann in CSS z.B. Absatz5em {margin-left: 5em;}
und in Html <section/artikle class="Absatz5em">?

So kann mans machen. Der Selektor in diesem Beispiel ist allerdings falsch bzw. fehlt was.

henman

[Gunnar Bittersmann]

@@Windig:

nuqneH

wenn ich einen Textteil einrücken möchte (z.B. 5em),
defniere ich dann in CSS z.B. Absatz5em {margin-left: 5em;}
und in Html <section/artikle class="Absatz5em">?

Nein. Die Klassenbezeichnungen sollten sich niemals auf die Darstellung beziehen; also sowas wie "Absatz5em" unbedingt vermeiden! Ansonsten hast du präsentationsbezogenes Markup, dann könntest du auch gleich @style-Attribute verwenden. Nicht machen!

Qapla'

[Windig]

Hallo Gunnar.

Nein. Die Klassenbezeichnungen sollten sich niemals auf die Darstellung beziehen; also sowas wie "Absatz5em" unbedingt vermeiden! Ansonsten hast du präsentationsbezogenes Markup, dann könntest du auch gleich @style-Attribute verwenden. Nicht machen!

Jetzt weiß ich, wie ich es nicht machen soll, aber leider nicht, wie man es macht.

Und gleich noch eine weitere Frage.
Wenn ich im laufenden Text immer wieder einzelne Zeilen habe, die unterstrichen oder fett oder mit anderer Schriftart dargestellt werden sollen, so habe ich dies bisher mit

  
<div class="....">Spezieller Text</div>  
<div>Normaler Text>

Wie soll man dies in HTML5 machen? Jedesmal section oder article?

[Malcolm Beck´s]

مرحبا

  
<div class="....">Spezieller Text</div>  
<div>Normaler Text>

Wie soll man dies in HTML5 machen? Jedesmal section oder article?

Dafür sind sie gedacht. Wenn du Klassen verwendest, dann verwende Bezeichner, die den Inhalt beschreiben, nicht das aussehen. Ansonsten reicht auch folgendes Konstrukt.

<section/article/aside/main>  
 <h1>Spezieller Text</h1>  
 <p>Normaler Text</p>  
 <h2>Anderer Spezieller Text</h2>  
 <p>Normaler Text, <span class="spezielle_beschreibung_des_inhaltes">wichtig</span></p>  
</section/article/aside/main>  

Das lässt sich dann alles ganz leicht stylen.

section h1,  
section p {  
}  
article h1,  
article p {  
}  
aside h1,  
aside p {  
}  
main h1,  
main p {  
}  
.spezielle_beschreibung_des_inhaltes {  
}

mfg

[Windig]

Hallo,
wenn ich so ewas habe
<fett, kursiv, nomale Größe>11.6.2012:<Ende fett....> Ausstellung ägyptische .....
.... normaler Text
<fett, kursiv, größer, rot>05.6.2012:<Ende fett....> Achtung! Der Termin ......
.... normaler Text
so kann ich doch nicht mit h1, h2 arbeiten.

[Malcolm Beck´s]

مرحبا

wenn ich so ewas habe
<fett, kursiv, nomale Größe>11.6.2012:<Ende fett....> Ausstellung ägyptische .....
.... normaler Text
<fett, kursiv, größer, rot>05.6.2012:<Ende fett....> Achtung! Der Termin ......
.... normaler Text
so kann ich doch nicht mit h1, h2 arbeiten.

Das sieht mir eher nach einer http://de.selfhtml.org/html/text/listen.htm#definition@title=Definitionsliste.  aus.

mfg

[Windig]

Das sieht mir eher nach einer http://de.selfhtml.org/html/text/listen.htm#definition@title=Definitionsliste.  aus.

Ich glaube eher nicht.
Denn diese "Liste" wird laufend ergänzt und der neu hinzukommende Eintrag kann optisch wieder ganz anders aussehen als die vorhergehenden (leider!)

[molily]

Hallo!

Das sieht mir eher nach einer http://de.selfhtml.org/html/text/listen.htm#definition@title=Definitionsliste.  aus.

Ich glaube eher nicht.
Denn diese "Liste" wird laufend ergänzt und der neu hinzukommende Eintrag kann optisch wieder ganz anders aussehen als die vorhergehenden (leider!)

Dass die Liste laufend ergänzt wird und dass einzelne Einträge anders aussehen als die anderen ist kein Argument für oder gegen eine bestimmte HTML-Auszeichnung.

HTML beschreibt die Struktur, nicht das Aussehen. Wenn eine Listenstruktur vorliegt, so eignen sich z.B. ul, ol, dl oder section/article (je nachdem).

Die Formatierung ist eine Frage von CSS und dem Schaffen von Angriffspunkten für CSS-Selektoren, z.B. durch das Vergeben von Klassen oder IDs im HTML, sofern nötig.

Grüße,
Mathias

[molily]

Hallo,

wenn ich so ewas habe
<fett, kursiv, nomale Größe>11.6.2012:<Ende fett....> Ausstellung ägyptische .....
.... normaler Text
<fett, kursiv, größer, rot>05.6.2012:<Ende fett....> Achtung! Der Termin ......
.... normaler Text
so kann ich doch nicht mit h1, h2 arbeiten.

Kannst du schon, warum nicht?

HTML beschreibt die Bedeutung innerhalb des Dokuments bzw. zeichnet den Inhalt aus.

Mit der letztlichen Darstellung hat das nichts zwangsläufig zu tun.

Wenn obiger Text eine Überschrift darstellt, so solltest du ihn mit h1, h2, h3 … auszeichnen.

Wenn jetzt einzelne Überschriften unterschiedlich formatiert werden, kannst du im HTML Klassen vergeben und diese Klassen im CSS formatieren.

Sinnvolles CSS versucht natürlich, Gemeinsamkeiten herauszuarbeiten. Also allgemeine Formatierungen zu notieren, anstatt bloß einzelne Elemente anzusprechen und sich ständig zu wiederholen.

Schreibe also allgemeine Formatierungsregeln z.B. für alle h1-Elemente, und verfeinere diese mit spezifischen Formatierungen, z.B. für gewisse Klassen.

Versuche, bei den Klassen Gemeinsamkeiten herauszuarbeiten. Diese sollten dann möglichst bedeutungsvolle Namen haben z.B. »terminhinweis« anstatt »großRotFett«.

Wenn ein Element wirklich eine einzigartige Formatierung bekommt, so ist ein Name wie »termin-aegyptische-ausstellung« immer noch sinnvoller als »fettKursivLila«.

Mathias

[Windig]

Hallo,

HTML beschreibt die Bedeutung innerhalb des Dokuments bzw. zeichnet den Inhalt aus.

Mit der letztlichen Darstellung hat das nichts zwangsläufig zu tun.

Wenn obiger Text eine Überschrift darstellt, so solltest du ihn mit h1, h2, h3 … auszeichnen.

Wenn jetzt einzelne Überschriften unterschiedlich formatiert werden, kannst du im HTML Klassen vergeben und diese Klassen im CSS formatieren.

Ich kann mich des Eindrucks nicht erwehren, dass HTML5 mit der Forderung nach strikter Trennung von Darstellung und Inhalt gedacht ist für relative statische Seiten bzw. Seiten, deren Änderungen vorhersehbar sind und sich in einem bestimmten Rahmen bewegen.
Wenn aber wie in meinem Falle laufend Updates kommen sollen, die sich optisch vom bisherigen unterscheiden, wäre ich ständig damit beschäftigt, neue Klassen zu definieren für den jeweiligen Einzelfall.
Um dies zu veranschaulichen, ein extremes Beispiel.
Text1 soll die Farbe #111111 haben,
neuer Text 2 soll die Farbe #111144 haben,
neuer Text 3 soll die Farbe #11aa00 haben,
neuer Text 4 soll die Farbe #b1c1d1 haben,
.....
Wie soll ich dann noch die Forderung "Wenn du Klassen verwendest, dann verwende Bezeichner, die den Inhalt beschreiben, nicht das aussehen" erfüllen.
Etwa mit "Beitrag von Otto", "Wunsch von Peter", "Aussage zum Hochwasser", ...
Wenn ich dann abwäge "Aufwand und Ertrag" und angesichts der Tatsache, dass es sich nicht um einen Onlinehop oder ein Forum (wie Selfhtml) handelt, von denen man hofft, dass sie lange leben, so schreibe ich doch lieber im o.g. Beispiel die Farben direkt in eine style-Angabe im HTML-Dokument.

[misterunknown]

Moin,

Wenn ich dann abwäge "Aufwand und Ertrag" und angesichts der Tatsache, dass es sich nicht um einen Onlinehop oder ein Forum (wie Selfhtml) handelt, von denen man hofft, dass sie lange leben, so schreibe ich doch lieber im o.g. Beispiel die Farben direkt in eine style-Angabe im HTML-Dokument.

Niemand hindert dich bestimmte Hinweise und Tipps zu ignorieren, zumal du es bewusst machst. Man sollte die Regeln verstehen und abwägen - bevor man sie bricht ;)

Wichtig ist, erklären zu können, warum und wie man etwas macht.

Grüße Marco

[Windig]

@molily, dedlfix, misterunknown

Niemand hindert dich bestimmte Hinweise und Tipps zu ignorieren, zumal du es bewusst machst. Man sollte die Regeln verstehen und abwägen - bevor man sie bricht ;)

Diesen Hinweis hätte ich mir öfter gewünscht in diesem Forum.
Ich erinnere mich, dass des öfteren Teilnehmern, die Beispiele vorstellten, die vermutlich der Einfachheit und Übersichtlichkeit halber style-Attribute verwendeten, zuallererst geraten wurde, das CSS auszulagern, ohne dass auf das eigentliche Problem eingegangen wurde.

[molily]

Hallo!

Ich erinnere mich, dass des öfteren Teilnehmern, die Beispiele vorstellten, die vermutlich der Einfachheit und Übersichtlichkeit halber style-Attribute verwendeten, zuallererst geraten wurde, das CSS auszulagern, ohne dass auf das eigentliche Problem eingegangen wurde.

Durch ein Posting kennen Antwortende nie den gesamten Hintergrund, also können die Hinweis auch nur oberflächlich auf Basis von allgemeinen Grundregeln erfolgen. Der Disclaimer »Ich kenne dein Projekt nur so weit, wie du es mir hier erklärt hast, und kann nur auf Basis dessen Tipps geben« versteht sich von selbst.

Der Erfahrung nach sind solche Hinweise auch angebracht, weil viele die Fragende diese Grundregeln noch nicht kennen, sie also unbewusst brechen. Wenn man eine umfassende und korrekte Analyse sowie individuelle Verbesserungsvorschläge sucht, so sollte man einen Frontend-Architekten engagieren und das gesamte Projekt erklären. Ein beiläufiges Posting in einem Forum, das weder Hintergründe erklärt noch den Quellcode zugänglich macht, ist eine schwierige Grundlage für eine fachliche Kritik. Meist erschließt sich das Problem erst im Laufe einer längeren Diskussion.

Grüße,
Mathias

[Windig]

Hallo Matthias!

Nichts gegen gutgemeinte Ratschläge, z.B. das CSS auszulagern.
Dies aber als einzige Antwort auf Fragen, die möglicherweise überhaupt nichts mit CSS zu tun haben, ist frustrierend für den Fragesteller.

Aber abgesehen davon: Ein großes Lob an alle Helfer in diesem Forum!

[dedlfix]

Tach!

Ich kann mich des Eindrucks nicht erwehren, dass HTML5 mit der Forderung nach strikter Trennung von Darstellung und Inhalt gedacht ist für relative statische Seiten bzw. Seiten, deren Änderungen vorhersehbar sind und sich in einem bestimmten Rahmen bewegen.

Ja, könnte man so annehmen. Viele Seiten sind statisch, und die meisten dynamischen haben ein Gestaltungskonzept dahinter und formatieren gleichartiges Dinge gleich. Das ist auch für den Wiedererkennungseffekt und die schnelle Orientierung seitens der Anwender nicht verkehrt.

Wenn aber wie in meinem Falle laufend Updates kommen sollen, die sich optisch vom bisherigen unterscheiden, wäre ich ständig damit beschäftigt, neue Klassen zu definieren für den jeweiligen Einzelfall.
Um dies zu veranschaulichen, ein extremes Beispiel.
Text1 soll die Farbe #111111 haben,
neuer Text 2 soll die Farbe #111144 haben,
neuer Text 3 soll die Farbe #11aa00 haben,
neuer Text 4 soll die Farbe #b1c1d1 haben,

Das sieht nach einen nicht vorhandenen Farb-/Gestaltungskonzept aus. Wenn du das so haben möchtest, dann lass den anstrebenswerten Idealfall zumindest für diese Elemente Idealfall sein und mach einfach Inline-Styles und werd glücklich, bevor du in Schönheit stirbst.

dedlfix.

[molily]

Hallo,

Ich kann mich des Eindrucks nicht erwehren, dass HTML5 mit der Forderung nach strikter Trennung von Darstellung und Inhalt gedacht ist für relative statische Seiten bzw. Seiten, deren Änderungen vorhersehbar sind und sich in einem bestimmten Rahmen bewegen.

Ganz allgemein: Sämtliche Computersprachen, insbesondere Auszeichnungssprachen und Programmiersprachen, sind dafür gemacht, Probleme zu verallgemeinern und abstrahieren. Gemeinsame Muster zu erkennen. Keine Computersprache ist für den Einzelfall gemacht. HTML etwa definiert *ein* Vokabular zur Auszeichnung von Billionen von Dokumenten.

(Das erinnert mich ein wenig an Wittgenstein.)

Wenn aber wie in meinem Falle laufend Updates kommen sollen, die sich optisch vom bisherigen unterscheiden, wäre ich ständig damit beschäftigt, neue Klassen zu definieren für den jeweiligen Einzelfall.

Wie du sagst, Inline-Styles mit dem style-Attribut sind möglich.

Wie soll ich dann noch die Forderung "Wenn du Klassen verwendest, dann verwende Bezeichner, die den Inhalt beschreiben, nicht das aussehen" erfüllen.

Diese Forderung ist eine Konvention. Es ist eine Regel, die in den meisten Fällen zu besserem HTML und CSS führt. Wenn das partout nicht auf dein Problem passt, so kannst du sie bewusst ignorieren.

Mathias

[bubble]

Wenn aber wie in meinem Falle laufend Updates kommen sollen, die sich optisch vom bisherigen unterscheiden, wäre ich ständig damit beschäftigt, neue Klassen zu definieren für den jeweiligen Einzelfall.
Um dies zu veranschaulichen, ein extremes Beispiel.
Text1 soll die Farbe #111111 haben,
neuer Text 2 soll die Farbe #111144 haben,
neuer Text 3 soll die Farbe #11aa00 haben,
neuer Text 4 soll die Farbe #b1c1d1 haben,
Wie soll ich dann noch die Forderung "Wenn du Klassen verwendest, dann verwende Bezeichner, die den Inhalt beschreiben, nicht das aussehen" erfüllen.

Muss es ein komplettes Wirrwar von Farben ergeben? Oder können sich die Farben z.B. alle 5 mal wiederholen?
Denn dann ließe sich das ganze wieder auslagern und benötigt nur ein wenig nth-child() oder dergleichen.

Mal ein minimalistisches Beispiel mit 2 wechselnden Farben: http://jsfiddle.net/ECHz6/

MfG
bubble

[Windig]

Hallo bubble,

Mal ein minimalistisches Beispiel mit 2 wechselnden Farben: http://jsfiddle.net/ECHz6/

Es gibt keine Logik, so dass man nth-child(..) verwenden könnte.

Aber wie schon geschrieben, heißt es im konkreten Fall:
Die Regeln möglicht beachten und wissen wann und warum man davon abweicht.
Da jeder neue Eintrag im Aussehen von den bisherigen abweichen kann, kommen die zugehörigen Attribute ins html.

[martachen]

Hallo,

Hallo,
wenn ich so ewas habe
<fett, kursiv, nomale Größe>11.6.2012:<Ende fett....> Ausstellung ägyptische .....
.... normaler Text
<fett, kursiv, größer, rot>05.6.2012:<Ende fett....> Achtung! Der Termin ......
.... normaler Text
so kann ich doch nicht mit h1, h2 arbeiten.

was spricht gegen?

  
<h2 class="termin normal">text</h2>...  
<h2 class="termin geaendert">text</h2>...

und dem CSS

  
.termin{  
  /*fett*/  
  /*kursiv*/  
}  
.normal {  
  /*normale größe*/  
}  
.geaendert {  
  /*größere Shcrift*/  
}  

CSS Klassen sind doch genau dafür da, die kleinen aber feinen Unterschiede darzustellen. Semantisch hast du erstmal zwei Termine (also gleiches Html-Markup, ob nun h2, ul, ol, oder dl ist noch herauszufinden) der Unterschied betrifft den "Status" des Termins, beim ersten ist noch alles normal beim anderen wurde was geändert oder abgesagt, daher soll er anders aussehen und für diese verschiedenen status führst entsprechende Klassen ein, und diese nennst du nun nicht so wie du im Moment das Aussehen haben möchtest, sonder nach dem Grund warum da was anders aussehen lassen willst
martachen

[bubble]

was spricht gegen?

<h2 class="termin normal">text</h2>...
<h2 class="termin geaendert">text</h2>...

> und dem CSS  
> ~~~css
  

> .termin{  
>   /*fett*/  
>   /*kursiv*/  
> }  
> .normal {  
>   /*normale größe*/  
> }  
> .geaendert {  
>   /*größere Shcrift*/  
> }  
> 

Damit steckst du aber auch wieder indirekt Layout ins HTML (mMn.).
Normaler Termin klingt für mich doppelt, ich würde die Klasse normal halt weglassen und das ganze wie folgt aufbauen.

  
<h2 class="termin">text</h2>...  
<h2 class="termin geaendert">text</h2>...

und dem CSS

  
.termin{  
  /*fett*/  
  /*kursiv*/  
  /*normale größe*/  
}  
.termin.geaendert {  
  /*größere Schrift*/  
}  

So könnte man z.B. die Klasse geändert auch für andere Informationen benutzen und fängt nicht mit sachen an wie .geaendertTermin/.geaendert2 oder was auch immer.

MfG
bubble

[Malcolm Beck´s]

مرحبا

wenn ich so ewas habe
<fett, kursiv, nomale Größe>11.6.2012:<Ende fett....> Ausstellung ägyptische .....
.... normaler Text
<fett, kursiv, größer, rot>05.6.2012:<Ende fett....> Achtung! Der Termin ......
.... normaler Text
so kann ich doch nicht mit h1, h2 arbeiten.

Das liest sich für mich wie eine Typografische Katastrophe, aber das ist deine Entscheidung.

<section class="ausstellungen">  
  <h1>Überschrift</h1>  
  <p>Text</p>  
</section>  
  
<section class="termine">  
  <h1>Überschrift</h1>  
  <p>Text</p>  
</section>  
  
<section class="konzerte">  
  <h1>Überschrift</h1>  
  <p>Text</p>  
</section>  
  
<section class="ausstellungen">  
  <h2>Ältere Überschrift</h2>  
  <p>Text</p>  
</section>

/* CSS */  
.ausstellungen {  
  color:red;  
}  
.termine {  
  color:yellow;  
}  
.konzerte {  
  color:blue;  
}

So sieht's aus.

Das kannst du dann wie du magst formatieren. Diese Klassen kann man übrigens praktisch jedem Element geben, deswegen ist an dieser stelle erstmal egal, ob section, aside oder sonstwas.

mfg

[Windig]

Hallo Malcolm Beck´s ,
so schön strukturiert wie in Deinem Beispiel ist es leider nicht, sondern es kommt nacheinander "Kraut und Rüben".

... deswegen ist an dieser stelle erstmal egal, ob section, aside oder sonstwas.

Genau damit habe ich meine Probleme.
section, article u.a. sollen den Inhalt beschreiben und dann ist plötzlich wieder alles egal.
Dann doch wieder lieber <div>.
Gruß
Windig

[Malcolm Beck´s]

مرحبا

Dann doch wieder lieber <div>.

Wirst du wohl Recht haben.

mfg

[Windig]

Dann doch wieder lieber <div>.

Wirst du wohl Recht haben.

Bei den widersprüchlichen Aussagen, die ich lesen musste, ganz bestimmt.

[Malcolm Beck´s]

مرحبا

Dann doch wieder lieber <div>.
Wirst du wohl Recht haben.
Bei den widersprüchlichen Aussagen, die ich lesen musste, ganz bestimmt.

Viele Wege führen nach Rom. Wir haben dir einige gezeigt, wählen musst du selbst.

Dann doch wieder lieber <div>.

Dein Kreuz, deine Wahl. Meins ist aus Carbon ;)

Dein Anliegen ist nichts kompliziertes, du machst es nur unnötig kompliziert.

mfg

[mitleser]

Hallo Gunnar.
Jetzt weiß ich, wie ich es nicht machen soll, aber leider nicht, wie man es macht.

das haben Gunnars antworten so an sich.. die konstruktiven antworten kommen, wie man sieht, von anderen

[bubble]

Jetzt weiß ich, wie ich es nicht machen soll, aber leider nicht, wie man es macht.
das haben Gunnars antworten so an sich.. die konstruktiven antworten kommen, wie man sieht, von anderen

Das sehe ich anders, wenn man layoutbezogene Bezeichnungen ausschließt bleiben schließlich nur noch semantische oder sinnfreie Bezeichnungen. Und eine dieser auszuwählen sollte wohl recht einfach sein.

Gunnars Antwort ist konstruktiv, nur muss man darüber nachdenken, was wiederum hilft zu verstehen.

MfG
bubble

[Windig]

Gunnars Antwort ist konstruktiv, nur muss man darüber nachdenken, was wiederum hilft zu verstehen.

Es kommt immer darauf an, an wen die Antwort gerichtet ist.
Einem Anfänger wie mir hilft sie nicht weiter. Und das zeigt sich jetzt in der Diskussion, wo Vorschläge kommen, denen dann sofort widersprochen wir.