find-templates

newsticker

zurück zur Übersicht

animierter Newsticker






Schritt 1 : Der CSS-Code

  • mit dem CSS-Code bekommt Newsticker gewünschtes Aussehen
  • auf "Eigene Seiten editieren" und gewünschte Seite auswählen
  • im Editor (Werkzeugleiste) oben links auf "Quellcode" klicken
  • zu Beginn (als erstes) dann folgenden Code einfügen

<style type="text/css">
<!--

/* Gesamte News-Box */
#newsbox{
	height: 230px;
	width: 400px;
	overflow: hidden;
	padding: 6px 10px 14px 10px;
        background-color: #FFFFFF;
        border: 1px solid #c9c9c9;
        border-radius: 8px; }

/* News-Felder */
#newsbox li{
	height: 70px;
	padding: 5px;
	list-style-type: none;}

/* Linkfarbe */
#newsbox a{ color: #000000;}

/* Aussehen News-Titel */
.news-title {
	display: block;
	font-weight: bold;
	margin-bottom: 4px;
	font-size: 11px; }

/* Aussehen Newstext */
.news-text {
	display: block;
	font-size: 11px;
	color: #666666; }
		
/* Grafiken im Newsticker */
#newsbox img {
        width: 80px;
        height: 60px;
	float:left;
	margin-right: 14px;
	padding: 4px;
	border: 1px solid #c9c9c9; }

-->
</style>




Schritt 2: Der Javascript-Code

  • mit dem Javascript-Code wird die "Animation" ermöglicht
  • auch mit im Seiteninhalt einfügen
  • nach dem CSS-Code, also nach dem --></style>


Schritt 3: Der HTML-Code des Newstickers

  • hier passen wir die Überschriften an
  • hier fügen wir gewünschte Inhalte ein
  • Grafikgröße hier 80 x 60 Pixel
  • ebenfalls mit in den Seiteninhalt einfügen :

<br />
<br />

<ul id="newsbox">

<li>
<img src="GRAFIKADRESSE.jpg" alt="Bild" />
<a href="/Seite.htm" class="news-title"> Hier News-Titel 1 </a>
<span class="news-text"> Hier Beschreibung News 1 </span>
</li>
	
<li>
<img src="GRAFIKADRESSE.jpg" alt="Bild" />
<a href="/Seite.htm" class="news-title"> Hier News-Titel 2 </a>
<span class="news-text"> Hier Beschreibung News 2 </span>
</li>
	
<li>
<img src="GRAFIKADRESSE.jpg" alt="Bild" />
<a href="/Seite.htm" class="news-title"> Hier News-Titel 3 </a>
<span class="news-text"> Hier Beschreibung News 3 </span>
</li>

<li>
<img src="GRAFIKADRESSE.jpg" alt="Bild" />
<a href="/Seite.htm" class="news-title"> Hier News-Titel 4 </a>
<span class="news-text"> Hier Beschreibung News 4 </span>
</li>

</ul>

<br />
<br />
<br />

• ersetze /Seite.htm durch die Seitenadresse, auf die verlinkt werden soll
• bei Grafikadresse die URL vom Bild einfügen (die http://.............jpg)




Heute: 7 Besucher