Forum PHP.pl > [HTML] Jak zapisać to w blokach DIV z table

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML] Jak zapisać to w blokach DIV z table

Tom:-)

16.02.2010, 21:35:20

Parę lat temu kiedy jeszcze mama chodziła na wywiadówki tworzono strukturę strony za pomocą <table>. Od tamtego momentu minęło duuuużo czasu i się wiele pozmieniało.

Pytanie jest moje takie jak mam zapisać poniższy kod za pomocą bloków div? Mógł by mi ktoś to prze konwertować żeby zrozumiał filozofię div i nie tylko (...)

Kod

Wilk002

16.02.2010, 23:03:50

Nadziergałem to w chwilkę, można pewnie lepiej napisać ale to też dział

[HTML] pobierz, plaintext 
<div style="width: 800px; height: 800px; border-style: solid;">
 
<div style="width: 800px; height: 100px; border-bottom-style: solid; ">ddd</div>
<div style="height: 100px;">
	<div style="width: 400px; height: 100px; border-bottom-style: solid;border-right-style: solid;"></div>
	<div style="width: 400px; height: 100px; border-bottom-style: solid; margin-left: auto; position: relative; top: -102px"  ></div>
</div>
<div style="width: 800px; height: 500px; border-bottom-style: solid; "></div>
<div style="height: 100px;">
	<div style="width: 400px; height: 100px; "></div>
	<div style="width: 400px; height: 100px; border-left-style: solid; margin-left: auto; position: relative; top: -102px"  ></div>
</div>
</div>
[HTML] pobierz, plaintext

Divy są bardzo wygodne to obsłudze tu akurat style css dałem bezpośrednio w nich ale można to wydzielić w osobnych plikach wtedy wygląda to tak:

[HTML] pobierz, plaintext 
<div  class="1">ddd</div>
<div class="2" >
	<div class="3" ></div>
	<div class="4" ></div>
</div>
<div class="5""></div>
<div class="6" >
	<div class="7" ></div>
	<div class="8" ></div>
</div>
</div>
[HTML] pobierz, plaintext

Ogólnie wygląda to czytelnie i jest łatwe do modyfikacji bo zmieniasz tylko style. Divy mogą pływać po całym obszarze strony wystarczy dodać 2 linijki i zawartość diva zmienia położenie, przy strukturze <table jest to o wiele więcej zabawy.

Tom:-)

16.02.2010, 23:34:09

Ja widziałem to trochę inaczej, że tagi nie były zagnieżdżone i chyba chodziło tu o pozycjonowanie bo tak to ja wiem że można

Wilk002

17.02.2010, 07:29:07

Każdy tag nie musi być zagnieżdżone ale tak było mi łatwiej i szybciej pokazać jak to zrobić. Można to zrobić tylko za pomoca position: ... , wtedy rozkładasz gdzie i jak chcesz każdego diva.

Tom:-)

17.02.2010, 17:27:52

A możesz pokazać jak?

krzysztof_kf

17.02.2010, 17:41:43

Kod

i potem odwołanie do css

<div id="column">
<div id="column-left">
jakaś tam zawartość
</div>

<div id="column-center">
jakaś tam zawartość
</div>

<div id="column-right">
jakaś tam zawartość
</div>

altruista2

17.02.2010, 18:44:44

Pytanko: Czemu nie zostawisz tabelek? Co złego w tabelkach?

Poza tym mogłeś po prostu zamienić
<table> na <div style="display:table">
<tr> na <div style="display:table-row">
<td> na <div style="display:table-cell">

Tom:-)

17.02.2010, 18:51:09

Mnie chodzi o to jak to zapiać z position. A w tabelkach no to jest prosta odpowiedź czemu nie chcę

DiH

18.02.2010, 00:36:57

Google nie boli:
http://www.google.pl/search?hl=en&q=sz...mp;aq=f&oq=

Nie po to się odchodzi od tabelek, żeby je potem symulować ;D

Całkiem ładnie jest to opisane tutaj: http://www.kurshtml.boo.pl/css/staly_szablon,szablon.html.

Tom:-)

20.02.2010, 14:30:31

Ale ja chcę wiedzieć jak powyższy przykład zapisuje się semantycznie na <div>

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.