Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: <div> pierwszy kontakt na poważnie
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
maciek_3000
29.08.2006, 09:06:09
Witam wszystkich!
Postanowiłem zmienić layout strony z tabelek na divy, w XHTML Strict.

Powiedzcie mi, czy dobrze kombinuję. Dotychczas strona była podzielona na kilka pasków, a w nich po ok. 7 komórek (ok. bo niektóre był ujednolicone).

Powiedzcie mi teraz, czy teraz każdy wiersz powiniennem umieścić w osobnym <div>ie, podając w stylach jego szerokość, a wewnątrz niego, każda komóra w osobnym <div>ie z podanymi w css długością i szerokością oraz dla każdej float: left, bo każda łączy się z poprzednią? Powinno to wyglądać mniej-więcej tak:

[XML] pobierz, plaintext 
  1. <div style="width: 700px">
  2.    <div style="float: left; width: 50px"></div>
  3.    <div style="float: left; width: 100px"></div>
  4.    <div style="float: left; width: 100px"></div>
  5.    <div style="float: left; width: 50px"></div>
  6.    <div style="float: left; width: 50px"></div>
  7.    <div style="float: left; width: 300px"></div>
  8.    <div style="float: left; width: 50px"></div>
  9. </div>
  10.  
  11. <div style="width: 700px">
  12.    <div style="float: left; width: 50px"></div>
  13.    <div style="float: left; width: 100px"></div>
  14.    <div style="float: left; width: 100px"></div>
  15.    <div style="float: left; width: 50px"></div>
  16.    <div style="float: left; width: 50px"></div>
  17.    <div style="float: left; width: 300px"></div>
  18.    <div style="float: left; width: 50px"></div>
  19. </div>
[XML] pobierz, plaintext


Czy to ma sens, tak powinno wyglądać mniej więcej? Oczywiście style zniknie na rzecz id. Podglądam różne strony, np. firefox.pl ale nie układa mi się to w logiczną całość, a kurs xhtml http://xhtml.b7.pl/index.html nie ma wartości dydaktycznych do tworzenia strony w standardzie xhtml.
Zajec
29.08.2006, 09:30:04
Nie, nie, nie smile.gif

Czy w każdym wierszu naprawdę masz 7 komórek i w każdej jakąś treść?

Sądzę, że równie dobrze możesz nie robić dodatkowy div'ów w divie głównym, tylko temu jednemu nadać style.

Łatwiej byłoby Ci pomóc, gdybys podał adres strony, którą chcesz przerobić.
maciek_3000
29.08.2006, 10:11:13
Strony nie ma w internecie, mogę dać źródło, mniej-więcej wygląda tak:

[XML] pobierz, plaintext 
  1. <body style="text-align: center"><br /><br />
  2.  
  3.  
  4. <table style="margin: 5px auto">
  5.       <tr>
  6.             <td style="height: 10px; width: 10px; background-image: url(border1.gif)"></td>
  7.             <td style="width: 140px; background-image: url(border2.gif)"></td>
  8.             <td style="width: 5px; background-image: url(border3.gif)"></td>
  9.             <td style="width: 400px; background-image: url(border4.gif)"></td>
  10.             <td style="width: 20px; background-image: url(border5.gif);></td>
  11.             <td style="width: 10px"></td>
  12.       </tr>
  13.  
  14.       <tr>
  15.             <td colspan="3" style="background-image: url(menu.gif); height: 17px"></td>
  16.             <td colspan="2" style="background-color: white; color: black"></td>
  17.       </tr>
  18.  
  19.       <tr>
  20.  
  21.             <td colspan="3" class="column" id="column">
  22.                         <img src="main_menu.gif" alt="</span>" /><br />
  23.                         <div>
  24.                                 Linki
  25.                         </div>
  26.                         <br />
  27.                         <img src="popular.gif" alt="" <<span style='color:blue'>br />
  28.                         <div>
  29.                                 Linki
  30.                         </div>
  31.  
  32.             </td>
  33.             <td colspan="2" style="background-color: white; ; vertical-align: top; padding-left: 6px; padding-right: 7px">
  34.  
  35.                   <table class="content>
  36.                         <tr>
  37.                               <td class="rog1"></td>
  38.                               <td class="edge1"></td>
  39.                               <td class="rog2"></td>
  40.  
  41.                         </tr>
  42.                         <tr id="title">
  43.                               <td class="edge2"></td>
  44.                               <td class="tresc">
  45.                                                 TRESC
  46.                               </td>
  47.                               <td class="edge3"></td>
  48.                         </tr>
  49.                         <tr>
  50.                               <td class="rog3"></td>
  51.                               <td class="edge4"></td>
  52.                               <td class="rog4"></td>
  53.                         </tr>
  54.  
  55.                   </table>
  56.  
  57.                   <div style="height: 20px"></div>
  58.  
  59.                   <table class="content>
  60.                         <tr>
  61.                               <td class="rog1"></td>
  62.                               <td class="edge1"></td>
  63.                               <td class="rog2"></td>
  64.  
  65.                         </tr>
  66.                         <tr id="title">
  67.                               <td class="edge2"></td>
  68.                               <td class="tresc">
  69.                                                 TRESC
  70.                               </td>
  71.                               <td class="edge3"></td>
  72.                         </tr>
  73.                         <tr>
  74.                               <td class="rog3"></td>
  75.                               <td class="edge4"></td>
  76.                               <td class="rog4"></td>
  77.                         </tr>
  78.  
  79.                   </table>
  80.  
  81.             </td>
  82.       </tr>
  83.  
  84.       <tr>
  85.             <td style="height: 10px; background-image: url(img/border_10.gif)"></td>
  86.             <td style="background-image: url(border_11.gif)"></td>
  87.             <td style="background-image: url(border_12.gif)"></td>
  88.             <td style="background-image: url(border_13.gif)"></td>
  89.             <td style="background-image: url(border_14.gif)"></td>
  90.       </tr>
  91.  
  92.  
  93. </table>
[XML] pobierz, plaintext


Czemu, aż 3-krotnie wypowiedziałeś nie?
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.