xhtml - div

[mors]

Jak już ktoś wspomniał w wątku, kopalnią doskonałych przykładów jest https://cssplay.co.uk/

Tak się akurat składa, że jestem na etapie przepisywania swoich stron z tabel na divy i wspomniana strona okazała się niezwykle pomocna.

Poniżej możesz porównać tą samą stronę wykonaną w "tablach" i "divach". Nowa wersja ma tylko jedną tabelką (czasami system banerowy generuje jeszcze jedną), żeby lepiej prezentowała się w przeglądarkach tekstowych takich jak links i lynx. Jak na razie przerobiłem tylko stronę głowną. Nie jest to cud świata, ale widać o co chodzi. Kod jest krótszy i bardziej czytelny.

na tabelach:

https://s24.pl/index.php

na divach:

https://poligon.s24.pl/index.php

[Tomahawk]

Kurde ja też jestem w trakcie przechodzenia z table na div.

Sszło mi całkiem nieźle ale jak zobaczyłem na IE to co zrobiłem na div to sie wk*******m.

Zrobic stronke na div i przystosowac ją tak aby wygladała tak samo w IE, Opera i FF jest arcytrudne.

Godzinami siedziałem nad kodem i przewaznie na FF i Opera było wszystko dobrze a ten Ie to taki szajs że wszysko chrzani.

jak ktoś ma prosta grafiki to może sobie z divami łatwiej poradzic. Ja nia mogłem i jak narazie to moja stronka jest nadal na tabelach.

Adres: www.akwar.net

[mkr]

Trzeba co kilka minut sprawdzać na IE przy tworzeniu w Opera. Często głupi border albo margin 1px potrafi całkowicie zmienić wygląd w IE Zacznij od stworzenia całkiem nowej strony nie poprawianiu poprzedniej. Zrob odpowiedni uklad i dopiero potem dopasuj tam grafikę z tabelkowej strony.

[yavaho]

Zrobic stronke na div i przystosowac ją tak aby wygladała tak samo w IE, Opera i FF jest arcytrudne.

Zgadza sie. Najtrudniejsze w tym jest dostosowanie do wszystkich przeglądarek i zrozunienie dlaczego kazda z nich inaczej interpretuje pewne style.

Gdy ktoś przerabia strone z table na div to powinien zrobić grafike i konstrukcje strony zupełnie od nowa bez podpatrywania jak to było na tabelkach, bo inaczej, to wydzie mu dalej to samo z tą różnicą że zastąpi wszystkie <td> na <div>

Grafika na divach powinna byc raczej układana warstwowo jedna na drugiej i w całości znajdywać się w stylach, ustawiona jako tło danego obiektu.

[MMP]

Tomahawk, a co niby trudnego jest w grafice ktora Ty zaprezentowałeś?

[Tomahawk]

Tomahawk, a co niby trudnego jest w grafice ktora Ty zaprezentowałeś?

Jest dużo elementów a im wiecej elemntów to tym więcej IE chrzani.

Zreszta ja już zwatpiłem ze zrobie sobie stronke tylko na divach. W mojej obecnej przerubce mam 2 tabelki ale i tak w inncy miejscach ato grafiki sie rozjeżdza to inne dropy.

Wszystko jest ok na FF tylko IE (szmelc) zawsze widzi inaczej.

A co do tego układu to ja chce miec taki układ więc jak moge od nowa go projektowac?

Zaprojektowac taki sam?

[Devourer]

Zaprojektowac taki sam?

Dokładniej, zaprojektować taki sam wygląd. Tymczasem patrz tutaj !!!

https://validator.w3.org/check?uri=http%3A%2F%2Fwww.akwar.net

[yavaho]

... więc jak moge od nowa go projektowac?

Dam taki przykład.

Zamiast takiego kodu (np dla menu po lewej):

<table>
<tr><td><img ramka lewa /></td><td><a>menu</a></td><td><img ramka prawa /></td></tr>
<tr><td><img ramka lewa /></td><td><a>menu</a></td><td><img ramka prawa /></td></tr>
<tr><td><img ramka lewa /></td><td><a>menu</a></td><td><img ramka prawa /></td></tr>
</table>

(w rzeczywistości ten kod powyżej jest pewnie z 5x dłuższy z przeróżnymi atrybutami od tabelek)

Trzeba zrobić coś takiego:

<div><ul>
<li><a>menu</a></li>
<li><a>menu</a></li>
<li><a>menu</a></li>
</ul></div>

(a jak ktoś dobrze opracuje style to można by nawet pominąć <div> lub <ul><li>

A wygląd strony sie nie zmieni. Tylko na pewno trzeba w tym celu zrobić od nowa lub pokroić grafike. Bo zastąpienie wszystkich <td> na <div> nie ma najmniejszego sensu.

[Tomahawk]

yavaho gdyby to było takie proste...

Np. mam:

<div>obrazek</div>

<div><ul>

<li><a>obrazek</a></li>

<li><a>menu</a></li>

<li><a>menu</a></li>

</ul></div>

I pomiedzy tymi obrazkami mam przerwę, a nie powinno jej być.

Poza tym to jeszcze nie jest wstretne, najgorsze jest ze stronka pod FF jest ok a pod IE się rozjeżdza jak tylko może....

Ale wcześniej czy później i tak dojde co jest nie teges i zrobie że będzie ok tylko poco Microsoft wypuszcza taki shit? feee...

Devourer

O kurde! Ten Validator to ładny czort. Dopierdziela sie do wszystkiego, nawet wielkość liter mu niepasuje.

P.S.

A grasz może w starcrafta? Bo nick masz taki..

[MMP]

I pomiedzy tymi obrazkami mam przerwę, a nie powinno jej być.

A o marginesach i pozycjonowaniu to słyszał?

[Gość w3master]

na poczatek na dziwne odstepy:

img {display:block;}

i skad tendencje do pchania wszystkiego w div?

tak jest jeszcze czytelniej:

<ul id="menu">
 <li><a href="#">lorem ipsum</a></li>
 <li><a href="#">dolor sit amet</a></li>
</ul>

cala ewolucja xhtml nie polega na mozliwie jak naczestszym stosowaniu div - takie tendencje do divits, o czym Zeldman wspominial juz 3 lata temu w pomaranczowej rewolucji - "projektowanie stron www".

a jesli juz xhtml to tylko z poprawnym naglowkiem mime:

<?php
$xhtml = false;
if (preg_match('/application\/xhtml\+xml(?![+a-z])(;q=(0\.\d{1,3}|[01]))?/i', $_SERVER['HTTP_ACCEPT'], $matches))
{
$xhtmlQ = isset($matches[2])?($matches[2]+0.2):1;
if (preg_match('/text\/html(;q=(0\d{1,3}|[01]))s?/i', $_SERVER['HTTP_ACCEPT'], $matches))
{
	$htmlQ = isset($matches[2]) ? $matches[2] : 1;
	$xhtml = ($xhtmlQ >= $htmlQ);
} else {
	$xhtml = true;
}
}
if ($xhtml) 
{
header('Content-Type: application/xhtml+xml; charset=utf-8');
} else {
header('Content-Type: text/html; charset=utf-8');
}
?>

[GEGE]

O kurde! Ten Validator to ładny czort. Dopierdziela sie do wszystkiego, nawet wielkość liter mu niepasuje.

Dla Validatora wielkosc liter nie ma znaczenia. Jesli masz blad w kodzie to to bardzo czesto pokazuje bledy takze w innych miejscach (mimo ze wszystko jest OK).

Jesli budujesz strone na div'ach, to bardzo wazne jest (tu takze ) ich pozycjonowanie - m.in. wykorzystujac float.

[yavaho]

Dla Validatora wielkosc liter nie ma znaczenia.

Ma duże znaczeczenie w przypdku XHTML

Ale zacznijmy od tege, że validator aby mógł sprawdzić poprawność kodu z jakimś standardem to trzeba mu najpierw podać w jakim standardzie strona została zrobiona. A w tym przypadku widze brak doctype.

[Liszu]

(a jak ktoś dobrze opracuje style to można by nawet pominąć <div> lub <ul><li>)

Jeśli dążymy do wyeliminowania z kodu wszystkiego co się tylko da to może i owszem, ale dla robotów wyszukiwarek oraz według Panów od standardów sieciowych lepiej jest linki w menu umieszczać jako elementy listy.

[Lexy]

Na stronie https://www.gajdaw.pl/html/uklad-div-css.html są omówione częste problemy z divami. Poza tym polecam zapoznanie się z https://www.fox.com.pl/articles/web/layout.php Przejście na divy po tej lekturze nie powinno sprawiać aż tylu problemów.

Co do menu to najlepiej opierać je tylko na liście. Div jest już tutaj zbędny, bo dla ul albo ol można nadać takie same style. Tak samo jest z topem. Nie trzeba dla niego dawać oddzielnego diva jeśli jest tam tekst w nagłówku h1 - dla niego nadajemy styl.