Codes



Einfachen Markieren-Kopieren Fenster


Code


Markieren Fenster mit JS


Markieren


Code

JS in head einfügen

Java Skript
 <script language="Javascript">
<!--
/*
Select All script- By Website Abstraction(http://www.wsabstract.com)
Over 400+ free JavaScripts here!
*/
function selectAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
}
//-->
</script>

Body Bereich

<form name="test">
<textarea name="select1" rows="10" cols="50">
  Text Text text
<br>
  <a href="javascript:selectAll('test.select1')">Markieren</a><br></form>

Quelle

Textatera Fenster

Code zum mitnehmen

<textarea rows="5" cols="50">
gnaz normale Textatera Fenster
</textarea>

Verweise Fenster


Code zum mitnehmen

<form action="input_button.htm">
  <p>
    <textarea cols="40" rows="1" name="textfeld">Hier kann ein Text rein</textarea> <br>
    <input type="button" name="Text 1" value="Thema1"
      onclick="this.form.textfeld.value='Thema nummer eins '">
    <input type="button" name="Text 2" value="Thema2"
      onclick="this.form.textfeld.value='Thema nummer zwei'">
       <input type="button" name="Text 3" value="Thema3"
      onclick="this.form.textfeld.value='Thema nummer drei '">
        <input type="button" name="Text 4" value="Thema4"
      onclick="this.form.textfeld.value='Thema nummer vier '">
   </p>
</form>

Infobox

In Diesen Text ist ein klienen Infobox Infobox:
Hier kann ein klienes oder großes Infobox rein
nach wunsch kann man den gut gestallten versteckt.

Code zum mitnehmen

  CSS Teil       

          <style type="text/css">
  a.infobox { border-bottom: 7px double #8F1C5F; text-decoration:none; }
  a.infobox:hover { cursor:help; color:#F90616; background:#EFECB5; }
  a.infobox span { visibility:hidden; position:absolute; left:-99em;
    margin-top:40px; padding:25px; text-decoration:none; }
  a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
    visibility:visible; left:20px;
    border:2px solid #1A7342; color:blue; background:#B1EEB5; }
</style>

Das Kommt auch in head Bereich

<!--[if IE 5]><style type="text/css">
  a.infobox span { display:none; }
  a.infobox:hover span { display:block; }
</style><![endif]-->

HTML Bereich
<p> <a class="infobox" href="#INFO">Infobox<span> <b>Infobox:</b><br />
Hier kommt das Text was in den Info box   zu sehen ist . </span></a> </p>
 

Quelle von diesen Skript

News Box

Die neuesten Schlagzeilen lesen Sie hier

Code zum mitnehmen

head Bereich JS










head Bereich -->CSS






Im Body Bereich










Inspiration und Skript Quelle

Hier ist ein Text versteckt!

tex text text tex text text tex text text tex text text tex text text tex text text tex text text tex text text tex text text tex text text tex text text tex text text tex.

Weiter lesen

eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Code zum mitnehmen

Java Skript in head Bereich einfügen 
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
 
<script type="text/javascript" src="/verstekt.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".hidder").click(function() {
if($(this).next().css("display") == "block") {
$(this).next().hide("slow");
}
else {
$(this).next().show("slow");
}
});
});
</script>


HTML Teil
<p>tex text text tex text text tex text text tex text text tex text .</p>
  <a href="javascript: none" class="hidder"><u><b>Weiter lesen</b></u></a>

<div style="display: none; margin: 10px 0; border: 1px solid #ccc;
 background: #9EFF00; padding: 15px; width: 400px; font-family: serif;
   font-size: 15x;color: #3F0000; font-weight:bold; text-align: left;"> Hier das versteckte Text einfügen ! </div>




Hier Direkter Link zum Java Skript-googleapis

Code so wie in den Beispiel hier zum runterladen


Das <p> steht für das englische „paragraph“ = Absatz
Ein Absatz hält einen Abstand zum nachfolgenden Element.
Man kann auch den Absatz auf unterschiedliche weise gestalten und formatieren.
Hier ein paar Beispiele

mehr zum Thema ...

<p style="border-width:medium; border-color:#FF9999; border-style:dotted; padding:5px;">
</p>

dotted

Textabsatz mit Rahmendicke medium und Typ dotted.


<p style="border-width:medium; border-color:#9999FF; border-style:dashed; padding:5px;">
</p>

dashed

Textabsatz mit Rahmendicke medium und Typ dashed.

<p style="border-width:medium; border-color:#66CC66; border-style:solid; padding:5px;">
</p>

solid

Textabsatz mit Rahmendicke medium und Typ solid.

<p style="border-width:medium; border-color:#FF9999; border-style:double; padding:5px;">
</p>

Textabsatz mit Rahmendicke medium und Typ double.

double

<p style="border-width:12px; border-color:#9999FF; border-style:groove; padding:5px;">

</p>

groove

Textabsatz mit Rahmendicke 12px und Typ groove.

<p style="border-width:12px; border-color:#66CC66; border-style:ridge; padding:5px;">
.</p>

ridge

Textabsatz mit Rahmendicke 12px und Typ ridge

<p style="border-width:12px; border-color:#FF9999; border-style:inset; padding:5px;">
.</p>

inset

Textabsatz mit Rahmendicke 12px und Typ inset

Textabsatz mit Rahmendicke 12px und Typ outset <p style="border-width:12px; border-color:#9999FF; border-style:outset; padding:5px;">
</p>

outset

Textabsatz mit Rahmendicke 12px und Typ outset.

In Praxis sieht  das so aus das man   einen  gewünschte Code erstellt,  und Dazwischen  einen Text einfügt ..
hier ein B..


und so sieht das dann aus

Hier kommt das gewünschte Inhlat

Die Gestaltung Möglichkeiten sind sehr viele .
Voraussetzung dafür ist : ein wenig CSS Kenntnisse sind .

Hier drei Beispiele

Hier ist ein P Absatz mir breite vom 30%


Hier Ist ein Absatz mit rammen dicke 5px , rammen Typ Solid breite 50% , innnen Abstand 3% , einen farbigen Hintergrund ,Schrift Farbe ist auch bestimmt so wie Schrift größe


Noch das Gleiche ,nur mit eine Grafik in den Hintergrund

Hier Kommt das Inhalt


bildIch habe ein einfaches Rezept um fit zu bleiben - Ich laufe jeden Tag Amok. Hildegard Knef

Wünsche allem viel spaß beim üben lernen und gestallten .Einfach immer schön am Ball bleiben :-)


Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Listen-Typen

Listen-Typen

Aufzählungsliste <ul> mit Darstellungstyp disc

  • Inhalt
  • Inhalt
  • Inhalt

Code

Aufzählungsliste <ul> mit Darstellungstyp circle

  • Inhalt
  • Inhalt
  • Inhalt

Code

Aufzählungsliste <ul> mit Darstellungstyp square

  • Inhalt
  • Inhalt
  • Inhalt

Code


Aufzählungsliste <ul> mit Darstellungstyp none

  • Inhalt
  • Inhalt
  • Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp decimal

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt
  9. Inhalt
  10. Inhalt

Code

Nummerierte Liste mit Startwert 10

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp lower-roman

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt
  9. Inhalt
  10. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp upper-roman

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt
  9. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp lower-alpha

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp upper-alpha

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp lower-greek

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp hebrew

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp decimal-leading-zero

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt
  9. Inhalt
  10. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp cjk-ideographic

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp hiragana

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt
  9. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp katakana

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp hiragana-iroha

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp katakana-iroha

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt
  9. Inhalt

Code

Code Quelle

Tabellen

Muster 1

Zeille 1
Zeille 2 Zeille 3

Code zum mitnehmen


Muster 2

Zeille 1 Zeille 2
Zeille 3

Code zum mitnehmen


Muster 3

Mit hover Effekt

Nr. Beschreibung
1. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
2. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code

CSS Bereich


Body Bereich


Letzte Aktualisierung:    20.11.2017 21:57 Uhr

Nach oben

Design by HomepageHelfer.org and © Hinweise & TEAM