Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css]"Pojemność" elementu
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
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:

  1. div#text {
  2. border: 1px solid red;
  3. width: 200px;
  4. white-space: nowrap;
  5. overflow: hidden;
  6. padding-left: -10px;
  7. }
  8.  
  9. <div id="text">asdfasdfa sdasd fasdf asdf asdf asdf asdf asdfa sdfjahsfaksdfh kadfhakdh fakdfhaksdhf kadjfkadhf akdhfaks fhajsdhfk ajdk ahdfk jahdfkah</div>


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:
  1. Html:
  2. <div id="infobox">
  3. <div>
  4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  5. Nulla quis ipsum. Aliquam lacinia pretium pede.
  6. Pellentesque semper ligula eu neque.
  7. Fusce porttitor arcu in tortor.
  8. Nam vitae mi id turpis consectetuer porttitor.
  9. Mauris consectetuer nulla. Cras sagittis, tortor vel lobortis fermentum...
  10. </div>
  11. </div>
  12.  
  13. Style:
  14. #infobox{
  15. position:fixed;
  16. bottom:0;
  17. left:0;
  18. width:100%;
  19. height:20px;
  20. }
  21. #infobox div{
  22. float:left;
  23. height:20px;
  24. white-space:nowrap;
  25. }
  26.  
  27. javascript:
  28. window.onload = function()
  29. {
  30. infobox();
  31. }
  32.  
  33. function $(id)
  34. {
  35. return document.getElementById(id);
  36. }
  37. function infobox()
  38. {
  39. if ($('infobox'))
  40. moveInfobox(0)
  41. }
  42. function moveInfobox(amount)
  43. {
  44. message = $('infobox').childNodes[1];
  45. message.style.marginLeft = parseInt(amount) + 'px';
  46. amount2 = amount -= 2;
  47. if ((amount + message.offsetWidth) < 0)
  48. amount2 = document.width;
  49. setTimeout("moveInfobox(amount2)", 15)
  50. }

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 ;]
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.