Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Webhosting.pl _ HTML i CSS _ Czy wszyscy piszą już strony na DIV-ach?

Napisany przez: dAREuS 30.10.2007 - 15:56

No właśnie, jak to jest? Czy znacznik <TABLE> odszedł już w niepamięć, jako metoda na pozycjonowanie elementów na stronie? Czy wszyscy już piszą w <DIV>?

Poprawcie mnie, jeśli się mylę, ale czy Onet.pl nie jest przypadkiem na tabeli?

Napisany przez: Emil Gleguła 30.10.2007 - 16:59

CYTAT(dAREuS @ wto, 30 paź 2007 - 16:56) *
No właśnie, jak to jest? Czy znacznik <TABLE> odszedł już w niepamięć, jako metoda na pozycjonowanie elementów na stronie? Czy wszyscy już piszą w <DIV>?

Poprawcie mnie, jeśli się mylę, ale czy Onet.pl nie jest przypadkiem na tabeli?

Onet.pl... kocha standardy, co tam "Failed validation, 310 Errors". To tylko najpopularniejsza polska strona.

Osobiście używam div-ów i uważam to za standard. Table to przecież tabelka i do tego służyła od początku jej istnienia.

Napisany przez: Decha 30.10.2007 - 17:12

ja osobiście wykonuje strony na DIVach jezeli mnie ktoś o to poprosi, sam stosuję tabelki (nie przeszkadza mi to) bo jest dużo szybciej ... z DIVami trzeba sie troszku nameczyc ...

Napisany przez: Quinn 30.10.2007 - 18:17

Dotąd strony budowałem na zasadzie <table> , bowiem szybko, prosto, zrozumiale. I nie przekonuje mnie mówienie o pr0 sposobie <div> . ;]

Ostatnimi czasy zacząłem opierać strony tylko i wyłącznie (no, prawie) o XML i CSS. Dopiero tu mamy do czynienia z elastycznością strony. Dobrze przygotowany arkusz CSS i strona w XML to raj. :]

Oczywiście znaczniki xHTML w kodzie XML się pojawiają, równie często PHP.

Napisany przez: Spanner 30.10.2007 - 18:32

teraz stronki tylko w DIV'ach, w starych stronach mam jeszcze tabelki ale to tylko ze względu na brak czasu

Napisany przez: Tyr 31.10.2007 - 21:49

Na obecną chwilę początkujący z <div> smile.gif Ale bardziej mi się to podoba smile.gif

Napisany przez: kijan - TwojaPozycja.pl 01.11.2007 - 23:29

Również staram się na divach, natomiast czasami szlak człowieka może trafić, jak coś się mu nie zgadza, w FF działa, a w IE sie rozwala bądź na odwrót sad.gif

Czasami stosuję mix, nie staram się za wszelką cenę wszystko przerabiać na DIVa, moim zdaniem to lekka jest wówczas paranoja.

Napisany przez: Spanner 02.11.2007 - 15:29

zdarza się, miałem tak ze swoją stronką 100% div i w IE było ślicznie a w FF operze lekko rozjechane, namęczyłem się sporo, aby doprowadzić to do stanu użyteczności, ale opłacało się bowygląda ładnie smile.gif

Napisany przez: Decha 03.11.2007 - 00:40

to samo można otrzymać na tabelach w krótszym czasie - ew. dodać troszkę divów - ale nie cała strona na divach wink.gif

Napisany przez: Spanner 03.11.2007 - 08:15

owszem, można też zrobić cała strone w tabelkach,moja stara jeszcze tak wyglada, ale wtedy gorzej z SEO takiej stronki

Napisany przez: Quinn 03.11.2007 - 09:26

A ja właśnie tworzę stronę opartą tylko o XML, php, Javę i bardzooooo duuuuużo CSS. ;]
Unikam xHTML'a, jedynie używam w przypadku linków czy obrazków.

Napisany przez: Spanner 03.11.2007 - 19:27

to jak piszesz w samym xml, to będizesz miał problem zapewne z ulubioną przeglądarką webmasterów czyli IE

Napisany przez: marcin 04.11.2007 - 13:46

osobiscie jestem za divami... caly layout strony lezy w cssie (ktory pobieramy raz), a reszta jest lżejsza - przeciez kilka divow jest lzejsze niz tabelki... jak sie troche popatrzy po solidnie wykonanych stronach w css, to sie zaczyna to doceniac smile.gif
przyznaje - z divami czasami sa problemy, ale warto zdobywac w tym bieglosc
http://osiolki.net/tabelki/
http://web.archive.org/web/20060517004605/http://nf.hyperreal.info/patrz/pubudka-tablarza/
a narazie xhtml'a osobiscie olewam... niestety, dominujace IE6.0 interpretuje xhtml jako zwykly html... poczekamy... niedawno MS zdjal warunek posiadania oryginalnego WIN zeby pobrac IE7.0, choc nie wiem czy jest ono lepsze... (testuje na 6.0), a uzywam Opery (z przyzwyczajenia), choc nie jest najlepsza

Napisany przez: Spanner 04.11.2007 - 20:17

co do IE, to ja np. stosuje xhtml 1.1, fakt faktem że IE go czyta jako html, ale najważniejsze jest to że strona działa wygląda dobrze. Z resztą zawsze znajdzie się jakaś przeszkoda, żeby stosować jakąś technologię na stronach

Napisany przez: eimi 05.11.2007 - 14:16

Nowe rzeczy staram się na div, ale przerabianie starych stron tylko by być zgodnym z fetyszami W3C uważam za przesadę.
Czasem semantycznie niesłuszne użycie tabelek oszczędza wiele pracy.


Napisany przez: aquarius01 06.11.2007 - 21:50

Zdecydowanie xHTML, CSS oraz PHP, tak więc "model pudełkowy" rządzi. Dlaczego ? szczerze odpowiem że nie wiem - samo się tak jakoś porobiło i raczej wynika to z mojej wewnętrznej potrzeby bycia "up to date" - ale nie we wszystkich dziedzinach wink.gif

Zdecydowanie nie jestem zwolennikiem powiedzenia, że "nowe jest wrogiem starego". Standardy - mimo faktycznej "sztywności" W3C są i wolno, bo wolno ale jednak ulegają ewolucji, więc po co podtrzymywać przy życiu technologie, które są już skazane co najmniej na "emeryturę technologiczną". Kiedyś może przyjść taki dzień, że znakomita część witryn, które przez lata nie upgrade'owane pod kątem źródeł po prostu znikną ze względu na to, iż nie będzie ich czym oglądać - to oczywiście mało prawdopodobny i czarny scenariusz ale takich założeń nie należy unikać tym bardziej, że na etapie projektowania danej witryny mamy czas na zastanowienie się nad jej konstrukcją. Po za tym uważam, że mimo naszej wrodzonej niechęci do zmian - ludzkiej niechęci - jednak w zawodzie jaki większość z nas "uprawia" powinniśmy podnosić własne kwalifikacje i przyzwyczajenia do archaicznych konstrukcji nie mają tutaj miejsca bytu.

To oczywiście moje prywatne zdanie smile.gif

Napisany przez: Myjk 07.11.2007 - 11:32

CYTAT(aquarius01 @ wto, 06 lis 2007 - 22:50) *
Zdecydowanie xHTML, CSS oraz PHP, tak więc "model pudełkowy" rządzi. Dlaczego ? szczerze odpowiem że nie wiem - samo się tak jakoś porobiło i raczej wynika to z mojej wewnętrznej potrzeby bycia "up to date" - ale nie we wszystkich dziedzinach wink.gif

Również prezentuję podobne podejście do tematu. Znacznika <table> powinno używać się, przynajmniej w dzisiejszych czasach, tylko tam gdzie jest wymagany. Choć niektórzy również znacznik <table> próbują zastąpić przez zastosowanie <div> i CSS, ale dla mnie, póki co, jest to operacja zbędna i wręcz karkołomna. Natomiast stosowanie <table> do pozycjonowania elementów na stronie jest IMHO niedopuszczalne. O ile tolerowałem to jeszcze dwa, trzy lata temu, tak obecnie uważam to nie tyle za mało profesjonalne, co po prostu mało funkcjonalne. Przy dobrze zapisanej treści zmiana wyglądu strony za pomocą <div>+CSS to kwestia godzin. Przy przepisaniu strony opartej na <table>, oprócz zmiany CSS dochodzi jeszcze przepisanie treści i kodu html. Oczywiście skłamałbym, gdybym napisał że stosowanie układu elementów w <table> nie jest mało profesjonalne. Bo jest. Dlatego sam tego nie stosuję - choć akurat za PRO siebie nie uważam w żadnym wypadku. Uważam natomiast, że jak coś robić, to z głową, możliwie najlepiej jak to tylko możliwe i zgodnie z nowoczesnymi (nie mylić z najnowszymi) trendami.

Napisany przez: MBorowiec 10.11.2007 - 12:18

Oczywiście pracuję z i na warstwach ; )
Szybka modyfikacja wyglądu całej strony ... szybka zmiana wartości na wszystkich stronach ; )
xHTML 1.0 Strict i CSS to mój tandem ; )

Nie ganie za to ludzi że używają tabel, bo ... sam kiedyś używałem, chyba zresztą jak większość z nas, a przejście na dobrą stronę jest czasami bolesne i zabiera ogromnie dużo czasu ...

Napisany przez: Quinn 04.12.2007 - 08:02

Ale ja od pewnego czasu staram się opanować sposób <div> i idzie mi opornie. Czytałem kurs webhosting.pl o pozycjonowaniu elementów w CSS 2.1, ale i tak mam problem. ;]

Inna sprawa, że mam mało czasu na naukę tegoż.

Napisany przez: dAREuS 04.12.2007 - 10:59

CYTAT(Quinn @ wto, 04 gru 2007 - 09:02) *
Ale ja od pewnego czasu staram się opanować sposób <div> i idzie mi opornie. Czytałem kurs webhosting.pl o pozycjonowaniu elementów w CSS 2.1, ale i tak mam problem. ;]


Powiedz, w czym rzecz, może pomożemy wink.gif.

Napisany przez: Quinn 01.01.2008 - 17:57

Otóż wciąż mam problem jak ustawić kilka, powiedzmy, kategorii (bloków) strony koło siebie. W tabelkach, jak wiadomo wyglądało to tak:

KOD
<table>
<tr>
<td>tekst, img, etc. </td>
<td>tekst, img, etc. </td>
<td>tekst, img, etc. </td>
</tr>
</table>


Jak zdefiniować, by stronę podzielić identycznie w div'ach? dry.gif
Pozdrawiam.

PS. Podejrzewam, że jest to dziecinnie proste, ale nie potrafię tak czy siak zrozumieć co trzeba zdefiniować. smile.gif

Napisany przez: szuki 01.01.2008 - 21:43

CYTAT(Quinn @ wto, 01 sty 2008 - 17:57) *
Otóż wciąż mam problem jak ustawić kilka, powiedzmy, kategorii (bloków) strony koło siebie. W tabelkach, jak wiadomo wyglądało to tak:

KOD
<table>
<tr>
<td>tekst, img, etc. </td>
<td>tekst, img, etc. </td>
<td>tekst, img, etc. </td>
</tr>
</table>


Jak zdefiniować, by stronę podzielić identycznie w div'ach? dry.gif
Pozdrawiam.

PS. Podejrzewam, że jest to dziecinnie proste, ale nie potrafię tak czy siak zrozumieć co trzeba zdefiniować. smile.gif

html:
KOD
<div class="main">
<div>
lewy
</div>
<div>
środek
</div>
<div>
prawy
</div>
</div>

css:
KOD
.main div{
float:left; // right wtedy będa w odwrotnej kolejność
}

Jest wada tego main dla większości przeglądarek będzie miał wysokość mniejszą niż zawartość. Rozwiązauje się to zazywczaj przez
KOD
overflow:auto;
height: auto;

to jedna ma też swoją wadę(pasek przewijania momentami). Często się dodaje W takich sytuacjach
KOD
.main div:after{
display:block;
clean:both;
}

Jednak nie jest ":after" obsługiwany przez przeglądarki.

Napisany przez: Quinn 02.01.2008 - 15:00

Bardzo dziękuję za pomoc, prosto, szybko, zrozumiale.

Pozdrawiam. wink.gif

Napisany przez: shr 03.01.2008 - 16:02

Los chcial, ze w pierwszym poscie na forum poprawie admina... Coz, na pewno zrozumie, ze cel posta jest czysto edukacyjny, a jesli nie, to niniejszym chcialem sie z Wami przywitac i pozegnac ;-)

szuki napisal Ci na szybko co i jak i napisal to dobrze (z jedna literowka -- zamiast clean powinno byc clear), ale temat jest tak naprawde nieco bardziej skomplikowany w praktycznych zastosowaniach. Dobra wiadomosc jest taka, ze jesli opanujesz i zrozumiesz stworzenie trojkolumnowej strony, to dalej pojdzie juz z CSS z gorki!

Oto, co ja bym zmienil/dodal do powyzszej propozycji:

1. Clean: both; zmien na clear: both; -- literowka
2. Pewnie bedziesz musial skorzystac z wlasciwosci width, zeby ustalic jakies szerokosci dla tych kolumn. Wtedy musialbys tez nadac im oddzielne id -- pewnie wiesz jak to zrobic, jesli pracowales juz z CSS, a jesli nie, to smialo pytaj.
3. Ja nadalbym kolumnom jakas klase (atrybut class), np. "column". szuki uniknal choroby HTML-a zwanej classitis ;-) (to taki niby zart dla geekow, oczywiscie) poprzez uzycie selektora elementu potomnego. Nie jest to jednak wg mnie najlepsze rozwiazanie: jesli chcialbys w ktorejs kolumnie umiescic jeszcze jeden element div to on tez otrzyma wtedy wlasnosc float, poniewaz selektor ".main div" wybierze wszystkie elementy div znajdujace sie w elemencie o klasie .main -- nie tylko te bezposrednio w nim, ale rowniez polozone "glebiej". Moznaby tego uniknac uzywajac selektora elementu dziecka, czyli ".main > div", ale... IE6 go nie obsluguje. Dlatego ja bym byl za tym, zeby do kazdego div-a, ktory jest kolumna dopisac atrybut class="column", a potem w CSS zamiast ".main div" napisac ".column".
4. Tak w ogole to mamy tylko jeden element z glowna zawartoscia (main) na stronie, a wiec zamienilbym klase "main" na id "main", wtedy rzecz jasna w CSS trzeba zmienic wszystkie wystapienia ".main" na "#main". W HTML-u uzywamy klas, gdy wiele elementow moze miec ta sama klase, a dla wskazania unikalnych elementow uzywamy atrybutu id.
5. Ta metoda z wysokoscia elementu .main nie jest moim zdaniem najlepsza. Niestety nie zadziala w IE6 i starszych przegladarkach. Za to uzycie "overflow" w nowszych przegladarkach powinno sprawic, ze nie trzeba juz uzywac :after (ktore nie wiem czy by zadzialalo w postaci przytoczonej powyzej). Ja proponuje takie cos (pamietaj, ze zmienilismy klase main na id main, a wiec zamiast ".main" mamy "#main"):

CODE

#main {
overflow: hidden;
}


* html #main {
height: 1%; /* hack dla IE 6.0 i starszych */
}


Zadziala w IE6, IE7, Firefoksie, Operze i Safari i prawdopodobnie wielu innych przegladarkach. Jest tam maly hack dla IE6 -- szczerze mowiac to zamiast hacka (selektor * html) lepiej by bylo uzyc HTML-owych komentarzy warunkowych, ale to osobny temat i mysle, ze dla wiekszosci ludzi nie jest to az tak wazna kwestia.


Wiem, ze sporo ludzi zaczynajacych przygode z CSS lubi gotowy kod, wiec co mi tam... ;-) Macie tutaj prosty, ale dzialajacy (w roznych przegladarkach!) kod dla 3-kolumnowego layoutu strony ze stopka, z najszersza glowna kolumna. Szerokosc calej strony to 780 pikseli; przy okazji pokazuje tez jeden z (wielu) sposobow na wysrodkowanie zawartosci strony w CSS:

HTML:
CODE

<div id="main">
<div id="sidebar1">Kolumna pierwsza</div>
<div id="content">Kolumna druga - glowna zawartosc</div>
<div id="sidebar2">Kolumna trzecia</div>
</div>

<div id="footer">
<p>Stopka.</p>
</div>



CSS:

CODE

/* Wysrodkowanie glownej zawartosci */
html {
text-align: center; /* dla IE */
}

body {
margin: auto;
text-align: left; /* naprawiamy to, co dalismy IE powyzej */
width: 780px;
}

/* trzykolumnowy layout */
#main {
overflow: hidden;
}

* html #main {
height: 1%; /* dla IE 6.0 i starszych */
}

#content, #sidebar1, #sidebar2 {
float: left;
}

#content {
width: 420px;
padding: 0 20px;
}

#sidebar1, #sidebar2 {
width: 150px;
}


Polecam dac jakies nazwy dla bocznych kolumn (#sidebar1, #sidebar2). Wbrew pozorom najlepiej unikac nazw takich jak #left, #center i #right. Specjalnie nie podalem ich tu, mimo ze do tego przykladu by sie nadawaly. Czemu one sa zle? Ano temu, ze jesli -- tak jak napisal powyzej admin -- zmienicie float: left na float: right, to szlag trafi kolejnosc wyswietlania kolumn. W CSS mozecie z nimi zrobic wszystko -- byc moze w CSS3.0 bedziecie mogli je wyswietlic nawet do gory nogami ;-). Dlatego nie ma sensu pisac w HTMLu, ze cos jest "left", czy "red" -- to definiuje CSS. Chodzi przeciez o to, zebyscie mogli zmienic calkiem wyglad strony poprzez CSS i zebyscie nie musieli ruszac w ogole HTML-a!

Chcialbym tez jeszcze cos powiedziec:

"Robic strony na divach" -- popularne okreslenie. Kazdy wie, o co chodzi. Kazdy powinien jednak tez wiedziec, ze to tylko takie potoczne powiedzonko. Nigdy nie robcie strony uzywajac samych tagow <div>. Tak, CSS pozwoli wam zrobic z div-ow naglowki, jesli tylko napiszecie np. '<div class="naglowek1">' oraz w CSS ".naglowek1 { font-size: 2.0em; }". Ale naprawde nie o to chodzi. Kod HTML ma zaznaczyc zawartosc. Jesli cos jest waznym naglowkiem, dajcie mu tag <h1>. Mniej waznemu dajcie <h2>. Twierdzicie, ze czcionka w <h1> jest za duza? Hej! Macie CSS, zmniejszcie ja.

Wyszukiwarki (Google), czy syntezatory mowy (uzywane np. przez niewidomych) nie skapna sie, ze div z klasa "naglowek_najwazniejszy_na_mojej_super_stronie" to tak naprawde naglowek. Google nie zrozumie tego, co napisaliscie w atrybucie class. Zrozumie natomiast, ze jesli cos walneliscie w tag <h1>, to to musi byc jakis wazny naglowek -- tytul calej strony.



Nie wiem ilu osobom tutaj przyda sie to, co napisalem. Nie jest to ani wyczerpanie tematu, ani poradnik krok po kroku dla poczatkujacych. Dobrego, strukturalnego HTML-a oraz CSS musicie nauczyc sie sami i trzeba zwykle wylac przy okazji troche krwi, potu i lez ;-). Na szczescie im dalej w las, tym idzie (zwykle) latwiej. Ale nikt z nas nie jest geniuszem, ktory opanowalby HTML/CSS w godzine, czy jeden dzien. Chcecie tworzyc swietny kod, musicie troche nad tym popracowac -- obecnie wiekszosc stron ma naprawde slabiutki kod, mimo ze ich webmasterzy spedzili troche czasu przy komputerze.

Ale pomyslmy chwile: co to za super umiejetnosc, ktora mozna w 100% opanowac w pare godzin? CSS ma to do siebie, ze mozna go odkrywac i odkrywac. Osobiscie nie znam nikogo, kto rzeczywiscie znalby go chocby w 95%. Na szczescie odkrywac mozna go stopniowo, coraz bardziej ulepszajac swoje strony.

Bardzo fajnie, ze sie tym zajmujecie. Ja tez pisze tylko strony przy pomocy Standardow. Moze razem uda nam sie sprawic, ze za 5 lat wiekszosc stron bedzie napisana porzadnie i bezblednie...

Zycze milej i owocnej nauki (odkrywania!) zarowno poczatkujacym, jak i zaawansowanym, bo jesli ktos uwaza, ze tworzy juz doskonaly kod i zna wszystkie kruczki, to... musi sie jeszcze nauczyc, ze jest w bledzie ;-).

Pozdr

Napisany przez: dAREuS 03.01.2008 - 16:29

CYTAT(shr @ czw, 03 sty 2008 - 17:02) *
Los chcial, ze w pierwszym poscie na forum poprawie admina... Coz, na pewno zrozumie, ze cel posta jest czysto edukacyjny, a jesli nie, to niniejszym chcialem sie z Wami przywitac i pozegnac ;-)


Cześć shr, jeśli myślisz, że szuki jest bucem, to zapewniam Cię, że tak nie jest. A więc my też Cię witamy.

Napisany przez: shr 03.01.2008 - 16:40

Nie sadze zeby byl, ale nie moglem tego wykluczyc, wiec... ;-)

Tak naprawde po prostu nie chcialem wyjsc wlasnie na buca, ktory przyszedl i od razu sie madrzy i wytyka innym, ze nie robia czegos tak jak on (co nie znaczy, ze on robi to dobrze).

Akurat jesli chodzi o tworzenie stron www to nigdy nie wiadomo, z kim sie rozmawia -- poziom jest rozny od naprawde poczatkujacego, po bardzo zaawansowanych i doswiadczonych koderow. Na dodatek nawet ci ostatni robia bledy (to w koncu ludzie), a czasem nawet specjalnie podaja nie-do-konca-najlepsze rozwiazania. Na forum nie mozna przeciez pisac za kazdym razem o kazdej drobnostce, a tworzenie stron www to w ogole sztuka kompromisow.

Dlatego tez moim zdaniem w ocenie ludzi trzeba zachowac daleko posunieta ostroznosc i jeszcze dalej posuniety wzajemny szacunek.

Wracajac do wspomnianego layoutu, to ja sam pewnie bylbym to zrobil nieco inaczej, a ostatnio pewien bardzo dobry i szanowany projektant http://www.andyrutledge.com/bad-layout-conventions.php jako nieadekwatny w wiekszosci przypadkow.

A poza tym to juz widze, ze sam popelnilem byka w kodzie, nie domykajac znacznika bb-code -- z gory mowie, ze jesli jakis moderator cos takiego zauwazy, to oczywiscie bede bardzo wdzieczny za poprawe/zwrocenie uwagi. Pewnie sporo osob szuka tu oswiecenia jesli chodzi o CSS i fajnie by bylo zminimalizowac liczbe bugow w pisanym na szybko kodzie (nielatwe zadanie, ale nikt nie mowil, ze takie bedzie wink.gif)

Napisany przez: szuki 03.01.2008 - 21:15

@shr: w zasadzie ja twóją anegotę odebrałem, jako hm spób jak pokazać, że można lepiej a to nie jest oskarżaniem nikogo, że kiepsko zrobił poprostu zawsze można lepiej. Akurat podałem przykład który tylko miał uświadomić, jak to się robi więc szczerze twój post był bardzo ciekawy. Nawet jest tam jeden z błędów layoutowych webhostingu wymieniony, który powoli eliminuje jeśli chodzi o css/html... w portalu. Nistety trochę to potrawa aby to wyrównać...

Napisany przez: Quinn 04.01.2008 - 09:09

CYTAT(shr @ czw, 03 sty 2008 - 17:02) *
2. Pewnie bedziesz musial skorzystac z wlasciwosci width, zeby ustalic jakies szerokosci dla tych kolumn. Wtedy musialbys tez nadac im oddzielne id -- pewnie wiesz jak to zrobic, jesli pracowales juz z CSS, a jesli nie, to smialo pytaj.


Z CSS pracuje już jakiś czas, około pół roku. Podstawy nie są mi obce, aczkolwiek mnóstwo wartości definiowania czy to tekstu, czy elementów jest dla mnie kompletnie obcych, dlatego bardzo dziękuję za pomoc. wink.gif

Dzięki waszej polemice, tudzież dyskusji konstrukcja stron na zasadzie <div> zaczyna być jasna i zrozumiała. Bardzo dziękuję za pomoc i polecam się na przyszłość. smile.gif

Napisany przez: blake 28.01.2008 - 10:50

Witam, widze ze temat jest "swiezy" wiec mam mala prosbe, poniewaz probowalem przerobic (wg tych wlasnie uwag) swojego cmsa, poniewaz w IE wogole nie jest tak jak powinno byc, a w firefoksie nie ma zadnych problemow. Dlatego mam prosbe zeby mi ktos wytlumaczyl jeden kawalek (reszta jest prawie analogiczna wiec powinienem sobie poradzic) Kod html:

CODE
function menud($name)
{
echo"

<table border='0' class='forumline' cellspacing='0' width='460' cellpadding='0' ><tr>
<td class='panel1' width='460'>
".$name."
</td></tr>
<tr><td class='side-body' width='460'>
";
}

function menude()
{
echo'
</td></tr></table>
';
}


CSS:
CODE
.forumline {
border: 0px;
background-color: white;
}
.panel1 {
background: url(images/tlog.gif) top no-repeat;
margin:0px;
padding:7px 7px;
overflow:hidden;
font-weight:bold;
font-size:12px;
text-align: left;
color: #345387;
}
.side-body {
padding:2px 2px 1px 3px;
background:url(images/boxtlo.gif) repeat-x top;
border-top:1px solid #ffffff;
border-left:1px solid #d9dfe9;
border-bottom:1px solid #d9dfe9;
border-right:1px solid #d9dfe9;
overflow:hidden;
}


Z góry dziekuje za odpowiedz

Napisany przez: QASH 04.05.2008 - 14:31

Ja jeszcze stosuje tabele z prostego powodu... ucze sie dopiero css i jak to wszystko ladnie i zgrabnie poukladac za pomoca css i div. Jak na razie z roznym skutkiem wiec poki co do www jeszcze ciagle stosuje tabel ale mam nadzieje, ze to sie niedlugo juz zmieni.

Napisany przez: Daedric 14.10.2008 - 21:27

tylko na DIVach... XHTML + CSS smile.gif

Napisany przez: Rafał 15.04.2009 - 00:41

CYTAT(Quinn @ sob, 03 lis 2007 - 11:26) *
A ja właśnie tworzę stronę opartą tylko o XML, php, Javę i bardzooooo duuuuużo CSS. ;]
Unikam xHTML'a, jedynie używam w przypadku linków czy obrazków.


W jaki sposób tworzysz strony tylko na XMLu bez (x)HTMLa? <lol>
Bo jeżeli używasz XSLa do transformacji XMLa, to i tak musisz używać znaczników xHTMLowych...

Czy może jakiś skok cywilizacyjny przeoczyłem? Pokaż przykład kodu takiej strony...

Napisany przez: MitS 15.04.2009 - 07:32

Bezsensu jest pisać strony w oparciu o tabelki gdyż uczy to złego nawyku. Jeśli ktoś zaczyna przygodę z (x)HTML'em to polecam od razu nauczyć się pisać na div'ach bo to p[o pierwsze jest wygodniejsze a po drugie zgodne ze standardami.

Napisany przez: Mateusz_Chmiel 15.04.2009 - 12:23

divy to już podstawa. Każdy klient na początek rozmowy - o ile coś się orientuje w temacie - pyta na czym oparte, jak na tabelkach to najczęściej rezygnuje... Taka już panuje opinia, że tylko DIVy się nadają. "Skoro każdy ma divy, to i ja chce", dlatego będzie przybywać... tabelki tylko do wyników itd. ale na całą strone nie nadają się.

Napisany przez: moovspot 15.04.2009 - 15:13

według mnie zależy od klienta
najczęściej stosuje zasadę Onet-u i <table>

Czasami się przestawiam i zmieniam na divy xD

Napisany przez: Jan Koprowski 15.04.2009 - 19:47

Temat tworzenia layotów na Divach jest dobrze omówiony w artykule http://www.haxite.org/index.php3?site=artykul&nx1=artykul_view&id=541 świetne gotowe można znaleźć na http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Co do divów smile.gif ale podejście "layout na divach" jest często opacznie rozumiane a przez to śmieszy. Masa ludzi tworzy dziś stronki gdzie jest milion divów wkładając w nie dosłownie wszystko. Tworzy tym samym coś porównywalnie strasznego jak strona na tabelach. To zabawne iż starając stworzyć się coś lepszego tworzą coś równie złego tongue.gif Trzeba pamiętać iż wszystkie elementy dzielą się na inline i block elements i wszystkie je można z podziałem na te dwie podstawowe kategorie pozycjonować według reguł nimi rządzących smile.gif nie trzeba wkładać ich wcale w DIVy.

Osobiście staram się tworzyć witryny na DIVach chyba, że klient ma jakieś specjalne preferencje - na przykład bardzo zależy mu na zgodności z W3C i chce aby strona miała jednakową wysokość kolumn w IE 6 i innych. Oczywiście o ile się da uciekam się do hacków lub JS jednak jestem pod tym względem elastyczny.

Napisany przez: th3mon 07.06.2009 - 23:00

CYTAT(Jan Koprowski @ śro, 15 kwi 2009 - 22:47) *
Co do divów smile.gif ale podejście "layout na divach" jest często opacznie rozumiane a przez to śmieszy. Masa ludzi tworzy dziś stronki gdzie jest milion divów wkładając w nie dosłownie wszystko. Tworzy tym samym coś porównywalnie strasznego jak strona na tabelach. To zabawne iż starając stworzyć się coś lepszego tworzą coś równie złego tongue.gif Trzeba pamiętać iż wszystkie elementy dzielą się na inline i block elements i wszystkie je można z podziałem na te dwie podstawowe kategorie pozycjonować według reguł nimi rządzących smile.gif nie trzeba wkładać ich wcale w DIVy.


Temat, który poruszył Jan jest ładnie rozszerzony w artykule http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/.

To jest smutne, że wiele serwisów nadal projektuje się niezgodnie z założeniami twórców sieci WWW. Wystarczy sprawdzić popularne serwisy w http://validator.w3.org/.

Tabela w założeniach ma reprezentować dane tabelaryczne, a nie układ strony WWW.

Osobiście koduję strony za pomocą znaczników DIV. Jednak jest jedno "ale". Zauważcie, że sporo CMS'ów generuje kod oparty na tabelach (np. http://www.joomla.org/) i nijak nie da się uniknąć tabel... Czasem bywa tak, że chcąc zmieścić się w czasie człowiek sięga po nie te rozwiązania, co trzeba. Wtedy duma cierpi sad.gif .

Pozdrawiam tych, co kodują w XHTML 1.1 (mało nas jest, oj mało...)!

Napisany przez: fisher 07.06.2009 - 23:49

gdy zrobiłem moją pierwszą stronę na tabelkach, dostałem znacznie motywującą mnie falę krytyki od kumpla wink.gif
i od tamtej pory tylko tak robię layouty. Znacznik table został stworzony przede wszystkim do prezentacji danych tabelarycznych.

zgadzam się w całości z shr, css można cały czas poznawać, optymalizować i być coraz lepszym.

i nie powiem że wcale mi prościej na tabelkach, oczywiście można można "tworzyć stronki wklejając w nie milion divów", ale jeśli się dojdzie do pewnej wprawy, wystarczy ich już tylko kilka plus standardowe znaczniki h1 li p i można stworzyć na prawdę świetny layout nie używając nawet specjalnych haków na IE i setek znaczników tabelek tr td.

życzę powodzenia w dochodzeniu do bycia coraz lepszymi w te klocki wink.gif

Napisany przez: Tiritto 15.11.2009 - 13:58

Ja piszę już od dość dawna strony oparte o DIVach, jest w tym o wiele mniej kombinowania niż przy robieniu tabelek, i powiedziałbym że jest to najlepsza metoda na budowanie layout'u strony, gdyby nie jeden diabeł...
Internet Explorer
...jak dotychczas problemy z wyświetlaniem strony miałem jedynie w IE, lecz jeśli chodzi o inne przeglądarki które używałem, to nie mają one żadnych problemów z DIVami.

Napisany przez: Jacek Smolak 10.12.2009 - 10:48

Tabele są do danych tabelarycznych, koniec, kropka. Temat trochę dziwny, bo brzmi, jakby ktoś o tym nie wiedział wink.gif
Semantyka w strukturze DOM to: logiczne rozłożenie treści, elegancja, przejrzystość kodu i oczywiście SEO. No i trzeba to robić z głową. Często widzi się nadużywanie divów, w miejscach gdzie nie są naprawdę potrzebne, przykład:

HTML
<div class="temat">
<p>Temat</p>
</div>
<div class="tresc">
<p>Treść</p>
</div>


a powinno być np.:
HTML
<h2>Temat</h2>
<p>Treść</p>


Nadmiar div'ów też szkodzi wink.gif

Pozdrawiam!

Napisany przez: panna 11.12.2009 - 10:05

W ogóle świat byłby piękniejszy gdyby nie IE6 i IE7 (wersje ósmą jeszcze jakoś trawię). Każdego wieczora kładąc się spać modlę się by te koszmary następnego dnia nie istniały i aby nikt o nich nie pamiętał.

Ostatnio w łapki dostało mi się stroną tworzoną w okolicach 2000 roku... koszmar - tabela a w tabeli tabela a w tabeli tabela i tabela - ok. 500 linii kodu na szczęście sformatowanego i czytelnego (o ile można takie zagnieżdżanie czytelnym nazwać). Udało się całość szybko oczyścić i zamknąć w 50 liniach.

Pierwszą w życiu stronę stworzyłam przy użyciu tabel, potem już tylko na divach.

Samochód służy do jeżdżenia po drodze, a nie do orania pola.

Napisany przez: Tiritto 11.12.2009 - 15:02

Mnie w ogóle dziwi sam fakt tego, że ktoś w ogóle używa Internet Explorera do celów innych niż ściągnięcie z internetu DOBREJ przegląarki!

Napisany przez: Jacek Smolak 11.12.2009 - 15:55

Niektórzy są na nią skazani, ale to chyba nie temat o tym wink.gif

Pozdrawiam!

Napisany przez: MichaU 09.08.2010 - 15:00

Ja też raczkuję w temacie Divów i CSS, bo wcześniej robiłem na tabelach, ale uważam że tabelki powinny pójść w zapomnienie. Rozumiem, że są strony (jak Onet.pl), gdzie łamie się reguły i stereotypy tworzenia stron, ale jednak Divy dają więcej możliwości, a strony stają się szybsze i elastyczniejsze.

Precz z IE :)

Napisany przez: wujek_bogdan 09.08.2010 - 19:59

od pakowania wszystkiego w divy też się trzeba powoli odzwyczajać, div obecnie używany jest jako kontener na wszelakie treści. powoli trzeba zacząć korzystać z tagów html5 takich jak <footer>, <aside>, itd. na razie o ile mi wiadomo roboty google jeszcze nie zwracaja na to uwagi, ale jeśli zaczną, może mieć to spore znaczenie dla pozycjonowania. na szczęście nie musimy tutaj się obawiać o zgodność ze starymi przeglądarkami, ponieważ te elementy nie mają wpływu na wygląd strony, są to po prostu kontenery na treści odpowiedniego rodzaju np. boczne menu, czy stopka.

inne elementy html5 jak np. canvas to supełnie inna bajka.

a wracając do divów i tabelek, to wg mnie nie ma nic złego w używaniu tabelek, ale w używaniu do takiego celu, do jakiego zostały stworzone, czyli do prezentacji danych tabelarycznych. do tworzenia layoutów ... jeśli ktoś lubi, niech się męczy, gorzej jeśli trzeba po nim poprawiać wink.gif

Napisany przez: Tyr 09.09.2010 - 02:14

HTML 5 to jeszcze trochę. DIV'ów to kiedyś unikałem jak szalony, a dziś to głównie nawet myślę w DIV'ach tongue.gif

Napisany przez: GoON 13.09.2010 - 09:08

HTML5 staje się powoli 'modnym' standardem. Nie piszę tu o zaawansowanych nowościach typu canvas, czy nowe formularze, ale o 'nowej' semantyce. Przez kilka ostatnich miesięcy mam coraz więcej zleceń, gdzie mam odgórne polecenie, aby klasy i id były zgodne z nazewnictwem nowych tagów i zasadami HTML5, np.

KOD
<body>
<div id="header">
<img src="logo.png" alt="kapustarama.pl">
<div class="nav">
<ul><li><a href="home">Home</a></li><li><a href="site1">Site1</a></li><li><a href="site2">Site2</a></li></ul>
</div>
</div>
<div class="section">
<h1>Nagłówek1</h1>
<ul>
<li>
<div class="article">
<h2>Nagłówek2 wpisu3</h2><abbr class="time" title="2010-05-31T01:23:45+02:00">31.05.2010</abbr>
<p>Treść wpisu, bla bla bla...</p>
</div>
</li>
<li>
<div class="article">
<h2>Nagłówek2 wpisu2</h2><abbr class="time" title="2010-04-23T01:23:15+02:00">23.04.2010</abbr>
<p>Treść wpisu, bla bla bla...</p>
</div>
</li>
<li>
<div class="article">
<h2>Nagłówek2 wpisu1</h2><abbr class="time" title="2010-04-21T01:12:13+02:00">21.04.2010</abbr>
<p>Treść wpisu, bla bla bla...</p>
</div>
</li>
</ul>
</div>
<div id="aside">
Reklamy, odnośniki, duperele boczne, krótkie informacje, itp., itd...
</div>
<div id="footer">
<div class="nav">
<ul>
...
</ul>
</div>
<span>Copyright</span>
</div>
</body>

I oczywiście z uproszczonymi metadanymi i doctype. W przyszłości pozwoli to w szybki i prosty sposób przejść stronie na czysty html5, a nas uczy dobrych nawyków na przyszłość.
Dodam jeszcze, że w nieokreślonych projektach stosuję się właśnie do takiej budowy strony, jak opisałem wyżej. Być może tak będą wyglądały tworzone strony przez parę kolejnych miesięcy (może nawet i lat) zanim zadomowi się w przeglądarkach pełna obsługa html5 (piszę tu również o wyparciu starszych wersji przeglądarek które nie radzą sobie z nowymi tagami bez zastosowania wobec nich JSu) co z kolei może wpłynąć na czytanie kodu przez google, który w ten sposób będzie mógł łatwiej i szybciej odróżnić treść od nawigacji, czy treści w stopce bądź reklam, a to znacznie może wpłynąć na szybkość pojawiania się kolejnych podstron serwisów, aktualizowania poprzednich treści oraz samej pozycji przy wyszukiwaniu jej.

Napisany przez: Jacek Smolak 13.09.2010 - 16:36

CYTAT(wujek_bogdan @ 09.08.2010 - 20:59) *
na szczęście nie musimy tutaj się obawiać o zgodność ze starymi przeglądarkami, ponieważ te elementy nie mają wpływu na wygląd strony, są to po prostu kontenery na treści odpowiedniego rodzaju np. boczne menu, czy stopka.

Oj kolego, to spróbuj w IE wywołać jakiś element ze struktury DOM z HTML5. Należy utworzyć te elementy i dopiero można na nich działać.

Ja osobiście tworzę już w HTML5. Div'y nie dają jakiejkolwiek możliwości zastosowania semantyki (nazewnictwo klas jedynie?). Poratować się można stosując Microformats, ale też można śmiało do HTML5 dodać.

Zresztą w HTML5 można stosować np. wiele razy H1 (odpowiednio!) i nadal mieć poprawną walidację. Jak? Polecam draft HTML5 na W3C, wszystko ładnie opisane smile.gif

Polecam na przykład poczytać o:
* Metadata content
* Flow content
* Sectioning content
* Heading content
* Phrasing content
* Embedded content
* Interactive content

Można dowiedzieć się bardzo ciekawych rzeczy smile.gif HTML5 to naprawdę wyższa szkoła jazdy (w porównaniu do poprzedników oczywiście).

Pozdrawiam!

Napisany przez: GoON 14.09.2010 - 02:05

Oczywiście zgadzam się z kolegą wyżej jeśli chodzi wyższość semantyki html5 od jej braku przy nadawaniu samych klas i id divom. Pisałem oczywiście o projektach komercyjnych (jak pisałem, są to zlecenia) co wiąże się koniecznością wspierania pewnych przeglądarek i pilnowania, żeby strona zbytnio się nie rozsypała przy wyłączonym js (mam tu na myśli ciągle obecnego na rynku ie7, bo na szczęście panuje teraz tendencja do wypierania ie6 przez samych klientów - tych polskich, bo za granicą ie6 nadal ma spory udział w rynku choć już powoli przygasa).

Tak z innej beczki: czy ktoś może mi powiedzieć jak wygląda teraz sprawa z mobilną siecią? Czy wml nadal jest stosowany, czy został całkowicie już wyarty przez xhtml mp, a może xhtml basic wiedzie prym?

Napisany przez: Jacek Smolak 14.09.2010 - 07:49

To ja jeszcze tylko odnośnie HTML5 i IE 6/7 - da się smile.gif I wygląda tak samo. Udaje mi się czasami nawet bez dodatkowego CSS'a dla w/w przeglądarek:
1) https://code.google.com/p/ie7-js/
2) http://html5shiv.googlecode.com/svn/trunk/html5.js
i praca jest o niebo milsza wink.gif

Pozdrawiam!

Napisany przez: GoON 15.09.2010 - 00:41

No to teraz jestem w siódmym niebie smile.gif Mam właśnie zlecenie na pełny html5 + css3 i na dodatek layout z którym będzie trochę fantazji twórczej wink.gif
Wracając do tematu: podane przez ciebie (do: Jacek Smolak) biblioteki js nie do końca rozwiązują problem ponieważ:
- html5.js działa tylko na ie, więc nici z html5 w starych wersjach FF (nie wiem jak jest z innymi przeglądarkami)
- przy wyłączonym js nici z wszelkich pprawek

Na szczęście stare ff to niebywała rzadkość, a i wyłączony js zdarza się niezbyt często (co zresztą uniemożliwia korzystanie z wielu witryn).

ps. To jak to jest z tym mobilnym internetem? Ciekawi mnie kwestia ilu klientów chce jednocześnie xhtml i wml

Napisany przez: Jacek Smolak 17.09.2010 - 09:50

@GoON: sam sobie odpowiedziałeś na pytanie smile.gif Zrób sprawdzanie, czy jest JS uruchomione. Zwykły Kowalski będzie miał na bank uruchomione. Tylko Ci, co wiedzą o co chodzi, wyłączają JS i zrozumieją taki komunikat. A FF? Przecież ma automatyczną aktualizację smile.gif
Chcesz współtworzyć lepszy WWWW (World Wide Web World - takie moje określenie wymyślone na poczekaniu) - wymuszaj na użytkownikach aktualizacje softu smile.gif Będziesz też o krok przed konkurencją smile.gif

Pozdrawiam!

Napisany przez: GoON 17.09.2010 - 19:57

O HTML5 jedynie dyskutuję podając różne wersje wydarzeń (tych mniej i tych bardziej prawdopodobnych). O krok przed konkurencją? W tej chwili możliwe byłoby to jedynie poprzez uporządkowanie nowych tagów tak, aby zawsze używać ich semantycznie oraz mieć na to dobre wytłumaczenie. Obecnie każdy, kto chce się liczyć na rynku bierze się za H5 (C3 już dawno jest używany w mniejszym, bądź większym stopniu), a jeśli tego nie robi to strzela sobie po stopach równo. Jeszcze jest czas by się opamiętać bo nadal jest to nowość, o której klienci się dowiadują, trzeba jednak już teraz ich zachęcać to tej decyzji. JSy od googli dają tak wielkie możliwości, że głupio byłoby tego nie wykorzystać.

Napisany przez: intervojager 03.11.2010 - 06:33

Wczoraj opanowałem wreszcie pozycjonowanie obiektów na div-ach w stronie(tak mi się tylko wydawało), dzięki artykułowi na webhosting.pl(link znalazlem tu na forum) co nie co zrozumiałem, jeśli chodzi o proste projekty. Mam problemy z Adobe Drimvaiver-em. Trzeba zwrócić się o wsparcie do Adobe....