Jako, że ostatnio dostaje dużo pytań o xhtml postanowiłem zrobić ten mały zbiór odnosników do najpotrzebniejszych materiałów w sieci.

Temat beztabelkowego kodu nie powinien być pozycjonerom obcy, gdyż własnie przy zastosowaniu xhtml+css i designie opartym na div'ach mozna uzyskać ciekawe efekty przy indeksowaniu, efekty, które przy designie tabelkowym są w wielu przypadkach nie do uzyskania.

Poniższe informacje sa oczywiście proste do wygoglania ale.. sami wiecie jak nasza młodzież dobrze googla

Najpierw 2 najwazniejsze publikacje:
Projektujesz w tabelkach? OBUDŹ SIĘ - http://nf.hyperreal.info/patrz/pubudka-tablarza/
Dlaczego układ na tabelkach jest głupi - http://osiolki.net/tabelki/

PL:
kurs xhtml - http://xhtml.b7.pl/
kurs xhtml, css - http://web.reporter.pl/html/
xhtml na wikipedii - http://pl.wikipedia.org/wiki/XHTML
no frontiers - http://nf.hyperreal.info/ (można powiedzieć polski odpowiednik alistapart. ) - trzeba odwiedzić
HTML i XHTML - najczęściej zadawane pytania (FAQ) - http://osiolki.net/faq/xhtmlfaq
Zgodność ponad wszystko - http://www.chip.pl/arts/n/article_126408.html

wiele z powyższych tekstów ma tonę kolejnych odnośników do ciekawych materiałów

ENG:
Little boxes (gotowe designy) - http://www.thenoodleincident.com/tutorials...sson/boxes.html
A list apart - BIBLIA!!!!!!!!!! - http://www.alistapart.com/
stylegala - http://www.stylegala.com/
css zengarden - siła cssa - http://www.csszengarden.com/
CSS Layout Techniques: for Fun and Profit - http://glish.com/css/
2-col tableless layout - http://wellstyled.com/css-2col-fluid-layout.html
CSS-Based Layouts - http://www.allmyfaqs.com/faq.pl?Tableless_layouts
positioniseverything - kolejna biblia - http://www.positioniseverything.net/

Proszę w tym wątku nie śmiecić offtopiczną rozmową - tylko dorzucać linki do innych bardzo przydatnych stron o xthml/css.


edit 22.05.2005 13:09

listamatic - listy, rozwijane listy - http://css.maxdesign.com.au/listamatic/
3 kolumnowy layout - http://www.bluerobot.com/web/layouts/layout3.html
3 kol. lay, zaokrąglenia, rollovery - http://www.redmelon.net/tstme/
porady, kolumnowe layouty - http://realworldstyle.com/
generator 3kolumnowy - http://www.fu2k.org/alex/css/layouts/3Col_..._NN4_FMFM.mhtml
3kolumnowy, ze zmianą kolumn, z contentem na górze - http://www.webproducer.at/flexible-layout/

edit: 25.05.2005 13:04

[b]Why tables for layout is stupid - http://www.hotdesign.com/seybold/
[b]rounded corners without images - http://pro.html.it/esempio/nifty/

Wiem, wiem, ale może ktoś wydzieli. Aha: napisz może też o ułomnościach przeglądarek, problemach jakie spotykają korzystający z warstw.. co? To jest jednak też pewna z cech CSS2..

Np. wyśrodkowanie w poziomie i pionie kwadracika w 3 najpopularniejszych przeglądarkach (ie, ff, opera).. Jest wiele, wiele takich ciekawych rzeczy

Aczkolwiek warstwy faktycznie są świetne. Ja bym wręcz powiedział, że genialne: przerabiam wszystkie moje stronki na to.

http://www.sitepoint.com
http://pb.wckp.lodz.pl/xml/

pozdr.

zYm3N napisałem:
http://www.positioniseverything.net/

na tej stronie są zebrane chyba wszystkie 'haki' związane z błędną interpretacja, głównie IE.

na przykład:
http://www.positioniseverything.net/ie-primer.html

W takim razie najwyższy czas, żebym się w końcu obudził.


Chodzi o to, że kod strony jest tak zbudowany, że elementy mniej ważne pod względem pozycjonowania są na dole strony, a w stylach definiuje się, żeby były wyżej (i na odwrót) ?

no raczej mniejw ażne nadal są niżej, a ważne są wyżej..

to szczególnie widać przy typowym 3 kolumnowym layoucie (bo przy 1 czy 2 kol. tabelce czasami tez można to uzyskać) kiedy to środkowa kolumne z zawartością powinieneś wyciagnąć jako pierwszą zaraz po head. Dorzucasz inne title, inne meta, tytul tekstu w urlu i google łyka to jak pelikan wielokrotnie sprawdzone :mrgreen:

normanos, właśnie przerabiam moją stronę i wcale to takie trudne nie jest, a efekty od razu widać (pod względem graficznym). Linki bardzo się przydały.

Dzięki za obudzenie mnie!

No jak narazie, to mógłbym mieć "ale" bo przy tabelkach też można niezłe wyniki osiągnąć A da się przeciągnać nad pierwsze miejsce w Googlach?

niemniej - dzięki stokrotne za linki, bo to tak czuję, że poczęści do mnie.


Czas i mi zacząć (jak tylko czas będzie)

hmm, nie wiem czy zrozumiałes problem. raczej nie. niezle wyniki osiągnąć? wypromować to nawet można stronę w frontpage.

dobra magister. dawaj design tzw. 3 kolumnowy, oparty na tabelach w którym środkowa tabela z tzw. contentem będzie pierwsza po head. do tego 'zindeksuj' to tak aby site: ładnie prezentował zawsze zawartość danej podstrony (niepowtarzalną) a nie jakies menu lub ogólny opis. do dzieła!

:mrgreen: To dział o html/css więc priorytet tu ma poprawne budowanie stron, a dopiero potem pozycjonowanie

Jak sobie radzicie z warstwami/definicjami styli dla wielu wielu np. p, h1, h2.. ? W wielu plikach to trzymacie?

Jakich konwencji nazewniczych się trzymacie?

pozdr.

w jednym pliku. zawsze zewnętrznym. to daje wiele mozliwości.

nazewnictwo to kwestia przyzwyczajenia.

ja z reguly robie tak, że jak mam


to css wygląda tak:


innymi słowy nie robie czegoś w stylu



bo biorąc pod uwagę całą witryne i wiele nagłówków, akapitów mozna sie pogubić. ale to też zależy od danego designu bo czasami potrzeba mieć różnie wyglądające zawartości tych samych divów. wtedy trzeba tak mieszać.

wszystko zalezy od danego designu i potrzeb.

Ok, racja :oops:

Nie znasz jakiegoś sajta, który by mówił o takich rzeczach? (konwencja). Bo sam szukałem ale coś cienkie wyniki są.. notację węgierską znam: za duża, za skomplikowana i nie pasuje

pozdr.

Polecam http://osiolki.net/tabelki/ a w szczególności rozdział http://osiolki.net/tabelki/13searchengines.html

zYm3N ja wiedze czerpałem głównie z 'a list apart', a konkretne problemy googliłem na bieżąco. Poza tym przejrzenie kodu najlepszych cssowych stron duzo pomaga.

Czytanie czyichś kodów źródłowych przyprawia mnie o dreszcze.. nie cierpię czytać czyichś rzeczy.. bleh!

pozdr.

Po przeczytaniu tych artów postanowiłem przerobi moją stronke na divy, wszystko dobrze mi szło az do tego kodu:


Chciałem zrobic by obok obrazka byl wyswietlany tekst, teraz sie wyswietla ale niestety tekst sie nie zalamuje i wychodzi poza głowny div

Wie ktoś co zrobi z takim fantem?

a jak ma się załamac skoro to jeden wyraz?

btw: oddziel style od htmla.

Niestety nawet jak to podziele na dwa wyrazy to sie nie zalamuje



Narazie próbuje to wszystko zrobić a potem będe wszystko ładnie ustawiac

Sprawdziłem rezulaty pod:
FF: Nie dzieli wyrazów :/
IE Cała treść i obrazek poszla ze 100px w prawo i w 10px w gore :/
Opera: Jedyna przegladarka w której jest wmiare ok :/

no to zostalo Ci tylko promowac opere :]


jedyny plus* xhtml jaki odkrylem do tej pory to:

odmiana w monotonnej juz czasem pracy :]

*ale to duzy plus

ps. od tych css2 dzis mnie szczypia oczy od srodka :]

zapomniałeś o width: (np width:100px;)
i za bardzo komplikujesz jak na poczatek, nie zagnieżdżaj tak bardzo tych div-ów, bedzie mniej problemów.

Nie moge za bardzo wykapowac o co w tym chodzi, dlatego mam pytanie. Jak np. zrobic obrazek?

EDIT:Przeanalizowałem kod i css pewnej strony i juz wiem

Obrazki robi sie w PhotoShopie


W divach najgorsza rzecz to pozycjonowanie(pasuje do tematyki forum )
Tutaj absolute, relative, potem jeszcze IF [IE] bo IE musi miec osobny css, potem jeszcze coś nie wyjdzie z tym pozycjonowaniem i zmieniasz wszędzie o 1px w lewo, prawo

Wole jednak tabelki, ale efekt jaki uzyskałem na divach jest super

Inspirowany csszengarden (szczena mi opadła) zrobiłem nową wersję swojej strony w XHTML+CSS2. Zobaczcie i oceńcie - adres w podpisie.

wygląda milutko ale plis z takimi tematami na odpowiednie podforum -> strony do oceny
http://forum.optymalizacja.com/forum24.html

Mam takie pytanie,
przekonaliście mnie do zmiany tabelki na css, ale to jest narazie za trudne
interesuje mnie taki schemat
http://www.webproducer.at/flexible-layout/
ale tam jest kilka plików css i troche sie w tym nie orientuje...
dałoby sie zrobić taki layout z jednym plikiem css?
mógłby ktoś mi w tym pomóc??

Ja rownież przerabiam strone na DIV ale z marnym skutkiem.

A ja mam problem tego typu.
CSSa wziąłem ze strony http://www.thenoodleincident.com/tutorials...son/basic4.html i przerobiłem go na własne potrzeby Wszystko pięknie, ładnie ale jak zmienia się wielkość okna przeglądarki to zmienia się również szerokość strony i DIVy zachodzą na siebie Może mi ktoś poradzić co mam zrobić w takiej sytuacji ?? Z góry dziękuje za pomoc.

Ps Adresu swojej strony nie podam bo jeszcze jej nie mam ale jak ktoś chce zobaczyć o co mi chodzi to niech wejdzie na stronę którą podałem.

Może ją wrzuć gdzieś jednak, bo strona z linka ani pod IE, ani FF nie zachowuje się tak jak to opisałeś.

http://www.net-praca.com edit: stronę zrobiłem ale nadal nie naprawiłem tego błędu czekam na pomoc

Głównie chodzi o to że wystarczy trochę zmniejszyć okno przeglądarki i środkowy div się zwęża a jeżeli jeszcze bardziej zmniejszy się okno to prawy div wchodzi na środkowy. Nie potrafię tego dokładniej wytłumaczyć ale myślę że każdy wie o co mi chodzi Chce poprostu żeby strona miała stałą szerokość (niezależnie od rozdzielczości) i działała poprawnie pod każdą przeglądarką.

Ps Nie zwracajcie uwagi na tego diva na górze strony, zamiast tego będzie logo.

Aaa... widzę. Niestety nie wiem

kubik_90, obejmij wszystko DIVem, któremu wpisz na sztywno (np. w px, nie w %) daną szerokość...

Kaviorek a możesz mi pomóc to zrobić ? Bo ja nie bardzo wiem jak mam to zrobić. Oczywiście próbowałem ale strona całkiem się rozjeżdża i nadal zmienia swoją szerokość

<body>
<div style="width:820px;">

[... tutaj reszta...]

</div>
</body>

Nadal nie jest dobrze Prawy div zostaje po prawej stronie a reszta przesuwa się na lewą stronę.

Ps. Ten kod mam wkleić na każdej stronie i w cssie coś dodać ?


edit: teraz jak trochę pokombinowałem to można powiedzieć że to działa ale nie na prawego diva Prawy div jest ciągle po prawej stronie i nic się nie da w tym zrobić.

kubik!

masz w kodzie:


</head>
<body>
<div>

to dopisz:

</head>
<body>
<div style="width:900px;">

czy tam ile pasuje Ci tych px...

Wszystko już działa Dzięki za pomoc.

Dla tych którzy bez namysłu rzucają się na xhtml polecam lekturę stronki http://pornel.net/xhtml

co swietnie widać właśnie na stronie w linku z Twojej stopki
(w mojej stopce są akurat stare, błędne, brzydkie tabele :/)

A artykuł to przypierniczanie się do Validatora (uwagi o tyleż słuszne co bez znaczenia do piszących "z głową"), a nie wyśmianie xhtml'a - dlatego nie rozumiem tego posta.
Html w "najnowszej" wersji to 1999 rok więc chyba czas rozjerzeć się z nowszymi rozwiązaniami.

Stronka z mojej stopki to html + css

Ja w artykule nie widzę nigdzie wyśmiania xhtmla

jak sie wali tableki w notatniku na pamiec to ciezko sie przestawic , oj ciezko, stary juz jestem.... ale sie zawezme i jeszcze naucze...moze

Witam wszystkich. Mam proźbe;

Czy ktoś zna działajacy link do pobudki? bo ten co był to padł a chcialbym to poczytac.


Dziękuje.

http://web.archive.org/web/20060517004605/...budka-tablarza/

http://giker.blogspot.com/2007/06/rounded-corners.html

Ostatnio popełniłem takiego posta o zaokrąglonych rogach bez tabelek - może komuś się przyda

Pozdrawiam

Przydać się na pewno przyda Dzięki

Jedynym miejscem, gdzie moim zdaniem dozwolone są tabelki - są szablony HTML e-maili.
Niestety niektóre przeglądarkowe poczty elektroniczne usuwają wszystkie albo większość styli CSS, przez co projektowanie na div-ach mija sie z celem.

Niema co na nowo rozwlekać tematu na nowo, jeżeli chodzi o projektowanie stron internetowych, to tabele służyć powinny jedynie do prezentacji danych tabelarycznych - zgodnie z pierwotnym założeniem - nadają się do tego bardzo dobrze.

Sporym problemem jest to, że wiele CMS dostarcza gotowe dodatki oparte o tabele i ludziom po prostu nie chce się przerabiać wielu linijek kody, skoro maja działające rozwiązanie

Twist, jednak tylko CMS'y do d*py i stare wersje tych lepszych "oferują tabelki". To tak jakbyś napisał, że sporym problemem jest to, że IE6 nie obsługuje przeźroczystości png. To nie jest problem, to BYŁ problem, który został rozwiązany. Poza tym zazwyczaj to w szablonach decyduje się w większości o DIV'ach czy tabelach.