Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Boks i tekst
Forum PHP.pl > Forum > Przedszkole
daros17
Czesc

Jeśli mam np w css takie coś:
  1. #left .info {
  2. background: url(/gfx/lewy.gif) no-repeat;
  3. width: 633px;
  4. height: 200px;
  5. padding: 0px 0px 0px 20px;
  6. float: left;
  7. }


No i teraz wpisuje w boksie tekst no i jeśli wpisze w 1 linijce za dużo to piszę po za nim. Jak to można zablokować? Oraz druga sprawa jak zrobić jeśli w pionie będzie więcej tekstu niż jest ustawiony ten element zamiast?

dzięki za pomoc
papryk
Nie do końca rozumiem w czym jest problem. Przypuszczam, że chodzi o łamanie linii skorzystaj może z :
  1. word-wrap:break-word;
lub
  1. overflow:scroll
daros17
No właśnie overflow: scroll; pokazuje scrolla lecz i tak nic nie daje jak wpiszę byle co i dużo . Chodzi mi o to, że wpisując tekst w boksie np tesssssssssssssssssssssssst bez żadnych przejść wywala mi tekst poza boks, a ja chciałbym aby wszystko było w boksie. Tak samo jeśli jest nadmiar tekstu w pionie, to aby boks się powiększał.

#left .info to boks jego ułożenie
#left .news ułożenie tekstu

Cały kod lewego boku:
  1. #left {
  2. width: 256px;
  3. float: left;
  4. }
  5.  
  6. #left ul {
  7. background-color: #93C140;
  8. width: 233px;
  9. float: left;
  10. }
  11.  
  12. #left ul li {
  13. list-style: none;
  14. padding: 0px 0px 0px 0px;
  15. }
  16.  
  17. #left ul li a {
  18. color: #ffffff;
  19. text-transform:uppercase;
  20. padding: 10px 15px 10px 15px;
  21. width: 202px;
  22. float: left;
  23. font-weight: normal;
  24. border-bottom: 1px solid #9ECD4A;
  25. font-size:12px;
  26. }
  27.  
  28. #left ul li a:hover {
  29. background: url(/gfx/left_ul_li.gif) 0px 3px no-repeat;
  30. font-weight: bold;
  31. text-decoration: none;
  32. }
  33.  
  34. #left .kontakt {
  35. background: url(/gfx/left_kontakt.gif) no-repeat;
  36. width: 213px;
  37. height: 20px;
  38. padding: 178px 0px 0px 20px;
  39. float: left;
  40. }
  41.  
  42. #left .platnosci {
  43. background: url(/gfx/left_platnosci.gif) no-repeat;
  44. width: 233px;
  45. height: 305px;
  46. padding: 0px;
  47. display: block;
  48. float: left;
  49. }
  50. #left .info {
  51. background: url(/gfx/lewy.gif) no-repeat;
  52. width: 633px;
  53. height: 200px;
  54. padding: 0px 0px 0px 10px;
  55. float: left;
  56. }
  57. #left .news {
  58. padding: 0px 0px 0px 10px;
  59. float: left;
  60. }
papryk
Jeżeli chcesz żeby box się powiększał w pionie to musisz zrezygnować z ustalonego atrybutu height, a do css'a dodać to co napisałem wcześniej word-wrap:break-word; to spowoduje łamanie się linii gdy tekst jest za duży.

-edit
Chciałeś żeby tekst nie wystawał poza box, a word-wrap chyba likwiduje ten problem. Czy coś jeszcze z poziomem?
daros17
OK działa świetnie dzięki, a da się coś zrobić z tym poziomem?
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.