Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] problem z wyświetleniem całego tekstu na stronie
-iteru-
post 4.02.2014, 16:28:32
Post #1





Goście
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?
Powód edycji: [Kshyhoo]: również gości obowązują zasady działu
Go to the top of the page
+Quote Post
2 Stron V   1 2 >  
 Start new topic
Odpowiedzi (1 - 19)
Turson
post 4.02.2014, 16:30:43
Post #2





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
----- 

[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
Go to the top of the page
+Quote Post
-iteru-
post 4.02.2014, 23:38:45
Post #3





Goście
'auto' też nie działa. już próbowałem wcześniej.
Go to the top of the page
+Quote Post
-1jackpot1-
post 6.02.2014, 10:30:46
Post #4





Goście
Do klasy odnosi się chyba kropką nie haszem, powinno być .content{} a nie #content{}. Nie działa tylko stylizacja wysokości czy reszta też?
Go to the top of the page
+Quote Post
Kshyhoo
post 6.02.2014, 10:38:58
Post #5





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
ZASADA:
[CSS] pobierz, plaintext 
  1. .class
  2. #id
[CSS] pobierz, plaintext


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
shpaque
post 6.02.2014, 11:44:18
Post #6





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----

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ł...
Go to the top of the page
+Quote Post
Turson
post 6.02.2014, 12:12:31
Post #7





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
-iteru-
post 6.02.2014, 15:44:47
Post #8





Goście
"." 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.
Go to the top of the page
+Quote Post
Turson
post 6.02.2014, 15:53:16
Post #9





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

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...
Go to the top of the page
+Quote Post
shpaque
post 6.02.2014, 16:50:44
Post #10





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----

może zamiast table daj div
Go to the top of the page
+Quote Post
-iteru-
post 6.02.2014, 20:01:00
Post #11





Goście
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.
Powód edycji: [Kshyhoo]: Ostatnie ostrzeżenie co do formatowania kodu.
Go to the top of the page
+Quote Post
Kshyhoo
post 6.02.2014, 20:12:51
Post #12





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Spróbuj użyć:
[CSS] pobierz, plaintext 
  1. overflow: auto;
  2. word-wrap: break-word;
  3. white-space: pre-wrap;
[CSS] pobierz, plaintext


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
-iteru-
post 6.02.2014, 20:51:48
Post #13





Goście
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.
Go to the top of the page
+Quote Post
Kshyhoo
post 6.02.2014, 21:13:59
Post #14





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Użyj jsfiddle.net, bo skąd mamy wiedzieć, co cudujesz. Wklej kod i zapodaj linka.


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
-iteru-
post 7.02.2014, 14:30:10
Post #15





Goście
http://jsfiddle.net/#&togetherjs=pCNpyKQh6w

tutaj to działa. u mnie nie.
Go to the top of the page
+Quote Post
Kshyhoo
post 7.02.2014, 15:41:58
Post #16





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
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


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
registropl
post 7.02.2014, 15:51:44
Post #17





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 4.02.2014

Ostrzeżenie: (10%)
X----

@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


--------------------
registro.pl
Go to the top of the page
+Quote Post
-iteru-
post 9.02.2014, 23:35:42
Post #18





Goście
dzięki Kshyhoo

#main {
height: auto; działa.
Go to the top of the page
+Quote Post
-iteru-
post 10.02.2014, 23:20:56
Post #19





Goście
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ć?
Go to the top of the page
+Quote Post
Kshyhoo
post 11.02.2014, 10:12:41
Post #20





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
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.


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

2 Stron V   1 2 >
Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 24.07.2025 - 16:42
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn