[HTML, CSS] Problem z tłem w TR tabelki

Rejestracja:ponad 17 lat
Ostatnio:ponad 16 lat

Witam,
mój problem dotyczy czegoś, czego nawet w najdziwniejszych snach bym się nie spodziewał:

Kopiuj


<html>
<body>

<table width="100%">
<tr style="background-image: url(obrazek.gif); background-repeat: repeat-y;"><td>  

    asdasdasda dasd as dasdas a s</td><td> sadas das das dsa </td><td> sad as das 

das</td>
</tr>
</table>

</body>
</html>

Ten kod działa tak, jak bym chciał tylko w Firefoxie. W FF obrazek w parametrze podany, gdy mamy do czynienia z nową komórką KONTYNUUJE od miejsca, w którym skończył, a nie zerując pozycję, z której zaczął. W IE i Operze ta pozycja jest zerowana- tak, jakbym styl ustawiał dla każdej komórki z tym tłem (nie wiem, czy dobrze to określiłem). To jest dobrze widoczne, gdy obrazek wielkością przekracza rozmiar komórek np. jest bardzo duży. Gdybym chciał tą metodą wstawić jeden, podłużny obrazek jako tło w TR, ten obrazek zamiast stanowić spójną całość, spowodował by powstanie serii niedokończonych obrazków z nim (kurde, ciężko mi to opisać- najlepiej wklejcie kod, bo mało go i dowolny, duży obrazek, a wierzę, że domyślicie się, co miałem na myśli, jeśli nie dość jasno się wyraziłem), zamiast tła tabeli w danym rzędzie. Z góry zaznaczam, że nie mogę ustawić po prostu stylu dla tabeli całej, bo chodzi mi tylko o to, by obrazek był w całości dany w jednym rzędzie, a nie we wszystkich- reszta ma być nienaruszona. Odpada też opcja pocięcia obrazka na wiele małych, bo szerokość tabeli jest procentowa i kolumn poszczególnych też- podstron jest wiele, więc nie mogę stwierdzić z tego powodu, jaka dokładnie szerokość będzie na danej podstronie. Przerabiam styl phpbb by przemo i ten błąd jest kluczowym niestety w tym, jak forum wyświetla się w Operze/IE a jak w FF. Proszę przy odpowiadaniu najpierw sprawdzić, czy faktycznie dana zmiana dała porządany efekt, bo wbrew pozorom to nie jest tak "oczywiste" naprawienie tego (sprawdzić w IE, Operze i FF).

Pozdrawiam i dzięki za odpowiedzi z góry.

dzek69

2008-11-05 21:17

dzek692008-11-05 21:17

Moderator

Rejestracja:ponad 18 lat
Ostatnio:15 dni
Lokalizacja:Rzeszów

poki co nie wiem co jest nie tak, i pewnie sie nie dowiem (ale sprobuje),
aczkolwiek opis jest czytelny i zrozumialy :)

edit:
no i nic nie wymyslilem..

ale szacun ze znalazłes cos co dziala tak jakby sie chcialo tylko w FF
na ogol to znajduje ja rzeczy ktore nie dzialaja w IE albo FF (jednym, albo obu) a w operze bez problemu, jakkolwiek bym to nie napisal..
ale najwiecej problemów robi FF (dziwne, spodziewalem sie tego po IE.. ale to chyba dlatego ze nie robie super-zaawansowanych lay'ów, z kazda mozliwa wartoscia css uzyta conajmniej pare razy :P)

wampirek

2008-11-05 22:23

wampirek2008-11-05 22:23

Rejestracja:ponad 17 lat
Ostatnio:ponad 16 lat

Hmmm no nie na taką "optymistyczną" wizję liczyłem... Może jednak ktoś ma jakiś pomysł czy wie, co z tym zrobić?

Thx z góry.

PS U mnie w FF lepiej wyświetlają się strony, niż w Operze z reguły, ale nie jest to tak drastyczna różnica. :-P

romek

2008-11-06 11:56

romek2008-11-06 11:56

Rejestracja:ponad 21 lat
Ostatnio:ponad 6 lat
Postów:162

No coz ucz sie robic strony :)

Generalnie NIE ROBIMY LAYOUTOW na tabelach - miedzy innymi z tego co opisales powodu. Zjawisko to ktore opisales ZAWSZE bedzie tak wygladalo i nie ma wtym nic nowego - znamy to zachowanie od HTMLa bodajze 2.0 czyli czasow archaicznych ktore byly dawniej niz wiekszosc ludzi zyje :)

Nowoczesne, nawet najprostrze strony powinny byc robione na divach z zastosowaniem porzadnych styli a tabele zarezerwowane tylko dla danych tabelarycznych! To jest tzw semantyczny HTML - poczytaj sobie.

Teraz co do FF - jest to jedyna jak dotad przegladarka zgodna ze standardami W3C ktore obowiazuja w tworzeniu stron www. To wlasnie FF powie Ci czy zrobiona strona jest dobrze i czy trzyma standardy. W dalszym rozrachunku plyna z tego same korzysci.

wampirek

2008-11-06 12:06

wampirek2008-11-06 12:06

Rejestracja:ponad 17 lat
Ostatnio:ponad 16 lat

A może Ty sobie poczytaj to, co zostało napisane w pierwszej wiadomości, a trochę da Ci do myślenia, czemu robiona strona jest na tabelce, a nie na div'ach. Jeśli chcesz takie uwagi nieprzydatne dawać, to najpierw upewnij się, że wiesz, że masz pojęcie o tym, do czego się odnosisz! Robię styl do forum Przemo, a nie stronę od zera- chyba tylko samobójca by zaczynał od samego zera robić całość stylu tylko po to, by był na div'ach, a to by nie tylko nie rozwiązało problemu, a narobiło masę innych. Forum 4programmers jest też zrobione w dużej części na tabelce- może im też powiesz, by zaczęli pisać całość na div'ach? Problem rozwiązałem już sam, a w zasadzie znajomy mi trochę podpowiedział (sam był zaskoczony zresztą tym błędem nieco) i znalazłem sposób i na to. Mimo to dziękuję pierwszemu rozmówcy, że chociaż starał się pomóc i uważnie czytał to, co zostało napisane, a nie dawał nieprzydatne komentarze. [browar]

// 4p bez tabelek to tylko kwestia czasu - Ł

id02009

2008-11-07 13:42

id020092008-11-07 13:42

Rejestracja:około 20 lat
Ostatnio:ponad rok
Postów:650

dla tego tr-a możesz dać
display: inline-table;
width: 100%;

Nie pytaj mnie dlaczego działa. A romek ma rację - nie rób layoutów na tabelkach, bo to straszna wiocha :)

wampirek

2008-11-07 14:24

wampirek2008-11-07 14:24

Rejestracja:ponad 17 lat
Ostatnio:ponad 16 lat

id02009: nie działa niestety u mnie dla IE. Dla Opery chyba tak, więc ostatecznie: mógłbym niby z użytkowników IE zrezygnować po prostu... ale to mało eleganckie rozwiązanie.

Niemniej statystyki:
bBulletin
SMF
php fusion
ip.board
punbb
phpbb by przemo
Joomla
oraz wspomniany: Coyote z 4programmers na koniec.
Wszystkie te fora zrobiono na tabelkach. Tylko phpbb3 udało mi się znaleźć z for, które zrobiono inaczej.

Dla tych, co tak usilnie próbują wmówić, że forum na tabelkach robione jest "złe, be i w ogóle" coś, co ich nieco uświadomi, poza wspomnianymi statystykami:

Cytat z http://www.kurshtml.boo.pl/

Czasami osoby początkujące, dowiadując się, jakie to "złe" są tabelki, próbują w każdym przypadku zastępować je elementami
...
. Tymczasem zwykle jest to tak samo niepoprawne semantycznie, jak ich nadużywanie. W tabelach powinny być prezentowane dane tabelaryczne, które obejmują powtarzający się zbiór elementów (wiersze) tych samych typów (kolumny). Zwykle daje się łatwo rozpoznać, czy w określonym przypadku powinno się użyć tabeli:

W prezentowanych danych można wyróżnić poziomy lub/i pionowy nagłówek - może go nawet nie być, ważne żeby dało się go logicznie wyznaczyć choćby wirtualnie.

Prezentujemy przynajmniej dwa egzemplarze krótkich danych o podobnym charakterze - będą to odpowiedniki kolejnych wierszy tabeli. Taka tabela może mieć nawet tylko jedną kolumnę danych (w takim przypadku zwykle mamy do czynienia z pionowym nagłówkiem, poprzedzającym kolumnę danych).

Jasne- można na siłę próbować wszystko zmieniać, by koniecznie tam były tabelki- nie widzę jednak sensu tego praktycznego dla for, ani żaden z twórców największych systemów forowych, prócz phpbb3 (wiem- nie wszystkie wymieniłem, ale w miarę możliwości upewniłem się do przynajmniej kilku tych większych, by dać obrazowo całość) i jak w cytacie wspomniano: jest to równie niepoprawne semantycznie, co nie używanie div'ów dla layoutów strony w tym wypadku akurat. Layout samej strony mam na div'ach, a forum siłą rzeczy i poprawności na tabelkach i tak większość systemów forowych działa.

Niemniej dzięki, że prócz upierdliwych uwag, jak Romek i prawienia kazań, znalazłeś rozwiązanie dla mnie, o które mi chodziło. Swoją drogą Romek, nim takie uwagi napisze powinien poprawić swoją stronę- masakrycznie działa to menu i próba wejścia po jego rozwinięciu na któryś z link wymaga "refleksu", by szybko myszką ruszyć i nie trafić w pustą przestrzeń między pozycjami po rozwinięciu, by się nie schowała całość ;-P

id02009

2008-11-07 15:24

id020092008-11-07 15:24

Rejestracja:około 20 lat
Ostatnio:ponad rok
Postów:650

To, że wiele sajtów tak robi to nie znaczy, że jest dobrze. Przypomina mi się takie hasło: "jedzmy g****, sto milionów much nie może się mylić".

Poza tym prosty przykład, masz układ jak w forum

nazwa_watku | data | napisal | odpowiedzi |

itd. I niby na pierwszy rzut oka - powinna być tabela. A teraz nachodzi Cię ochota zmienić układ na np

nazwa watku |

napisal | data |odpowiedzi |

I w przypadku tabelek zmieniasz całą strukturę tabeli, ja który to zrobiłem na divach - zmienię dwie linie w css-ach. A biorąc pod uwagę fakt, że struktura danych się nie zmieniła, a tylko ich prezentacja, to logiczne, żeby zmienić cssy(odpowiedzialne za prezentacje danych) a nie dokument (odpowiedzialny za strukturę prezentowanych danych)

Inny przykład. Jak chcę dodać box, który po najechaniu na wątek się pokaże i załaduje ajaxem ostatni post. Najłatwiej jest zrobić to dodając diva z position absolute w danym wierszu. Jednak jak zrobisz to w tabeli - będzie to niezgodne ze specyfikacją.

dane tabelaryczne, to przecież
nazwa : wartośc
nazwa: wartość

To nie prawda, ze fora siłą rzeczy powinny siedzieć na tabelkach. Siedzą na tabelkach z jednego z poniższyc hpowodów:

powstały w czasach, gdy tabelki były szeroko stosowane w budowaniu layoutów
twórcy rozdzielają silnik forum od jego wyglądu (template'y) i udoskonalając forum olewają defaultowy template, bo to nie ich działka (skupiają się na bezpiecznym enginie)

Tak czy siak zrobisz sobie przysługę nie wyrabiając nawyku tworzenia layoutów na tabelkach. W swoim zespole wszystkich tego oduczam ;)

Liczba odpowiedzi na stronę

Treść *

Treść

Podgląd

Kliknij, aby dodać treść...

Kliknij, aby dodać załącznik lub wklej ze schowka.

Instrukcja obsługi Markdown

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj underline.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, , , <kbd>, <del>, , <dfn>, <pre>, <blockquote>, <hr/>, ,  oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H2O i m2 otrzymasz: H₂O i m².

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript document.write('Hello World'); ```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.