zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit einem CSS Newsticker Template

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.07.2017, 13:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.07.2017
Beiträge: 1
till36 befindet sich auf einem aufstrebenden Ast
Standard Problem mit einem CSS Newsticker Template

Hallo zusammen,
habe folgendes Problem:

Bei diesem Newsticker hier rutscht der Ticker praktisch nach den 4 Newszeilen wieder nach oben, ich hätte allerdings eigentlich lieber das er praktisch endlos durchläuft... Ist das mit CSS möglich oder brauch ich dafür JS oder endlos viele Listenelemente?

Hier der Code:
Code:
<style>
.news {

 box-shadow: 0 0 4px 1px rgba(20, 20, 20, 0.8);

  

  height: 50px;

  margin: 20px auto;

  overflow: hidden;

  

  
  -webkit-user-select: none;
	font-size:14pt;
	font-weight:bold;
	font-family: Helvetica Neue, sans-serif;
}

 

.news span {

  float: left;

  color:white;

  height:100%;
padding:14px 8px 0px 8px;
  

  

 

  background: #292b2e;;

  font: 16px;

  -webkit-font-smoothing: antialiased;

  -webkit-user-select: none;

  cursor: pointer

}

 

.news ul {

  float: left;

  padding-left: 20px;

  animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;

  -webkit-user-select: none

}

 

.news ul li {line-height: 50px; list-style: none }

 

.news ul li a {

  color: black;

  text-decoration: none;

  font: 14px;

  -webkit-font-smoothing: antialiased;

  -webkit-user-select: none

}

 

.news ul:hover { animation-play-state: paused }

.news span:hover+ul { animation-play-state: paused }

@keyframes ticker {
	
  0%   {margin-top: 0}

  25%  {margin-top: -50px}

  50%  {margin-top: -100px}

  75%  {margin-top: -150px}

  100% {margin-top: 0}

}

</style>


<div class="news">

  <span>Topaktuell</span>

  <ul>

    <li><a href="#">+++ Die Geldillusion - wann platzt die Bombe? +++</li>

    <li><a href="#">+++ Die Gutmenschen-Ministerpräsidentin +++</a></li>

    <li><a href="#">+++ G20-Video zum Polizeieinsatz +++</a></li>

    <li><a href="#">+++ Fake News im Fernen Osten? Brisante Dokumente zu Nordkoreal +++</a></li>
    
  

  </ul>

</div>
Vielen dank schonmal im vorraus, will erstmal nur wissen ob es überhaupt möglich ist...

Gruß,
Till
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, newsticker

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem Browserweiche IE CSS 00001 CSS 5 24.09.2010 10:23
Problem mit CSS relative, absolute & float FrageHabe CSS 3 13.08.2010 14:40
Wie dieses Template slicen damit man es mit CSS einbinden kann? ChOpSueY! CSS 1 02.07.2008 21:47
Css und Steam Problem justinlenz Offtopic 3 27.03.2008 21:58
Problem mit Layout- Totaler CSS Noob meici CSS 3 01.03.2008 16:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:55 Uhr.