problem z overflow

[Batman]

Robię tag który po wpisaniu konkretnego ciągu w post zamienia go na jakiś tam wygląd ( to nieistotne)

i teraz sam tag oczywiście działa pięknie ale jak zwykle jest jakieś ale wszystko działa do momentu jak ten ciąg znaków jest krótki , problemy się pojawiają jak ciąg jest bardzo długi ( a zdarzają się takie wiec coś z tym muszę zrobić)

do tego wszystkiego mam jeszcze 2 rzeczy umieszczone jedno na początku (obrazek) drugie na końcu ciągu znaków (inny przeważnie 9 znakowy ciąg znaków)

Robię tag na div oczywiście , więc lecimy :

w php powiedzmy było by coś takiego:

<div style='background-color:##98afc7; height:26px; max-width:1200px; border:1px #000 solid; overflow-x:auto;><div style='float:left;><a href='http:google.pl' target='_blank'><img src='style_images/1/e2.png' border='0' alt='aaa' title='aaa'></a></div><div style='float:left;>".$ciag_wlasciwy."</div><div style='float:left;>".ciag_koniec."</div></div>

obszedłem forumowe ograniczenie ilości znaków (dzięki DawPi ) w linii ( przed zapisem do bazy usuwane jest każde <br /> z powyższego html-a)

przy zbyt długim linku powinien zareagować overflow i po sprawie ale niestety (gdy link jest dłuższy niż td postu) nie dość ze łamie link po każdym divie to jeszcze rozwala forum znaczy wyjeżdżają w prawo te posty ( w Firefox) lub i tak łamie link, ale nie rozwala forum ( w operze)

a ja potrzebuje proste okienko na wymiar postu z przewijaną zawartością każdej długości

najbliżej rozwiązania problemu byłem dodając w pierwszym divie width powiedzmy 1000px (powiedziałem sobie kto ma mniejszy ekran ten ma niefarta) ale nadal nie mogę rozwiązać problemu łamania sie po divach co ciekawe identycznie łamie bez div (jako jeden ciąg)

skończyły mi sie pomysły

[DawPi]

Do informacji: widziałem ten temat wczoraj, jednak nie jestem biegły w CSS. Jak wrócę to poszukam jakiegoś rozwiązania.

[matma4u]

Spróbuj w stylu diva użyć:

word-wrap:normal;

lub

white-space:nowrap;

Wszystko zależy od efektu jaki chcesz osiągnąć

<div  style="word-wrap:normal;">Tegotekstunieprzełamiedziekizastosowaniuz</div>

Wspierany jest przez IE, FF i Operę (osobiście testowałem)

Dzięki temu nie powinno dzielić bardzo długich wyrazów (np. długi link nie zostanie przełamany - sprawdzone)

Nie będę opisywał różnic w działaniu, po prostu wypróbuj sam, ale w razie problemów zawsze możesz pytać, chętnie pomogę

Czy tym konkretnym ciągiem ma być dowolny adres url? Jeśli tak to użyj white-space:nowrap;

[Batman]

matma4u oczywiście to już też przerabiałem

dobra uprościłem nieco i zrobiłem na początek takie coś

<div style='background-color: #98afc7;overflow-x:auto; white-space:nowrap;'>".$ciag_wlasciwy."</div>

i teraz takie rozwiązanie działa dobrze w Operze ale nie działa w Firefox-ie (rozpycha post kiedyś ie miała problem z overflow i robiła dokładnie to samo)na IE nie sprawdzę bo niestety nie posiadam i moje pytanie dlaczego czy raczej jak to zmienić

to jest problem nr. 1

edit: to rozwiązanie jest wystarczające aby rozwiązać cały problem ale niestety tylko na Operze ( używam FF generalnie) wiec poszukuje rozwiązania dla ff i ewentualnie ie jeżeli będzie tam problem zaraz chyba ściągnę ie7 i zobaczę

Edytowane 10 Marca 2009 przez Batman

[Batman]

znalazłem problem Firefox ma jakieś problemy z overflow gdy div siedzi w table jest na to rozwiązanie : table-layout: fixed w css ale nie wiem jak by to zastosować w przypadku forum dodanie tego do table postu rozwala go niestety ( ma to związek albo z połączonym td na górze (najprawdopodobniej)albo z nieokreślonym wymiarami td na dole jakieś pomysły ?

[matma4u]

Słuchaj wiem że chcesz by wszystko pięknie działało na każdej przeglądarce, ale może warto zastanowić się czy jest sens tak bardzo przesadzać z tą zgodnością wsteczną. Przecież między IE6 a IE7 jest przepaść nie wspominając o IE8. Ja w swojej pracy używam FF3.1, IE8, Opera 9.64, każda z nich przechodzi test acid2 oraz acid3 w przypadku Opery 84/100, Firefoxa3.1 93/100, IE8 20/100.

Oczywiście można zadbać by strona poprawnie wyświetlała się dla przeglądarek o jedną wersję starszych i to wszystko. Rozwiązania, które Ci proponowałem w przypadku takiego zestawu działają bez problemu.

Gdybyś mógł dokładnie opisać jak ma działać ten tag i co umieszczasz po {content}, bo nie mogę zrozumieć do końca w czym tkwi problem. Znacznik <div> działa ja <br />

W związku z tym umieszczenie kodu

<div>cos</div><div>cos</div>

jest tożsame z

cos<br />cos

Dlaczego używasz overflow-x? czy samo overflow jakoś specjalnie burzy układ?

Czy Ty chciałeś by znacznik miał układ:

Obrazek=>>treść>>koniec

czy też:

Obrazek

treść

koniec

Bo jeśli pierwsza wersja to wystarczyło użyć wyłącznie jednego diva.

<div style='background-color: #98afc7;overflow-x:auto; white-space:nowrap;'>".$ciag_wlasciwy."</div>

Rozpycha bo nie ustaliłeś parametru width i pewnie nie pojawia się suwaczek (prawda ?)

Jeśli, chcesz by width był automatycznie dobierany w zależności od rozdzielczości to możesz w javascript skorzystać, tam masz coś takiego jak screen.width. Możesz o tej wartości odejmować na sztywno np 100px i uzyskany wynik przekazywać do width.

[Batman]

matma4u jeżeli chodzi o łamanie div to problem rozwiązał white-space:nowrap;

sprawa wygląda tak ze wszystko mi działa ale tylko na operze i IE natomiast nie działa na Firefox , chrome , safari

a jaki jest problem otóż w operze jest normalne okno tagu tak jak każdego innego i kiedy ciąg znaków jest dłuższy niż okno postu pojawia się scroll i wszystko jest cacy

natomiast w Firefoxie wygląda to tak :

i teraz znalazłem w necie ze sa dwa rozwiązania pierwszym jest ustalenie width na sztywno ( co akurat sam odkryłem) ale to nie jest rozwiązanie tak naprawdę satysfakcjonujące , i jest jeszcze opcja z dodaniem do stylu <table> - table-layout: fixed tylko nie bardzo wiem jak to zastosować na forum , dodanie do table postu powoduje ze lewe td są spychane na maxa w lewo (te z danymi usera).

nie bardzo kumam jak to fixed działa

mam nadzieję ze rozjaśniłem

[matma4u]

To ja widzę jeszcze takie rozwiązanie, ustaw:

overflow-x:scroll;

Jeśli to nie pomoże to przeglądnę moje notatki i postaram się coś jeszcze poszukać.

[DawPi]

//OT

Widzę, że mamy specjalistę od CSSa. Fajnie, że tak powiem - WRESZCIE!

//OT

[matma4u]

Batman widzę, że bez parametru width nie obejdzie się tylko zamiast ustawiać go na sztywno w px lepiej ustawić go w %, przy czym z kodu strony trzeba odczytać jaka jest szerokość kolumny z prawej strony i w divie ustalić width mniejszy o 15%

Zrób tak:

<div style='background-color: #98afc7;overflow-x:auto; white-space:nowrap;position:absolute;width:70%'>".$ciag_wlasciwy."</div>

a dla końcowej "piękności" można zrobić tak:

<div style='background-color: #98afc7;overflow-x:auto; white-space:nowrap;position:absolute;width:70%;right:5%;margin-top:5%;'>".$ciag_wlasciwy."</div>

Przetestuj jeszcze jak to będzie zachowywać się w przypadku wpisania tekstu i użycia tego bbCode, bo nie chce mi się tego sprawdzać.

[Batman]

no pięknie działa w ff ale jest jeden problem z takim rozwiązaniem , jeden tag działa super ale jak dasz 2 po sobie to ten drugi jest pod pierwszym i go nie widać.

a ja niestety będę potrzebował nawet kilkanaście tych tagów w jednym poście

dałem 83 procenty i w większości przeglądarek jest ok

[matma4u]

Ok to działa na 1000%, bbcode musi mieć taką strukturę:

<table style="width:100%;table-layout:fixed;">
  <tr>
     <td>
      <div style='background-color: #98afc7;overflow:auto; white-space:nowrap;'>http://forum.invisionize.pl/index.php?showtopic=2589http://forum.invisionize.pl/index.php?showtopic=2589http://forum.invisionize.pl/index.php?showtopic=2589</div> 
      </td>
   </tr>
</table>

[Batman]

Działa

Wielkie dzięki matma4u