How make text before ul to come in single line in html?


Tags: jquery,html,css

Problem :

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



Solution :

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>

    CSS Howto..

    How to change asp:DropDownList extended background color ? CSS class

    How to modify “sign in” page using CSS?

    how to make css dropdown menu a dropup menu

    How to make a parent object in CSS menu stay in hover state when children are hovered over

    how to make triangle in css [closed]

    How to code vertical banner

    How to apply dynamic CSS for the label in IE7

    How to get rid of the white vertical stroke after every repeating background image done with repeat-x value in CSS?

    How to get this specific responsive nav?

    How to get css width of class?

    How to draw heart with text in middle?

    How to place the same image at the top and at the bottom of the same column?

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    Twitter Bootstrap with responsive design — How to style own, non-framework elements [closed]

    CSS: How do I keep the text from wreaking havoc on the layout?

    CSS: How to change colour of active navigation page menu

    How to make a CSS rule which applied on a div affect another div?

    how to change the selecting background color

    How to make multiple divs always fill out the whole browser size?

    How to access two Ids in one css selector

    Foundation 6: how to handle images that has an vertical overflow within one row?

    How do I make the Brand, links, and facebook link on the same line? Bootstrap 3

    How to create grid position elements like in this image css

    hyperlink inheriting color, how to overcome

    how to center a form using css?

    CSS How to generate this Shape on a Div or on Canvas

    How to make Block Container with Inline-Block Child in CSS

    How to change img margin inside a table using css hover

    how to prevent css and js being cached by internet service provider?

    How to get row of floated images inside a div element to resize with browser window