I am using jquery li scroll plugin in my site for creating news ticker and this jqueryli scroll plugin needs your news to be in <li>
tag and this plugin works fine for me but the problem is that I want to put text before news ticker.
I want output like NEWS FEED : actual news
currently I have achieved "actual news" and when I tried to put NEWS FEED label in fron of ticker it gives my problem.
The problem is that when I put NEWS FEED label in front of ticker, the ticker news goes to the next line and I get out out as :
NEWS FEED :
"actual news "
I have used code :
<div>NEWS FEED
<ul id="ticker01">
<?php foreach ($news_array as $single_news) : ?>
<li><span><?php echo $single_news; ?><span></li>
<?php endforeach; ?>
</ul>
<div>
How I can achieve NEWS FEED label and news ticker in single line ?
I have edited css as follows:
.tickercontainer { /* the outer div with the black border */
width: 850px;
height: 32px;
margin-left: 100px;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 718px;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
white-space: nowrap;
padding: 0;
font-family: "Times New Roman";
font-size: 16px;
color: #ff0000;
margin: 0 50px 0 0;
}
/* liScroll styles */
here is problem fiddle : click here
Okay Done.
Works: http://jsfiddle.net/p6akP/2/
#outerdiv{
float:left;
width:1000px;
}
.tickercontainer { /* the outer div with the black border */
width: 850px;
height: 32px;
float:right;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask {
top:0;
//other styling you have
}
<div id="outerdiv">NEWS FEED
<ul id="ticker01">
<li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
<li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
<li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
</ul>
<div>
display: inline
is the way to go about it. li
elements are block type by default. More here: https://developer.mozilla.org/en-US/docs/Web/CSS/display
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.