Problem z sąsiadującymi DIVami

Graduatte · 7 Czerwca 2006

Witam. Przerabiam całkowicie forum oparte na systemie phpBB.

Rezygnuję z tabelek i zastępuję wszystko co się da spanami i divami.

Na stronie głównej chciałem umieścić dwie główne kolumny i w tym celu

zbudowałem 3 divy.

Pierwszy "master" który ma stałą szerokość 770 i wyśrodkowanie.

Oraz "slave1" (po lewej) i "slave2" (po prawej) wewnątrz mastera, które miały być tymi

właściwymi kolumnami.

I teraz pojawił mi sie problem, ponieważ ustawiam pierwszy na szer. 490, a drugi na 280

(razem 770 "mastera") i pod FireFoxem wszystko jest ok, niestety IE6 wyświetla oba divy

nie koło siebie, lecz jak szachownice (stykają sie naróżnikami).

("slave2" ma ustaiony float: right; )

Zastanawiam sie co jest grane, przecież nie zrobiłem błędu rachunkowego i powinno sie zgadzać.

Sprawdziłem potem, że kiedy ustawiałem "master" na 773px -> slave'y wyrównały się,

ale była między nimi 3-pixelowa szpara. I nie wiem co z tym zrobić.

Już 6 godzin kombinowałem z borderami, paddingami, marginami, ale nic nie dało efektu.

Nie mam pojęcie skąd te 3 pixele i jak sie z nimi uporać.

Zatem pytanie: jak zrobić żeby między siąsiednimi divami nie było przerwy i by one

do siebie przylegały, tak jak komórki tabel? (I czy to możliwe?)

Jeszcze dodam, ze podejrzewałem, iż powodem moze być spacja w kodzie

(bo IE jest na takie kosmetyczne błedy uczulone) ale mogę to już wykluczyć.

Link do strony: dreamland.movieforum.pl

Link do CSSa: dreamland.movieforum.pl/templates/subSilver/forumstyle.css

Używam:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

Za pomoc z góry serdecznie dziękuję.

Sebaci · 7 Czerwca 2006

A na pewno próbowałeś z wszystkimi marginami i paddingami na 0 :soczek: A jak dasz na 771 to jest przerwa 1 piksela?

PS używaj doctype'a Xhtml a nie Html

zerocool · 7 Czerwca 2006

Nie wiem czy dobrze zrozumiałem ale :

https://www.ecv1457.2-ec.com/testy/divy.html

zerknij sobie na mój przykład i nie zapominaj że jeśli dajesz padding 10px do jednego z pól to musisz dodać do mastera 20px jeśli do dwóch dodajesz po 10px do mastera dodajesz 40px

MMP · 7 Czerwca 2006

Rezygnuję z tabelek i zastępuję wszystko co się da spanami i divami.

Ludziom już naprawde powoli odbija.

Tabela - dane tabelaryczne

Forum PRZEDSTAWIA takie dane, więc z tabelek się w tym przypadku nie rezygnuje - a bynajmniej nie wszędzie

zerocool · 7 Czerwca 2006

Ludziom już naprawde powoli odbija

No cóż oczywiście jest to możliwe i nie oszukując się zmniejsza to objętość kodową serwisu, jest bardziej przyjazne nie tylko dla robotów, ale i użytkownika, a jedyną wadą może być kompatybilność z przeglądarkami.

Czy ludziom odbija ? Po częsci tak bo nieumiejętne posługiwanie się DIV-ami może skopać całkiem stronę, ale profesjonalne wykonanie może pomóc w przypadku większych serwisów zasranych dosłownie znacznikami TD I TR TABLE itd.

Po dobrej zmianie strona ze 100Kb zmniejsza się do 50Kb, ma to niezłe znaczenie w przypadku kilku tysięcy userów dziennie. Jednak w przypadku DIV, niestety w dalszym ciągu polecam tylko do prostych serwisów, po prostu szkoda nerwów, a z moich testów wynika że nie ma to znaczenia dla robotów.

7 Czerwca 2006

szukaj pod "3 pixel gap"

np. tutaj https://www.simplebits.com/notebook/2004/07/30/3pixels.html

zerocool · 7 Czerwca 2006

szukaj pod "3 pixel gap"

Czy ktoś raczy zajrzeć na moje DIV-y które nie stykają się rogami zanim poda jeszcze 100 tysięcy linków ?

Działa poprawnie pod Explorerem, Firefoxem, oraz Operą ! Czego chcieć więcej ?

https://www.ecv1457.2-ec.com/testy/divy.html

MMP · 7 Czerwca 2006

nie oszukując się zmniejsza to objętość kodową serwisu

Eg.1

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

42 znaki

Eg.2

<div id="container">
<div>
</div>
<div>
</div>
<br />
</div>

Znaków jest więcej. Więc ani kodu mniej, a jedynie strata czasu.

zerocool · 7 Czerwca 2006

Fajnie MMP tylko pokaż mi taką pustą tabelę :blush:

<table align="center" width="770" cellpadding="3" cellspacing="1" border="0">

O ile width i border zdefiniujesz w CSS to z "cell" i "center" już nie będzie tak fajnie

dodatkowo dojdzie jeszcze

<td class="catHead" height="28">

i już kupka :rotfl:

zresztą nie ma co polemizować zrobiłem kilka stron na na DIV-ach i widać od razu czystość kodu.

Graduatte · 7 Czerwca 2006

Wielkie dzięki zerocool. Dokładnie się temu przyjrze i chętnie skorzystam. Naprawde ułatwiłeś mi życie.

w3master, Twój link równiez mi się przydał, głównie w zrozumieniu pewnych kwestii. Również dziękuję.

Nie sądze, żeby ten serwis był nie wiem jak skomplikowany, więc jednak nadal zamierzam stosowac divy. Mam dosyć dużo wyświetleń i planuje dalszy rozwój, dlatego musiałem pomyślec o pewnych zabiegach, by zaoszczędzić na transferze i to głównie dlatego się przerzucam.

Nie sądze też, zęby mi odbiło, ponieważ to dopiero mój pierwszy serwis oparty na divach. Przy okazji chcę się tego też po prostu nauczyć tak, by mieć jako tako wprawe w projektowaniu bez tabelek i nie widze w tym nic złego.

Pozdrawiam.

zerocool · 7 Czerwca 2006

Chciałbym jeszcze tylko rozwiać wątpliwości pomiędzy DIV a TABLE

podam więc przykład który zrobiłem a który najlepiej obrazuje różnice pomiędzy TABELAMI a DIV-ami

https://www.ecv1457.2-ec.com/testy/table-div.html

Wszystkie wyglądają tak samo, a jedna pierwsza tabela to całość.

Druga tabela to w rzeczywistości 5 różnych tabeli jedna pod drugą.

No i trzecia tabela to w rzeczywistości DIV-y.

Z wierzchu nie widać różnicy natomiast w kodzie różnice są całkiem niezłe. I o ile w małej stronie nie będzie to robiło wielkiej różnicy, o tyle w portalu składającym się głównie z tabelek róznica będzie blisko 40% mniej objętościowo kod.

PS. Wersja którą przedstawiłem wyświetla się poprawnie na Firefox, Explorer, Opera ( Windows XP )

Ponieważ nie sprawdzałem innych systemów i przeglądarek proszę jeszcze o info, gdyby ktoś pracował na MAC-u, lub jakichś innych przeglądarkach

MMP · 8 Czerwca 2006

cellspacing="0" cellpadding="0" class="tabela1"

colspan="2" class="td3"

Można wywalić, bo CSS daje możliwości robienia gniazd.

Czyli

table

table th

table td

wiec nie trza tego definiowac

Graduatte · 8 Czerwca 2006

Ale czym zastąpić [cellspacing=0] i [cellpadding=0] w css ?

Odpowiednik pierwszego -> { border-spacing: 0; }

nie jest interpretowany przez IE.

Forum PRZEDSTAWIA takie dane, więc z tabelek się w tym przypadku nie rezygnuje - a bynajmniej nie wszędzie

bynajmniej to nie to samo co przynajmniej

(i prosze nie potraktuj tego jako złośliwość, czy wymądrzanie się)

zerocool · 8 Czerwca 2006

Odnośnie Cellspacing i Cellpadding zrobiłem takie porównanie :

https://www.ecv1457.2-ec.com/testy/cell.html

U mnie we wszystkich przeglądarkach jest wporządku, ale być może ktoś pracuje na jakichś starszych wersjach i może stwierdzić czy w przykładzie numer 2 nie ma przerw pomiędzy komórkami tabeli.

Jeśli to co zrobiłem by się sprawdziło, jesteśmy już blisko DIV, ale w kodzie jeszcze widać różnice

CSS zdał test poprawności W3C

XHTML 1.1 również

Swoją drogą takie forum na DIV-ach to byłoby coś, MMP ty lubisz takie wyzwania potem można zrobić DIV TEMPLATE by MMP

MMP · 8 Czerwca 2006

Ale czym zastąpić [cellspacing=0] i [cellpadding=0] w css ?

padding/margin

Swoją drogą takie forum na DIV-ach to byłoby coś, MMP ty lubisz takie wyzwania smile.gif potem można zrobić DIV TEMPLATE by MMP biggrin.gif

Może kiedyś

Zaloguj się

Problem z sąsiadującymi DIVami

Rekomendowane odpowiedzi

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Gość w3master

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Zarchiwizowany

Ostatnio przeglądający 0 użytkowników

Polecamy

Współpracują z nami

Powiadomienie o plikach cookie