Forum CBA.pl/forum/ i overflow dla [code]

Wszystko o HTML, XHTML, XML, CSS.
Awatar użytkownika
Piotr GRD
Posty: 1296
Rejestracja: 25 sty 2010, 11:17:07
Reputacja: 53
Lokalizacja: Szczecin
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Forum CBA.pl/forum/ i overflow dla [code]

Postautor: Piotr GRD » 23 gru 2012, 21:10:18

Przykład złego formatowania:
viewtopic.php?t=21594
Image kliknij by powiększyć

Przykład dobrego formatowania:
110mb.grd.net.pl/forum/index.php/topic,18.0.html
Image kliknij by powiększyć


W przypadku forum CBA ewidentnie strona się nadmiernie rozjeżdża, gdy pole z kodem zawiera długie linijki (z założenia tekst ma NIE być łamany, to jest prawidłowe zachowanie).
Skopiowałem sobie stronę forum na własny komputer i próbowałem różnych kombinacji z .codewrapper, .codetitle, .codecontent - bez skutku.
Co pomijam? Czego nie zauważyłem?
Monitor serwera CBA.pl (zapisz lub dodaj do ulubionych, żeby nie zapomnieć)
------------
Kilka starych, aczkolwiek ciekawych, zdaniem niektórych, zdjęć: http://grd.art.pl/
Jezioro Szmaragdowe w Szczecinie
Venite
Obsługa CBA
Posty: 3197
Rejestracja: 18 lut 2011, 08:01:57
Reputacja: 43
Lokalizacja: Kędzierzyn-Koźle
Płeć: Mężczyzna
User Agent: Opera Mini 360x503

Re: Forum CBA.pl/forum/ i overflow dla [code]

Postautor: Venite » 23 gru 2012, 21:50:41

Cba ma modyfikowany header, reklamy wyświetlają się między headerem a body. Wydaje mi się, ze cba ma zmieniony układ divow na stronie i to może mieć wpływ w odniesieniu do css. Chyba, bo nie widziałem kodu strony... Swoją drugą, jak Ty "gwizdnąłeś" forum z cba? :P

A i jak najbardziej zgadzam się odnośnie tematu.
Czy wiesz, że:
  • W Panelu CBA w sekcji "wsparcie" jest dedykowany system ticketów (obsługi technicznej)
  • Odpowiadamy na Forum oraz na adres mailowy obsluga(malpa)cba.pl
  • Jesteśmy również na Facebooku! Znajdź nas na facebook.com/hostingcba | cba.pl
W czym jeszcze możemy pomóc?
Awatar użytkownika
Fineas_Nigellus
Posty: 582
Rejestracja: 08 lis 2012, 17:33:45
Reputacja: 14
Płeć: Niewybrana
User Agent: Opera Windows 1440x900
Kontakt:

Re: Forum CBA.pl/forum/ i overflow dla [code]

Postautor: Fineas_Nigellus » 23 gru 2012, 21:52:55

Venite WroteColonSwoją drugą, jak Ty "gwizdnąłeś" forum z cba?

To jest w końcu Piotr GRD :D
Mówimy STOP Reklamie-Sygnaturce! ;)
Awatar użytkownika
piwo
Posty: 673
Rejestracja: 13 lip 2010, 16:13:44
Reputacja: 50
Płeć: Niewybrana
User Agent: Firefox Windows

Re: Forum CBA.pl/forum/ i overflow dla [code]

Postautor: piwo » 23 gru 2012, 21:55:41

Skopiowałem sobie stronę forum na własny komputer i próbowałem różnych kombinacji
z .codewrapper, .codetitle, .codecontent - bez skutku.
Co pomijam? Czego nie zauważyłem

np to że w tym tekście nie ma CR tam gdzie powinno być, są same spacje 0x20 (prawdopodobnie już na etapie wklejania ich tam nie było)
więc to naprawdę są długie niełamiące się i niesformatowane linie :wink:

CodeColon Select All Code

7264 6174 615B 2775 7365 725F 6964 275D 2E22 2722 293B 6563 686F 2022 3C68 rdata['user_id']."'");echo "<h
746D 6C3E 2020 2020 3C68 6561 643E 223B 2020 2020 2020 2020 696E 636C 7564 tml>    <head>"
;        includ
655F 6F6E 6365 2049 4E43 4C55 4445 532E 2264 796E 616D 6963 5F74 6974 6C65 e_once INCLUDES
."dynamic_title
732E 7068 7022 3B20 2020 2020 2020 2069 6620 2821 6973 7365 7428 2474 6974 s.php"
;        if (!isset($tit
6C65 2929 2024 7469 746C 6520 3D20 2222 3B20 2020 2020 2020 2020 2020 2020 le
)) $title = "";
2020 2020 2020 2020 2020 2065 6368 6F20 2220 2020 2020 2020 203C 7469 746C            echo "        <titl
653E 222E 2474 6974 6C65 2E24 7365 7474 696E 6773 5B27 7369 7465 6E61 6D65 e>"
.$title.$settings['sitename
275D 2E22 3C2F 7469 746C 653E 2020 2020 2020 2020 2020 2020 2020 2020 3C6D '
]."</title>                <m
6574 6120 6874 7470 2D65 7175 6976 3D27 436F 6E74 656E 742D 5479 7065 2720 eta http-equiv='Content-Type'

Bo jeśli tekst jest prawidłowo napisany / wklejony to formatuje się poprawnie
(w czasie submita też żadna 'obróbka' CR nie wycina bo jak widać jest oryginalnie tak jak było)

CodeColon Select All Code

test
    test
        test
            test
            test
        test
    test
test

Jedyne co można by było zrobić jeśli ktoś się uprze żeby wkleić 10 kilometrową linię bez CR to przyciąć to jakimś
oveflow: auto; i max-width: ilestam;
{$signature}
Awatar użytkownika
Piotr GRD
Posty: 1296
Rejestracja: 25 sty 2010, 11:17:07
Reputacja: 53
Lokalizacja: Szczecin
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Re: Forum CBA.pl/forum/ i overflow dla [code]

Postautor: Piotr GRD » 23 gru 2012, 22:20:41

piwo WroteColonJedyne co można by było zrobić jeśli ktoś się uprze żeby wkleić 10 kilometrową linię bez CR to przyciąć to jakimś
oveflow: auto; i max-width: ilestam;

Ja o tym właśnie mówię.

Oglądał ktoś mój przykład poprawnego formatowania? Tam nie ma z tym problemu. Możesz wkleić 10-kilometrową linijkę i przewijane będzie tylko pole z kodem, a cała strona się nie rozjedzie w żaden sposób. To samo próbowałem tymi samymi metodami CSS - i w przypadku forum CBA nie wyszło mi. Co pomijam? Co umknęło mojej uwadze?



Venite WroteColonSwoją drugą, jak Ty "gwizdnąłeś" forum z cba? :P

No jak... Zaglądasz w kod źródłowy strony (ten wynikowy HTML i CSS przesłany do przeglądarki, nie źródłowy PHP, ten nie ma znaczenia) i go zapisujesz. Możesz też użyć np. Firebug'a do Firefoxa albo innych dodatków umożliwiających eksperymentowanie z CSSami i HTML "na żywo".



Venite WroteColonChyba, bo nie widziałem kodu strony...

Ze swoim pytaniem zwracam się do osób, które zechcą zajrzeć w kod HTML i CSS i albo eksperymentując dojdą do pożądanego wyniku, albo są na tyle biegli, że od razu dojrzą w samym kodzie co należałoby zmienić bądź dodać nawet bez eksperymentowania.


Jak wspomniałem powyżej: osobiście eksperymentowałem z klasami .codewrapper, .codetitle, .codecontent, które to zdają się odpowiadać za ten element, ale bez sukcesu (za wyjątkiem sytuacji, gdy określiłem ich szerokość "na sztywno" w pikselach, jednak nie jest to rozwiązanie dla strony o zmiennej szerokości, różnej w zależności od szerokości ekranu klienta). Czegoś nie dostrzegam.
Monitor serwera CBA.pl (zapisz lub dodaj do ulubionych, żeby nie zapomnieć)
------------
Kilka starych, aczkolwiek ciekawych, zdaniem niektórych, zdjęć: http://grd.art.pl/
Jezioro Szmaragdowe w Szczecinie
Awatar użytkownika
piwo
Posty: 673
Rejestracja: 13 lip 2010, 16:13:44
Reputacja: 50
Płeć: Niewybrana
User Agent: Firefox Windows

Re: Forum CBA.pl/forum/ i overflow dla [code]

Postautor: piwo » 23 gru 2012, 23:13:51

Piotr GRD WroteColonewidentnie strona się nadmiernie rozjeżdża, gdy pole z kodem zawiera długie linijki (z założenia tekst ma NIE być łamany, to jest prawidłowe zachowanie).

Ah.. rzeczywiście, tak się zaabsorbowałem załączonymi obrazkami że od razu przystąpiłem do szukania odpowiedzi,
przez co najwyrazniej umknął mi właściwy sens pytania. Przepraszam najmocniej :)
{$signature}
Awatar użytkownika
Piotr GRD
Posty: 1296
Rejestracja: 25 sty 2010, 11:17:07
Reputacja: 53
Lokalizacja: Szczecin
Płeć: Niewybrana
User Agent: Firefox Windows 1024x768
Kontakt:

Re: Forum CBA.pl/forum/ i overflow dla [code]

Postautor: Piotr GRD » 23 gru 2012, 23:41:12

Zaprezentowany przeze mnie przykład jest ekstremalny, jednak sytuacje kiedy wklejany kod powoduje, że strona staje się półtora czy dwa razy szersza od ekranu są dość częste i bardzo przeszkadza to w przeglądaniu treści. Jedynie pole z kodem powinno być przewijane, nie cała strona.

Ograniczenie wysokości pola z kodem, np. "max-height:24em;" w połączeniu z "overflow:auto;" działa i daje się ograniczyć wysokość. W przypadku szerokości jednak skuteczne okazuje się być tylko zastosowanie wartości bezwzględnych, co nie jest rozwiązaniem dla strony, której szerokość zależy od szerokości ekranu przeglądarki. Stosowanie wartości procentowych dla szerokości tych elementów nie przynosi oczekiwanych rezultatów.
Monitor serwera CBA.pl (zapisz lub dodaj do ulubionych, żeby nie zapomnieć)
------------
Kilka starych, aczkolwiek ciekawych, zdaniem niektórych, zdjęć: http://grd.art.pl/
Jezioro Szmaragdowe w Szczecinie
Awatar użytkownika
piwo
Posty: 673
Rejestracja: 13 lip 2010, 16:13:44
Reputacja: 50
Płeć: Niewybrana
User Agent: Firefox Windows

Re: Forum CBA.pl/forum/ i overflow dla [code]

Postautor: piwo » 24 gru 2012, 09:05:22

Jako że rozwiązanie często występującego problemu rozciągania się stron forum
przy pomocy CSS wydaje się zadaniem dość problematycznym,
wymyśliłem inne rozwiązanie które radzi sobie z tym problemem całkiem dobrze.

W obecnej wersji skrypt rozwiązuje problem zbyt szerokich bloków [code] oraz zbyt dużych obrazków.

Rozwiązanie jest uniwersalne i można je łatwo rozbudowywać przez dopisanie odpowiedniego kodu w razie
wykrycia jakichś nowych nieprzewidzianych w tej chwili typów 'elementów' rozciągających stronę.

Rozwiązanie polega na dynamicznym wykrywaniu bloków [code] oraz obrazków których rozmiar
wychodzi poza dozwolony obszar i modyfikowaniu ich tak aby zawierały się w dozwolonych granicach.

CodeColon Select All Code


// -------- Skalowanie za duzych elementow forum ----------------
window.onload=fixCodeContent;
window.onresize = function wResize(e) {fixCodeContent();}
function fixCodeContent() {
    var c=document.getElementsByClassName('codecontent');
    var t=document.getElementsByClassName('codetitle');
    var i=document.getElementsByTagName('img');
    for (x=0;x<c.length;x++) {    // skalowanie blokow code
        c[x].style.width=((window.innerWidth-240)+'px');
        t[x].style.width=((window.innerWidth-238)+'px');
        c[x].style.overflow="auto";
    }
    for (x=0;x<i.length;x++) {    // skalowanie obrazkow
        if (i[x].width > window.innerWidth-220 && i[x].width > 840) {
            i[x].style.width=((window.innerWidth-220)+"px");
        }
    }
}
//-------- Skalowanie za duzych elementow forum END ------------
 


Przykłady postów rozwalających szerokość forum cba :
Przykład strony forum z zbyt szerokim obrazkiem.
Przykład strony forum z zbyt szerokim blokiem (code).

Pozwoliłem sobie na wykonanie kopii strony z szerokimi blokami (code) z przykładu drugiego
i umieszczenie w jej nagłówku <head> powyższego skryptu w celu demonstracji jego działania.
Zapraszam do testowania strony testowej z zapobieganiem rozciągania bloków (code) tutaj.
{$signature}
Awatar użytkownika
Piotr GRD
Posty: 1296
Rejestracja: 25 sty 2010, 11:17:07
Reputacja: 53
Lokalizacja: Szczecin
Płeć: Niewybrana
User Agent: Firefox Windows 1024x768
Kontakt:

Re: Forum CBA.pl/forum/ i overflow dla [code]

Postautor: Piotr GRD » 25 gru 2012, 12:11:37

Działa ładnie. Pomysłowe. : )
Osobiście znam javascript tylko tyle o ile, więc nie szukałem takiego rozwiązania.
Jeśli admini mają ochotę, mogą wprowadzić zmianę.
Sam będę jeszcze szukał rozwiązania w CSS, choć tut też alfą i omegą nie jestem.
Monitor serwera CBA.pl (zapisz lub dodaj do ulubionych, żeby nie zapomnieć)
------------
Kilka starych, aczkolwiek ciekawych, zdaniem niektórych, zdjęć: http://grd.art.pl/
Jezioro Szmaragdowe w Szczecinie
Awatar użytkownika
piwo
Posty: 673
Rejestracja: 13 lip 2010, 16:13:44
Reputacja: 50
Płeć: Niewybrana
User Agent: Firefox Windows

Re: Forum CBA.pl/forum/ i overflow dla [code]

Postautor: piwo » 25 gru 2012, 22:13:09

Aktualnie to jest rozwiązanie CSS z którym się wspólnie zgodziliśmy że overflow: auto; width: cośtam;
i że 'width' nie powinien być na stałe.
Więc to jest dokładnie to, tylko że width: jest 'szerokośćprzeglądarki-240px'; :wink:
{$signature}

Wróć do „HTML, CSS”

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 1 gość