Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Div Scroll, dynamiczna szerokość
ksanderon
post
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 29.06.2011

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

Mam stronę, na której chcę umieszczać kody źródłowe Pythona- Do kolorowania składni używam google prettify, wszystko jest dobrze, tyle że kontener, w którym mam treść strony automatycznie dostosowuje się do szerokości okna(chyba, że szerokość mniejsza niż 800 wtedy wyświetla pasek przewijania u dołu strony)- tak ma być. Ponieważ kod Pythona bywa "szeroki" zdąża się, że nawet przy standardowych rozdzielczościach strona trochę się rozjeżdża przez niego(kod)- dlatego postanowiłem kontener dla kodu (klasę pre) umieszczać wewnątrz przewijanego poziomo diva. I tu pojawia się problem- wszystko ładnie działa, gdy podam jego szerokość w px, jeśli jednak zrobię to przy pomocy procentów(co by było bardzo wygodne w tym wypadku) lub podam left i right jako 0px to efekt jest taki, że scroll owszem jest, ale nijak nie działa, ponieważ pre rozpycha diva- wiem, że dało by radę coś z tym zrobić poprzez JavaScript, ale wolę to zostawić na koniec. Wie ktoś jak to zrobić przez css?

Przykładową stronę można zobaczyć tutaj:http://ksanderon.tk/PythonDynamicModules.html

przykład z divem jest tylko przy najszerszym kodzie.

Ten post edytował ksanderon 29.06.2011, 22:03:37
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Sephirus
post
Post #2





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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

Hmm jeżeli Cię dobrze zrozumiałem (dodatkowo po sprawdzeniu przykładu) chodzi Ci o to by ten DIV, który zawiera kontener mógł mieć ustawione WIDTH na 100% tak żeby przy większej rozdzielczości DIV się odpowiednio powiększył i PRE poszło za nim a przy mniejszej by PRE mieściło się w DIV nie rozciągając go tak? (IMG:style_emoticons/default/smile.gif)

Po pierwsze: nie mam pojęcia co Ci daje left i right ustawione na 0?? i to naraz ;P

Po drugie: duuuży minus za pozycjonowanie elementów strony oparte na tabelce... float:left/right i do dzieła...

A co do tematu... Popełniłeś błąd używając właśnie tabeli bo za dużo tam masz width:100% i się całość rozjeeeżdża. Moja propozycja na przykładzie:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head></head>
  3. <body>
  4. 	<div style="min-width:1004px">
  5. 		<!-- TU DAJEMY PRAWY BLOK (TAK NAJPIERW PRAWY!) -->
  6. 		<div style="float:right; width:198px; border:1px solid black; ">
  7. 			Jakiś przykładowy tekst<br/>
  8. 			Jakiś przykładowy tekst<br/>
  9. 			Jakiś przykładowy tekst<br/>
  10. 			Jakiś przykładowy tekst<br/>
  11. 			Jakiś przykładowy tekst<br/>
  12. 		</div>
  13. 		<!-- TU DAJEMY LEWY BLOK (Z TREŚCIĄ) -->
  14. 		<div style="min-width:780px; border:1px solid black; padding:10px; margin-right:202px;">
  15. 			Jakiś przykładowy tekst<br/>
  16. 			Jakiś przykładowy tekst<br/>
  17. 			Jakiś przykładowy tekst<br/>
  18. 			Jakiś przykładowy tekst<br/>
  19. 			Jakiś przykładowy tekst<br/>
  20. 			<pre style="overflow:auto; width:100%; background-color:wheat; border:1px dotted red;">
  21. 				Jakiś przykładowy kod
  22. 				Jakiś przykładowy kod
  23. 				Jakiś przykładowy kod Jakiś przykładowy kod Jakiś przykładowy kod Jakiś przykładowy kod Jakiś przykładowy kod Jakiś przykładowy kod Jakiś przykładowy kod
  24. 				Jakiś przykładowy kod
  25. 				Jakiś przykładowy kod
  26. 				Jakiś przykładowy kod
  27. 			</pre>
  28. 			Jakiś przykładowy tekst<br/>
  29. 			Jakiś przykładowy tekst<br/>
  30. 			Jakiś przykładowy tekst<br/>
  31. 			Jakiś przykładowy tekst<br/>
  32. 			Jakiś przykładowy tekst<br/>	
  33. 		</div>
  34. 	</div>
  35. </body>
  36. </html>
[HTML] pobierz, plaintext


i teraz o co chodzi... Dajesz dwa bloki tak jak masz lewy dajesz zwykły z min-width na tyle ile potrzebujesz (ja dałem 780px + 2xpadding po 10 = 800px). Samej szerokości mu nie deklaruj - daj tylko margin-right na taki by zmieścił się tam blok prawy. Blok prawy musi mieć float na right i mieć ustaloną konkretną szerokość i tyle. Oba bloki ująłem specjalnie w diva z ustalonym min-width jako suma paddingów, marginów i widthów bloków aby przy zmniejszaniu prawy blok nie "najechał" na lewy - jak skasujesz tego dodatkowego DIVa to zobaczysz (IMG:style_emoticons/default/wink.gif) I na koniec PRE: bez żadnych dodatkowych kontenerów/wrapperów (IMG:style_emoticons/default/wink.gif)

HTH!

P.S. poczytaj o szablonach pływających nie opartych na tabelkach (float) (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post

Posty w temacie
- ksanderon   Div Scroll, dynamiczna szerokość   29.06.2011, 11:19:33
- - Sephirus   Hmm jeżeli Cię dobrze zrozumiałem (dodatkowo po sp...   29.06.2011, 17:57:39
- - ksanderon   Dzięki- mi też te tabelki wcale się nie podobały- ...   29.06.2011, 21:58:47
- - Sephirus   Hehe ciekawe podejście - bardziej ciekawe czy to ...   29.06.2011, 22:16:22

« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 27.12.2025 - 03:27
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn