find-templates

Codes anbieten

Verwendung des pre - Elements :



Viele User verwenden das <textarea> Element, um eigene Codes anzubieten.
Problem : Wer den Editor aktiviert hat, dem wird jede Verlinkung "umgeworfen".
Auch lässt sich der Code im "textarea" nicht übersichtlich gestalten.

Eine Alternative wäre das <pre> </pre> - Element.

Ein CSS-Code im "textarea" - Feld:

der gleiche Code mit dem <pre>- Element


body {
  background-color: #FFFFFF; }

#container {
  width: 960px; 
  margin: 0px auto; 
  overflow: hidden; }

#header_container {
  width: 960px; 
  height: 120px; 
  background-image: url(Grafikadresse); }

#nav_container {
  width: 980px;
  height: 120px; }


Im rechten Feld wird die Formatierung übernommen (Abstände + Einrückung).

Beachtet bitte:
Im <pre> </pre> - Element wird HTML ausgeführt. Wenn unser Code (zum kopieren) spitze Klammern < > enthält, ersetzen wir diese durch HTML-Zeichen. Hier Beispiel öffnen .
Siehe auch auf selfhtml: Zeichen maskieren. Dort sind die Beispiele für die Klammern.


Beispiel zum einbinden in die Homepage:

- auf "Eigene Seiten editieren"
- Seite wählen, wo der Code zum kopieren angeboten werden soll
- Seite ist zum Bearbeiten offen
- oben Links im Editor auf "Quellcode" klicken
- folgenden HTML-Code einfügen :


HTML-Code für den Seiteninhalt:
<pre class="design_code">
<code>

Hier fügst du den Code ein, 
den du zum kopieren anbieten möchtest.

</code>
</pre>
der CSS-Code :
pre.design_code {
   width: 400px;
   height: 80px;
   display: block;
   padding: 10px;
   background-color: #FFFFB2;
   border: 1px solid #c9c9c9; 
   overflow: auto; }


Das <pre> Element hat als Beispiel die Klasse "design_code" bekommen.

Mit dem CSS-Code (RECHTS) geben wir dem Feld ein aussehen.
Baukasten-Design "CSS": rechten Code einfügen im Feld "css ohne style tags".
Alle anderen Designs: rechten Code einfügen im Feld "Text über Design".





Heute: 11 Besucher