Скрол поленце

[erik_1001]

Здравейте отново.
Имам следния проблем:
Имам си едно поленце, където трябва да имам текст на 1 ред, който да скролвам, обаче не ме огрява много (само в гугъл хром става номера) и не схващам защо точно. Задължително е да бъде съставено от различни <li>-та (част от меню е, то иначе ако не бяха li-тата си бачка). Искрено бих се радвал, ако някой ми помогне с подходяща промяна в кода .

<html>
<head>
<style type="text/css">

#content
{ 
position:absolute;
top: 0px;
left: -60px;

/*eto kude sme*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
variant #1:
width: auto; --- bez promqna;

variant #2:
width: 100; --- v takuv sluchai daje i s otmestvane ne se naglasq;

variant #3:
width: 1000000; --- produljava da mi skrolva v nishtoto, no pone e na 1 red;

variant #4:
width: inherit; --- ne mi vurshi rabota otnovo;
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

padding: 0px;
background-color:red;
}

#window
{
padding: 0px;
position: relative; 
width: 900px; 
height: 30px; 
border: 1px solid black; 
overflow: hidden; 
white-space: nowrap; 	
float: left; 	
 }

.left-rightButt
{
	float: left; 	
}
li
{
	float:left;
	list-style:none;
	position:relative;
}

</style>
</head>
<body>

<div id="shit" style="white-space: nowrap;float: left;">
<div href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)" class="left-rightButt">◄</div>
<div id="window">
<div id="content">
<ul>
<li>- DHTML is the combination of HTML, JavaScript, and CSS</li>
<li>- DOM stands for Document Object Mode</li>
 <li>DHTML allows content on a page to change on the fly, without reloading the page</li>
<li>- CSS allows for the separation between content definition and formatting</li>
<li>- CSS stands for Cascading style sheet</li>
<li>- <a href="http://www.dynamicdrive.com">Dynamic Drive</a> provides free, cut and paste DHTML scripts</li>
</ul>
</div>
</div>
<div href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)" class="left-rightButt">►</div>
</div>

<script language="JavaScript1.2">
var speed = 5;	//specify speed of scroll (greater=faster)
var crossobj = document.getElementById("content");
var contentheight = crossobj.offsetWidth;





function movedown(){
var styleLeft = window.getComputedStyle(crossobj,'').getPropertyValue('left');
if (parseInt(styleLeft)>=(contentheight*(-1)+0))
crossobj.style.left = parseInt(styleLeft)-speed+"px";
movedownvar=setTimeout("movedown()",5);
}

function moveup(){
var styleLeft = window.getComputedStyle(crossobj,'').getPropertyValue('left');
if (parseInt(styleLeft)<=0)
crossobj.style.left = parseInt(styleLeft)+speed+"px";
moveupvar=setTimeout("moveup()",5);
}

function getcontent_height(){
contentheight=crossobj.offsetWidth;
}
window.onload=getcontent_height;
</script>

</body>
</html>

 

[shterev]

Хмм малко странно си написал кода, ама карай Контента ли искаш да се скролва или само тази част където е менюто?

на списъка задай не flaot:left; а display:inline; ще станат на 1 ред, после малко не те разбрах, точно кое искаш да се скролира, но задайа на <ul>

.class{
  widht:??px;
  overflow:auto;
}

 

[erik_1001]

Благодаря много. Точно това дисплей инлайн. Може би скролира не го използвах много уместно, аз с него си нямам проблеми.