Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] problem z wyświetleniem całego tekstu na stronie
Forum PHP.pl > Forum > Przedszkole
iteru
4.02.2014, 16:28:32
Witam.
Mam taki kod:
html:
[HTML] pobierz, plaintext 
  1. <div id="middle">
  2.   <div id="main">
  3.  
  4.    <table class="content">
  5. 	<tr>
  6. 		<td class="contentheading" width="100%">
  7. 			Programy</td>
  8. 	</tr>
  9. </table>
  10.  
  11. <table class="content">
  12. <tr>
  13. <td valign="top">
  14. <p style="text-align: justify;">Program ..... </p>
[HTML] pobierz, plaintext

........
CSS :
[CSS] pobierz, plaintext 
  1. #content {
  2. 	width: 845px;
  3. 	margin: 0 auto;
  4. 	padding: 0 10px 0 10px;
  5. 	background-color: #f3f8fb;
  6. 	height: 100%;
  7. }
[CSS] pobierz, plaintext

tekst umieszczony w content na niektórych pod stronach jest za długi i się nie wyświetla. Przy zmianie height na 250% wyświetla się cały tekst ale taka sama długość pozostaje na pozostałych stronach gdzie tekst jest o wiele krótszy, przez co beznadziejnie to wygląda a do tego obrazek w tle w body mi się rozciągnął.
Próbowałem jeszcze Overflow:scroll, ale w ogóle mi to tutaj nie działa.

Co mogę z tym zrobić, żeby w tym przypadku strona dostosowywała się do teksu prawidłowo?
Turson
4.02.2014, 16:30:43 
[CSS] pobierz, plaintext 
  1. #content {
  2. width: 845px;
  3. margin: 0 auto;
  4. padding: 0 10px 0 10px;
  5. background-color: #f3f8fb;
  6. overflow:hidden;
  7. height:auto;
  8. }
[CSS] pobierz, plaintext
iteru
4.02.2014, 23:38:45
'auto' też nie działa. już próbowałem wcześniej.
1jackpot1
6.02.2014, 10:30:46
Do klasy odnosi się chyba kropką nie haszem, powinno być .content{} a nie #content{}. Nie działa tylko stylizacja wysokości czy reszta też?
Kshyhoo
6.02.2014, 10:38:58
ZASADA:
[CSS] pobierz, plaintext 
  1. .class
  2. #id
[CSS] pobierz, plaintext
shpaque
6.02.2014, 11:44:18
overflow masz hidden - więc ukrywa wszystko co większe niż box w którym wyświetla. daj overflow na auto i będzie rozciągał...
Turson
6.02.2014, 12:12:31
shpaque, nie do końca. Overflow:hidden także rozciąga diva dopasowując do zawartości. Myślę, że problem leżał po prostu w #content zamiast .content
iteru
6.02.2014, 15:44:47
"." przed content sprawiła tylko, że zniknął nadany styl. overflow:auto tez nic nie daje. jedyne co działa to zmiana height z 100% (lub auto) na np. 250% ale wtedy rozciąga też obrazek w tle całej strony. wszystko inne generalnie działa poza tym dostosowaniem wielkości strony do długości tekstu.
Turson
6.02.2014, 15:53:16
Powiedz nam tylko gdzie konkretnie wsadzasz ten tekst, który rzekomo się nie mieści. Mam nadzieję, że tabelka nie służy Ci do budowy strony a jedynie prezentacji danych...
shpaque
6.02.2014, 16:50:44
może zamiast table daj div
iteru
6.02.2014, 20:01:00
zamiana table na div nic nie daje.

wklejałem kod...mogę jeszcze raz obszerniej.
[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="container">
  3.  
  4. <div id="navigation">
  5. 		<div class="moduletable_menuglowne">
  6. 					<ul class="menu sf-menu sf-horizontal">......TU JEST MENU.....
  7. </div><!-- navigation -->
  8.  
  9. <div id="medium">
  10.  
  11. <div id="content_top">
  12.  
  13. <img src="bg_content_top.png" />
  14.  
  15. </div><!-- content_top -->	
  16.  
  17.  <div id="content">
  18.       <div id="left">
  19.   		<div class="moduletable_menu_lewe">
  20. 					<h3>PROGRAMY</h3>
  21. 					<ul class="menu">  TU JEST DODATKOWE MENU BOCZNE Z LEWEJ STRONY</ul>		</div>
  22.  
  23. <div class="moduletable">
  24.  
  25. <script type="text/javascript">
  26. _uacct ="UA-711712-1";
  27. urchinTracker();
  28. </script>
  29. 		</div>
  30.  
  31. </div><!-- left -->
  32.  
  33. <div id="middle">
  34.   <div id="main">
  35.  
  36.    <table class="content">
  37. <tr>
  38. 		<td class="contentheading" width="100%">
  39. 					PROGRAMY		</td>
  40.  
  41.  
  42. 					</tr>
  43. </table>
  44.  
  45. <table class="content">
  46. <tr>
  47. <td valign="top">
  48. <p style="text-align: justify;"> ....TU JEST TEKST KTÓRY SIĘ NIE MIEŚCI </p>
  49.  
  50. </td>
  51. </tr>
  52.  
  53. </table>
  54.  
  55.  
  56.   </div>
  57.  
  58.   </div><!-- middle -->
  59.   </div><!-- content -->
  60. </div><!-- medium -->
  61.  
  62.  
  63. </div><!-- container -->
  64.  
  65. </body>
[HTML] pobierz, plaintext

teoretycznie powinno chyba działać, ale nie działa.
Kshyhoo
6.02.2014, 20:12:51
Spróbuj użyć:
[CSS] pobierz, plaintext 
  1. overflow: auto;
  2. word-wrap: break-word;
  3. white-space: pre-wrap;
[CSS] pobierz, plaintext
iteru
6.02.2014, 20:51:48
tekst się przesunął w dół. strona się trochę rozciągnęła w dół ale treść strony nadal znika w tym samym miejscu co znikała.
Kshyhoo
6.02.2014, 21:13:59
Użyj jsfiddle.net, bo skąd mamy wiedzieć, co cudujesz. Wklej kod i zapodaj linka.
iteru
7.02.2014, 14:30:10
http://jsfiddle.net/#&togetherjs=pCNpyKQh6w

tutaj to działa. u mnie nie.
Kshyhoo
7.02.2014, 15:41:58
U mnie nie działa. Sygnalizuje sporo nie podomykanych znaczników za to...

No dobra. Twoim problemem jest nadanie na sztywno dla DIV:
[CSS] pobierz, plaintext 
  1. #main {
  2.   height: 100%;
  3. }
[CSS] pobierz, plaintext

Spróbuj zmienić to, chociażby na:
[CSS] pobierz, plaintext 
  1. #main {
  2.   height: 100% auto;
  3. }
[CSS] pobierz, plaintext

Albo np:
[CSS] pobierz, plaintext 
  1. #main {
  2.   height: auto;
  3.   min-height: 600px; // dla minimalnej wysokości w przypadku małej ilości tekstu
  4. }
[CSS] pobierz, plaintext
registropl
7.02.2014, 15:51:44
@iteru:
z jakiego edytora korzystasz?
Zainstaluj sobie SublimeText do HTML i CSS idealnie się nadaje, a jeśli "zapomni Ci się" zamknąć znacznik, to sublime da Ci o tym znać lub zamknie go za ciebie.

Rozumiem, że chcesz osiągnąć przyklejoną stopkę - masz na to dwa proste sposoby:
Css: css

Js:
Kod
$(window).bind("load", function() {
      
       var footerHeight = 0,
           footerTop = 0,
           $footer = $("#footer");
          
       positionFooter();
      
       function positionFooter() {
      
                footerHeight = $footer.height();
                footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
      
               if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                   $footer.css({
                        position: "absolute"
                   }).animate({
                        top: footerTop
                   },-1)
               } else {
                   $footer.css({
                        position: "static"
                   })
               }
              
       }

       $(window)
               .scroll(positionFooter)
               .resize(positionFooter)
              
});



Pozdrawiam,
r
iteru
9.02.2014, 23:35:42
dzięki Kshyhoo

#main {
height: auto; działa.
iteru
10.02.2014, 23:20:56
za szybko się ucieszyłem.

w starszych wersjach IE min-height nie działa. strona robi mi się wielkości najkrótszego tekstu. wiesz Kshyhoo co można z tym zrobić?
Kshyhoo
11.02.2014, 10:12:41
Cytat(iteru @ 10.02.2014, 23:20:56 ) *
w starszych wersjach IE min-height nie działa. strona robi mi się wielkości najkrótszego tekstu. wiesz Kshyhoo co można z tym zrobić?

Jak to jest z samodzielnością? Wystarczy wpisać w Google frazę "min-height ie" a dostaniesz odpowiedź... Na tym Forum obowiązuje kilka niepisanych zasad:
1. Jesteś zbyt leniwy, żeby się zarejestrować - my jesteśmy zbyt leniwi, żeby ci pomoc.
2. Pracujesz samodzielnie i osiągasz jakieś wyniki - my pomagamy ci poprawić te wyniki. Nie pracujesz samodzielnie - my za ciebie nic nie zrobimy.
iteru
11.02.2014, 19:20:45
aż tak leniwy nie jestem. akurat szukałem w googlach rozwiązania, ale

min-height:300px;
height:auto !important;
height:300px;

mi nie zadziałało. stąd było moje pytanie. ale faktycznie bezsensu uznałem za oczywiste, że jak już tutaj piszę to znaczy, że google zawiodło i mogłem o tym wspomnieć.

a podany wyżej sposób jednak działa - nie ładował mi się oddzielny arkusz stylu dla ie, stąd był problem

1. Jesteś zbyt leniwy, żeby się zarejestrować - my jesteśmy zbyt leniwi, żeby ci pomoc. ->akurat jestem zarejestrowany, ale korzystam tak sporadycznie, że nie pamiętam hasła, więc ręczne wpisanie loginu jest dla mnie szybsze.

dzięki.
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.