Angepinnt (Offplay: Presseschau - How To)

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    Willkommen im Forum des TrekZone Network Star Trek Rollenspiels.
    Neu hier? Neben dem Forum findest du viele weitere Informationen in unserem Hauptcomputer-Wiki. Wenn du mitspielen möchtest, melde dich bitte über das Anmeldeformular an. Wir freuen uns auf dich!

    • (Offplay: Presseschau - How To)

      Nachdem in der Presseschau immer wieder schriftsetzerischer Wildwuchs zu sehen ist, bin ich jetzt 'mal hingegangen und habe mit Inspiration durch eine Vorlage von Jason eine CSS-Datei geschrieben, die das "layouten" der Artikel vereinfachen und vereinheitlichen soll.

      Bevor ich groß erkläre, einfach 'mal ein Musterblatt:

      Quellcode

      1. <link href="zeitungen.css" rel="stylesheet" type="text/css">
      2. <div class="ufn_nachricht">
      3. <div class="logo"><img src="images/ufn.png"></div>
      4. <div class="titel">Lorem Ipsum</div>
      5. <div class="ort_zeit">Hier, 1337.47, STFU</div>
      6. <div class="text"><p>Erster Absatz Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      7. <p>Zweiter Absatz Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      8. <p>"n + 1"-ter Absatz... Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
      9. </div>
      10. </div>


      Daraus wird dann:

      Lorem Ipsum
      Hier, 1337.47, STFU

      Erster Absatz Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Zweiter Absatz Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

      "n + 1"-ter Absatz... Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


      Das Layout des Mediums, welches man verwendet, wird im obersten div-Container angebenen (hier ufn_nachricht für United FOX News und eine (kurze) Nachricht). Daneben gibt es auch fnn_nachricht und epa_nachricht - weiteres folgt demnächst.

      Für größere Texte existiert die Klasse ufn_artikel (auch mit epa und fnn). Hier gibt es die Unterklassen titel1 und titel2 (titel gibt es nicht!), man kann also einen zweiten Titel setzen. Artikel sind im Gegensatz zur Nachricht zweispaltig. Aber hierauf muss man nicht groß achten, sondern macht ebenfalls mit ...

      Quellcode

      1. <p>Text</p>


      ... die Absätze.

      Schließlich gibt es natürlich auch noch 'was für Interviews, aber wie das funktioniert schreibe ich später/die Tage.

      PS: Da ich eine CSS3-Funktion verwendet habe, die noch kein Standard ist, kann es sein, dass alte/blöde Browser Probleme haben, die zwei Spalten anzuzeigen. Bei wem das der Fall ist, der sei motiviert, sich einen aktuellen/ordentlichen Browser zuzulegen. ;-)

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Adrian Shield () aus folgendem Grund: Fehler korrigiert.

    • Da HTML nicht mehr funktioniert, habe ich ein paar gezielte BB-Codes hinzugefügt.

      Quellcode

      1. [presse=ufn_nachricht]
      2. [pmeta=logo][plogo]ufn[/plogo][/pmeta]
      3. [pmeta=titel]Lorem Ipsum[/pmeta]
      4. [pmeta=ort_zeit]Hier, 1337.47, STFU[/pmeta]
      5. [pmeta=text]
      6. [p]Erster Absatz Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/p]
      7. [p]Zweiter Absatz Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.[/p]
      8. [p]"n + 1"-ter Absatz... Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi[/p]
      9. [/pmeta]
      10. [/presse]



      Lorem Ipsum

      Hier, 1337.47, STFU


      Erster Absatz Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


      Zweiter Absatz Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


      "n + 1"-ter Absatz... Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi





      Gültige Werte für die BB-Codes sind folgende:

      presse: zeitung_typ - z.B.: epa_artikel
      • zeitung: epa, fnn, tfp, ufn
      • typ: nachricht, artikel, interview
      pmeta: Je nach Nachrichtentyp
      • nachricht: logo, titel, ort_zeit, text
      • artikel: logo, titel1, titel2, ort_zeit, text
      • interview: logo, titel1, titel2, ort_zeit, text, einleitung, ende
      plogo: epa, fnn, tfp, ufn


      Beispiel für ein Interview

      Quellcode

      1. [presse=epa_interview]
      2. [pmeta=logo][plogo]epa[/plogo][/pmeta]
      3. [pmeta=titel1]Lorem Ipsum[/pmeta]
      4. [pmeta=titel2]Ein Interview mit absolut keinem Inhalt[/pmeta]
      5. [pmeta=ort_zeit]Hier, 1337.47, STFU[/pmeta]
      6. [pmeta=einleitung]Einleitung Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/pmeta]
      7. [pmeta=text]
      8. [p][fr]Frage 1:[/fr]Hier ist die Frage?[/p]
      9. [p][aw]Erste Antwort[/aw]Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/p]
      10. [p][fr]Frage 2[/fr]Was kann man außerdem fragen?[/p]
      11. [p][aw]Zweite Antwort[/aw]Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.[/p]
      12. [p][fr]"n + 1"-te Frage[/fr]Hier ist eine Nachfrage?[/p]
      13. [p][aw]"n + 1"-te Antwort...[/aw]Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi[/p]
      14. [/pmeta]
      15. [pmeta=ende]Das waren alle Fragen[/pmeta]
      16. [/presse]
      Alles anzeigen




      Lorem Ipsum

      Ein Interview mit absolut keinem Inhalt

      Hier, 1337.47, STFU

      Einleitung Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


      Frage 1:Hier ist die Frage?


      Erste AntwortLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


      Frage 2Was kann man außerdem fragen?


      Zweite AntwortDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


      "n + 1"-te FrageHier ist eine Nachfrage?


      "n + 1"-te Antwort...Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi



      Das waren alle Fragen



      Nynaeve Storm
      The purpose of a storyteller is not to tell you how to think, but to give you questions to think upon.

      WBB4 - Probleme & WünscheWiki: TechnischesIRC-Toolkits

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Nynaeve Storm ()

    Seit 2004 imTrekZone Network