[css]"Pojemność" elementu Opcje

[Chys]

Witam.
Przejdę od razu do rzeczy:
Mam dajmy na to, element div który ma szerokość 300px i wysokość 20px. Chciałbym wsadzić do niego text dużo dłuższy, np. taki który w jednej linii by zajmował 600px, jednak w normalnie przejdzie on do następnej linii, a ja chciałbym żeby był w tej samej tylko niewidoczny. Jeśli nie wyrażam się dość zrozumiale dla kogokolwiek, co zważywszy na moje zdolności tłumaczenia jest bardzo prawdopodobne, to chciałbym zrobić po prostu coś w rodzaju marquee używając javascriptu i css'ów albo jeszcze dokładniej, zwyczajny pasek informacyjny jak dla przykładu ten na tvn24.
Z góry dziękuję za pomoc

[Cezar708]

na początek możesz zrobić CSS tak:

[HTML] pobierz, plaintext 
<style>
div#text {
  border: 1px solid red;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  padding-left: -10px;
}
</style>
 
<div id="text">asdfasdfa sdasd fasdf asdf asdf asdf asdf asdfa sdfjahsfaksdfh kadfhakdh fakdfhaksdhf kadjfkadhf akdhfaks fhajsdhfk ajdk ahdfk jahdfkah</div>
[HTML] pobierz, plaintext 

co do kodu JS to na razie nie mam pomysłu, ale jak na coś wpadnę dam znać

Pozdrawiam

[Chys]

Dzięki, white-space:nowrap pomogło;]
A co to javascriptu to już go mam, może kiedyś kogoś zainteresuje:

[HTML] pobierz, plaintext 
Html:
<div id="infobox">
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Nulla quis ipsum. Aliquam lacinia pretium pede. 
Pellentesque semper ligula eu neque. 
Fusce porttitor arcu in tortor. 
Nam vitae mi id turpis consectetuer porttitor. 
Mauris consectetuer nulla. Cras sagittis, tortor vel lobortis fermentum...
</div>
</div>
 
Style:
#infobox{
position:fixed;
bottom:0;
left:0;
width:100%;
height:20px;
}
#infobox div{
float:left;
height:20px;
white-space:nowrap;
}
 
javascript:
window.onload = function()
{
   infobox();
}
 
function $(id)
{
   return document.getElementById(id);
}
function infobox()
{
   if ($('infobox'))
      moveInfobox(0)
}
function moveInfobox(amount)
{
   message = $('infobox').childNodes[1];
   message.style.marginLeft = parseInt(amount) + 'px';
   amount2 = amount -= 2;
   if ((amount + message.offsetWidth) < 0)
      amount2 = document.width;
   setTimeout("moveInfobox(amount2)", 15)
}
[HTML] pobierz, plaintext 

Oczywiście, nie działa pod IE, z tego co widze jest to wina styli, ale i tak osiągnąłem to co chciałem ;]

Ten post edytował Chys 18.05.2008, 22:36:56