[xhtml+css2] Projektujesz w tabelkach? OBUDŹ SIĘ!!!

[nrm]

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Ę - https://nf.hyperreal.info/patrz/pubudka-tablarza/

Dlaczego układ na tabelkach jest głupi - https://osiolki.net/tabelki/

PL:

kurs xhtml - https://xhtml.b7.pl/

kurs xhtml, css - https://web.reporter.pl/html/

xhtml na wikipedii - https://pl.wikipedia.org/wiki/XHTML

no frontiers - https://nf.hyperreal.info/ (można powiedzieć polski odpowiednik alistapart. ) - trzeba odwiedzić

HTML i XHTML - najczęściej zadawane pytania (FAQ) - https://osiolki.net/faq/xhtmlfaq

Zgodność ponad wszystko - https://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) - https://www.thenoodleincident.com/tutorials...sson/boxes.html

A list apart - BIBLIA!!!! - https://www.alistapart.com/

stylegala - https://www.stylegala.com/

css zengarden - siła cssa - https://www.csszengarden.com/

CSS Layout Techniques: for Fun and Profit - https://glish.com/css/

2-col tableless layout - https://wellstyled.com/css-2col-fluid-layout.html

CSS-Based Layouts - https://www.allmyfaqs.com/faq.pl?Tableless_layouts

positioniseverything - kolejna biblia - https://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 - https://css.maxdesign.com.au/listamatic/

3 kolumnowy layout - https://www.bluerobot.com/web/layouts/layout3.html

3 kol. lay, zaokrąglenia, rollovery - https://www.redmelon.net/tstme/

porady, kolumnowe layouty - https://realworldstyle.com/

generator 3kolumnowy - https://www.fu2k.org/alex/css/layouts/3Col_..._NN4_FMFM.mhtml

3kolumnowy, ze zmianą kolumn, z contentem na górze - https://www.webproducer.at/flexible-layout/

edit: 25.05.2005 13:04

Why tables for layout is stupid - https://www.hotdesign.com/seybold/

rounded corners without images - https://pro.html.it/esempio/nifty/

[zYm3N]

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

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.

https://www.sitepoint.com

https://pb.wckp.lodz.pl/xml/

pozdr.

[nrm]

zYm3N napisałem:

https://www.positioniseverything.net/

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

na przykład:

https://www.positioniseverything.net/ie-primer.html

[Rafal]

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

efekty, które przy designie tabelkowym są w wielu przypadkach nie do uzyskania.

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) ?

[nrm]

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:

[Rafal]

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!

[Dżyszla]

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

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.

właśnie przerabiam moją stronę i wcale to takie trudne nie jest

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

[nrm]

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

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

[zYm3N]

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.

[nrm]

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

nazewnictwo to kwestia przyzwyczajenia.

ja z reguly robie tak, że jak mam

<div id="news">

 <h1>zYm3N atakuje!</h1>

 <p>Rano 30 marca forum zaatakował wirus zYm3N...</p>

</div>

to css wygląda tak:

#news {definicje bloku news;}

#news h1 {definicja nagłówka bloku news;}

#news p {definicja akapitu bloku news;}

innymi słowy nie robie czegoś w stylu

<div id="news">

 <h1 class="naglowek>zYm3N atakuje!</h1>

 <p class="akapit">Rano 30 marca forum zaatakował wirus zYm3N...</p>

</div>

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.

[Dżyszla]

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!

Ok, racja :oops:

[zYm3N]

wszystko zalezy od danego designu i potrzeb

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.

[nrm]

Polecam https://osiolki.net/tabelki/ a w szczególności rozdział https://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.

[zYm3N]

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.

[MMP]

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

<div style="width:95%; margin: 0 auto;position: relative; top:48px;">

       <div id="BorderWypelnienie" style="width:370px; height:150px;position: relative;">

           <div id="ModeValue">

               <img src="{URL_DIR}templates/all/images/strzalka.gif" alt="" />

                <span class="TopicBold">Tytuł</span>

               <div id="ModeKreska" style="width:350px;position: absolute; top:30px;">

               </div>

               

               <div style="position: absolute;top:40px">

                  <div>

                  <img src="img21dedc8fb8.jpg"/>

                  </div>

                  <div style="position: absolute;top:0px; left:103px">

                  fgsdfgfugsdfgfgsdfgfgsdfgfgghfghfghfghsdfererfwerwterterterteg

                  </div>

               </div>

               

           </div>

       </div>

</div>

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?