Wie formatiere ich eine News bzw Forenbeitrag?

Everyone can add tutorials for the use of aniSearch to make it easier for new users. Great tutorials will be linked to from within aniSearch.

German Wie formatiere ich eine News bzw Forenbeitrag?

  •  
Avatar: Vendel
Admin
Thread Creator#1
Bitte stellt ruhig im Support Fragen rund um die Formatierung von Beiträgen. Ich beobachte, dass viele News-Schreiber teils exotische und komplett unnötige Konstrukte mit Tabellen erstellen. Ich versuche auf die Fragen hier einzugehen und den Startbeitrag dahingehend zu erweitern.

Text neben eine Grafik positionieren.

Hierfür gibt es mindestens zwei einfache Möglichkeiten. Zuerst stellt man sich die Frage: Soll der Text um die Grafik fließen oder soll der Text nur neben der Grafik positioniert sein? Hier die zwei Lösungen jeweils dazu:
  1. Text soll um die Grafik fließen:

    Dazu fügt ihr im Editor eure Grafik über den "Bild einfügen/bearbeiten"-Button hinzu und fügt euren Text direkt ohne ein Leerzeichen daneben ein. Jetzt klickt bitte wieder auf die Grafik und oben auf den markierten "Bild einfügen/bearbeiten"-Button. Dort wählt den zweiten Reiter "Erweitert" aus. In der Eingabe "Stil" könnt ihr CSS-Styles eintragen, tragt die benötigten Styles hintereinander ein:
    • Das Bild soll links float:left; oder rechts stehen float:right;
    • Den Abstand zwischen Text und Bild kann man einzeln für jede Seite festlegen:
      padding-top:10px; (Oben), padding-right:10px; (Rechts), padding-bottom:10px; (Unten), padding-left:10px; (Links)
      oder in der selben Reihenfolge als ein kurzer Befehl:
      padding:0 10px 5px 0; (Oben, Rechts, Unten, Links)
      Wenn die beiden gegenüber liegenden Seiten identisch sind:
      padding:0 10px; (Oben/Unten, Rechts/Links)
      Wenn alle Seiten identisch sind:
      padding:10px;

    Das sieht dann so aus: float:left; padding:0 10px 10px 0;

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


  2. Text soll nicht um die Grafik fließen:

    Die einfachste aber nicht Mobile taugliche Methode, ohne extra HTML-Kenntnisse zu benötigen, ist eine Tabelle mit einer Zeile und zwei Spalten. Wähle dazu oben den Button für "Tabelle" aus und dort wähle 2x1 bei "Tabelle einfügen". Jetzt füge in eine Spalte deinen Text und in die andere Spalte deine Grafik ein.

    Ich füge in meinem Beispiel rechts eine Grafik hinzu. Wer dies macht, wird feststellen, dass die Grafik plötzlich fast ganz links platziert ist. Um diese an den rechten Rand zu setzen, markiere die Grafik und klicke auf den "Rechtsbündig ausrichten"-Button. Als nächstes füge ich meinen Text in die andere Spalte ein. Jetzt passiert etwas, das wir gar nicht wollen, zwischen Text und Grafik ist kein Abstand. Das lässt sich sehr leicht lösen, indem ihr eine der beiden Spalten eine "Breite" gibt. In der Regel empfehle ich hier die Spalte mit der Grafik, denn von der Grafik kennt ihr die Breite und addiert zu dieser zum Beispiel 10 Pixel als den Abstand hinzu.

    Setzt den Cursor in die Spalte mit der Grafik und wählt oben im "Tabelle"-Button den Eintrag "Zelle" aus und darin den Eintrag "Zelleneigenschaften". Gleich in der ersten Eingabe tragt ihr euren Wert für die "Breite" ein und schon habt ihr einen festen Abstand zwischen dem Text und der Grafik.

    Die Angabe der Breite der Zelle vererbt sich bei mehrzeiligen Tabelle auf die gesamte Spalte. Ihr könnt eine Breite natürlich für jede Zelle(Spalte) angeben.

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


    Wenn man es Mobile tauglich umsetzen möchte, muss man leider den Quellcode bearbeiten. Dazu klickt oben im Editor auf den Button mit "<>". Eine ausführliche Beschreibung ist in einem Beitrag weiter unten auf dieser Seite vorgestellt.

Zusatz:


Es gibt Situationen, in denen man sich ein Layout speichert und dabei kann es vorkommen dass man dort Text um die Grafik fließen lässt, aber der Text in manchen Fällen kürzer ist. Der nachfolgende Text der eigentlich unter der Grafik weitergehen sollte, würde jetzt erstmal weiterhin um die Grafik fließen. Um das zu verhindern, geht man in den Quelltext und fügt an gewünschter Stelle einen Unterbrecher ein. Eine Möglichkeit wäre der HTML-Code: <br clear="all">

Hier ein Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem


Feintuning:
Wenn ihr auf das Bild klickt und per Button bearbeitet, könnt ihr die BiIdgröße optimieren. Beachtet das ihr das Verhältnis beibehaltet. In der Regel kümmert sich der Editor selbst darum, wenn ihr den Haken gesetzt habt.
Post was last edited on 29.12.2022 03:31.
    • ×1
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Vendel
Admin
Thread Creator#2
Ein Videostream einbinden.

Es gibt hier zwei Möglichkeiten einen Videostream einzubinden. Über den Button "Video einfügen/Bearbeiten" könnt ihr im Reiter zwischen zwei Arten wählen.
  1. Unter "Allgemein" eine Quelle/URL angeben.

    Bei Youtube geht ihr zu einem Videostream und klickt dort auf "Teilen" und erhaltet dort eine URL wie diese https://youtu.be/GLHH4dVbP94. Wenn ihr diese nun eintragt, hat der Editor keine Ahnung wie die echte Auflösung des Streams ist und stellt es Standard im alten Format als 4:3 dar. Bei Videos die eigentlich im Breitbild-Format sind, werden dadurch schwarze Balken oben und unten dargestellt.




  2. Unter "Einbetten" sollt ihr einen Code einfügen.

    Auch hier unterstützt euch Youtube und stellt euch neben "Teilen" den "Einbetten"-Code bereit. Genau diesen braucht ihr ebenfalls nur kopieren und im Editor einfügen. Der Editor unterstützt hier aus Sicherheitsgründen nur den iframe-Code. Beispiel-Code aus Youtube:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/GLHH4dVbP94" frameborder="0" allowfullscreen></iframe>

    Wir ihr am Code erkennen könnt, stellt dieser euch endlich die korrekte Auflösung bereit und zeigt damit das Video im richtigen Breitbild-Format an, ohne die unnötigen schwarzen Balken.


Wenn möglich, solltet ihr entweder direkt das "Einbetten" verwenden oder die korrekte Auflösung kennen und mit eintragen.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Vendel
Admin
Thread Creator#3
Auf Tabellen wenn möglich verzichten!

Viele nutzen gerne Tabellen, da sie ein einfaches Mittel darstellen Inhalte auf Spalten aufzuteilen. Wer aber ein Thema erstellt, welches auch auf dem Smartphone gut aussehen soll, dem möchte ich dringend davon abraten und hier eine Alternative vorschlagen.

Was ist denn das Problem mit Tabellen?
Wenn man einer Tabelle Spalten gibt, dann sollen diese in der Zeile auch nebeneinander liegen. Ein Smartphone hat aber oft gar nicht den Platz diesen Inhalt in der Form dazustellen, womit der Inhalt komplett unlesbar werden kann. 

Was wäre denn eine mögliche Lösung?
Das neue Design bietet dafür euch bereits eine Lösung, welche ihr jedoch über den Quelltext-Button direkt eintippen müsst. Das Standard Grundgerüst sieht immer so aus, egal wie viele Spalten ihr letztendlich verwenden wollt:

<ul class="cols"><li>Inhalt der ersten Spalte</li><li>Inhalt der zweiten Spalte</li></ul>

Hier ein Beispiel, zur Ansicht auf dem Desktop und Smartphone:

  • Inhalt der ersten Spalte
  • Inhalt der zweiten Spalte

Dieser Code erzeugt zwei Spalten die jeweils die Hälfte der verfügbaren Breite einnehmen. Wenn das Browserfenster kleiner als 800px breit ist, dann werden die Spalten nicht mehr nebeneinander, sondern automatisch untereinander dargestellt und nehmen dann jeweils 100% der verfügbaren Breite ein.

Für mehr Spalten; Der muss lediglich die Breite im <li> mit angeben. Hier ein Beispiel für 4 Spalten:

<ul class="cols"><li style="width:25%">Inhalt der ersten Spalte</li><li style="width:25%">Inhalt der zweiten Spalte</li><li style="width:25%">Inhalt der dritten Spalte</li><li style="width:25%">Inhalt der vierten Spalte</li></ul>

Hier das entsprechende Beispiel, wie es auf dem Desktop und im Smartphone ausschaut:

  • Inhalt der ersten Spalte
  • Inhalt der zweiten Spalte
  • Inhalt der dritten Spalte
  • Inhalt der vierten Spalte

In der zwei Spalten-Variante könnt ihr auch die Breite selbst anpassen, indem ihr dem width beispielsweise den Wert 70% gebt und der zweiten Spalte entsprechend eine width von 30%. Spielt ruhig mit den Werten etwas rum. 

Ihr könnt auch Pixelwerte verwenden. Hier erhält die erste Spalte 200px und die Mitte passt sich automatisch an und hinten sind es 300px:

<ul class="cols"><li style="width:200px">Inhalt der ersten Spalte</li><li style="width:auto;padding-right:10px">Inhalt der zweiten Spalte</li><li style="width:300px">Inhalt der dritten Spalte</li></ul>

Hier das entsprechende Beispiel, wie es auf dem Desktop und im Smartphone ausschaut, beachtet das "padding-right:10px;", damit könnt ihr den Abstand zur nächsten Spalte steuern, so kleben die Spalteninhalte nicht direkt aneinander:

  • Inhalt der ersten Spalte mit 200px Breite
  • Inhalt der zweiten Spalte mit automatischer Breite
  • Inhalt der dritten Spalte mit 300px Breite
Post was last edited on 07.02.2016 14:31.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Vendel
Admin
Thread Creator#4
Grafiken für die mobile Ansicht anpassen.

Im Startbeitrag wurde bereits beschrieben wie man einen Text um eine Grafiken fließen lassen kann. Für Mobile Geräte kann das in der Darstellung nachteilig werden, da nur noch einzelne Worte neben die Grafik passen. Hier kann man einen kleinen Trick anwenden, indem man der Grafik die CSS-Klassen "mblock" und "mcenter" mitgibt.

"mblock" bewirkt dabei dass die Grafik den Text in der mobilen Ansicht nicht mehr um sich fließen lässt und "mcenter" zentriert zusätzlich die Grafik. Hier ein Beispiel dazu:

<img class="mblock mcenter" style="float: left; padding: 0 10px 10px 0;" src="image.jpg">

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

In der Mobile-Variante würde dann der Text unter das Bild rutschen und das Bild über den Text zentriert angezeigt werden.
Post was last edited on 29.12.2022 03:31.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Vendel
Admin
Thread Creator#5
Tabellen richtig einsetzen!

Hier möchte ich kurz eine Möglichkeit vorstellen, tabellarische Daten etwas hübscher darzustellen. Fügt einfach den Code aus dem Zitat über den Quelltext-Button des Editors an die gewünschte Position ein und bearbeitet dort die Tabelle nach euren Vorgaben weiter.

Code
<table class="responsive-table">
<thead>
<tr>
<th class="w10">SpalteA</th>
<th class="w10">SpalteB</th>
<th class="w10">SpalteC</th>
<th class="left">SpalteD</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1.</th >
<td>ValueA</td>
<td>ValueB</td>
<td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
</tr>
<tr>
<th scope="row">2.</th >
<td>ValueC</td>
<td>ValueD</td>
<td class="left">Stet clita kasd gubergren</td>
</tr>
<tr>
<th scope="row">3.</th >
<td>ValueE</td>
<td>ValueF</td>
<td class="left">Duis autem vel eum iriure dolor in hendrerit</td>
</tr>
</tbody>
</table>

So sieht es dann aus:

SpalteASpalteBSpalteCSpalteD
1.ValueAValueBLorem ipsum dolor sit amet, consetetur sadipscing elitr
2.ValueCValueDStet clita kasd gubergren
3.ValueEValueFDuis autem vel eum iriure dolor in hendrerit

Falls ihr alle Felder linksbündig haben wollt, reicht es aus im Kopf das Wort "left" hinzuzufügen,

Code
<table class="responsive-table left">

was dann so ausschaut:

SpalteASpalteBSpalteCSpalteD
1.ValueAValueBLorem ipsum dolor sit amet, consetetur sadipscing elitr
2.ValueCValueDStet clita kasd gubergren
3.ValueEValueFDuis autem vel eum iriure dolor in hendrerit


Erklärungen Kopfzeile:

Im Block <thead> definiert ihr die Überschriften und gebt hier an, welche Breite für diese Spalte tabellenweit gelten soll.
<thead>
<tr>
<th class="w10">SpalteA</th>
<th class="w10">SpalteB</th>
<th class="w10">SpalteC</th>
<th class="left">SpalteD</th>
</tr>
</thead>
Für die Breitenangabe einer Spalte stehen momentan folgende Klassen class="" zur Verfügung:

w5 = 5%
w6 = 6%
w7 = 7%
w8 = 8%
w9 = 9%
w10 = 10%
w15 = 15%
w20 = 20%
w25 = 25%
w30 = 30%
w40 = 40%
px30 = 30px
px80 = 80px
px100 = 100px
px150 = 150px

Dort wo ihr keine Breitenangabe einträgt, wird automatisch der übrige freie Platz verwendet. Siehe Beispiel oben, indem die ersten 3 Spalten die Breite 10% erhalten haben, was zusammen 30% macht und die restlichen 70% nimmt sich die letzte Spalte dann selbst. Dabei ist es egal wo die Spalte steht.

Erklärungen Datenzeilen:

In <tbody> liegen eure Datenzellen. Jeder <tr> Block ist eine Zeile mit den Spalten, welche mittels <td> definiert werden. Über die class in einem <td> oder <th> könnt ihr unter anderem den Inhalt der Zelle ausrichten. Standard wird der Inhalt einer Zelle mittig ausgerichtet. Wenn ihr es links oder rechts ausrichten möchtet, verwendet bitte "left" oder "right", wie im Beispiel oben zu sehen. Wichtig ist für Mobile, dass die erste Spalte in einem <tr> Block diesen Aufbau hat:
<th scope="row">Textinhalt der Zelle</th >
Im Gegensatz zu den restlichen Zeilen in einem <tr> hat das erste Zeile diesen beschriebenen Aufbau.


Beachtet bitte: Die Anzahl der <td> muss in jedem <tr> Block übereinstimmen. Bei Problemen oder Fragen, meldet euch bitte einfach im Feedback-Bereich.
Post was last edited on 06.04.2018 03:30.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Vendel
Admin
Thread Creator#6
Die Accordion-Funktion

Eine Alternative zur Spoiler-Funktion, stellt die Accordion-Funktion dar. In der Standard-Version öffnet und schließt sich der Block mit einem Klick auf den Titel.

<section class="accordion">
<h3>Titelzeile 1</h3>
<div>Textblock 1</div>
<h3>Titelzeile 2</h3>
<div>Textblock 2</div>
<h3>Titelzeile 3</h3>
<div>Textblock 3</div>
</section>

Titelzeile 1

Textblock 1

Titelzeile 2

Textblock 2

Titelzeile 3

Textblock 3

Das geht natürlich auch nur mit einem einzelnen Element:

<section class="accordion">
<h3>Titelzeile</h3>
<div>Textblock</div>
</section>

Titelzeile

Textblock

Wenn man den Textblock sofort sichtbar haben möchte, dann fügt man ein class="active" in das h3 Titelelement ein. Dies sieht dann so aus:

<section class="accordion">
<h3 class="active">Titelzeile</h3>
<div>Textblock</div>
</section>

Titelzeile

Textblock

Möchte man immer nur ein Element öffnet und die anderen sollen sich automatisch schließen, so fügt man der "section" noch single als class hinzu:

<section class="accordion single">
<h3>Titelzeile 1</h3>
<div>Textblock 1</div>
<h3>Titelzeile 2</h3>
<div>Textblock 2</div>
<h3>Titelzeile 3</h3>
<div>Textblock 3</div>
</section>

Titelzeile 1

Textblock 1

Titelzeile 2

Textblock 2

Titelzeile 3

Textblock 3

Man kann so von einem bis beliebig viele Elemente hinzufügen.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Vendel
Admin
Thread Creator#7
Dies ist eine Erweiterung des Themas "Tabellen richtig einsetzen!"

Hier optimieren wir den Code der Tabelle für Mobilegeräte, denn aktuell wird der Inhalt in der Mobileansicht mittels Javascript nachträglich ausgelesen und dort in die Tabelle eingefügt. Diese Anleitung ist nur für diejenigen gedacht, die ihrer Tabelle diese Daten von Anfang an mitgeben und ggf. die Titel selbst festlegen wollen.

Vorweg; Achtet bitte darauf, dass im Tabellen-Code keine style="....." Angaben mit width oder height stehen. Dies kann passieren, wenn ihr versehentlich eine Zelle der Tabelle im Editor manuell bearbeitet. Wenn vorhanden, könnt ihr es dort einfach rauslöschen.

Diese Änderung ist dafür verantwortlich, dass in der Mobileansicht nun jedes Rechteck, für eine Zeile, einen Titel/Header hat. Wenn man jetzt noch die Titel links selbst festlegen möchte, dann fügt man jedem TD (Spalte) ein data-title="Text" hinzu:

<tr>
<th scope="row">1.</th>
<td data-title="Text A">ValueA</td>
<td data-title="Text B">ValueB</td>
<td data-title="Text C" class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
</tr>

Dies muss so für jeden <TR>-Block gemacht werden. Die Texte könnt ihr dort in jedem TD auch frei definieren oder identisch zum Block davor.

Wer kurz sehen möchte wie es dann im Mobile ausschauen würde, der muss im Browser dafür nur die Tastenkombination STRG+SHIFT+C drücken um den Inspektor zu öffnen und dort dann STRG+SHIFT+M um zwischen Mobile- und Desktopansicht zu wechseln.
Post was last edited on 06.04.2018 03:28.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
  •  

Settings

  • Topic closed