Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jak zamienic taka tabele na divy?
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
hmmm
11.09.2005, 15:45:46
witam,
z gory chcialbym zaznaczyc, ze deklaracje umyslnie zostaly przeze mnie pominiete, zeby zmiejszyc ilosc linii kodu, ale ustawiam xhtml transitional 1.0.

mam problem z zamiana tabelki na divy tak, aby wszystko dzialalo tak, jak wlasnie w tabelce.

kod tabelki:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. table {
  5.         border-collapse: collapse;
  6. }
  7. table td {
  8.         margin: 0;
  9.         padding: 0
  10. }
  11. </style>
  12. </head>
  13. <body>
  14.  
  15. <table border="0" cellspacing="0" cellpadding="0">
  16. <tr>
  17.         <td style="width: 500px; height: 100px; background-color: #c0c0c0">
  18.         gora1:lewa
  19.         </td>
  20.         <td style="width: 200px; background-color: #9a9a9a">
  21.         gora1:prawa
  22.         </td>
  23. </tr>
  24. <tr>
  25.         <td colspan="2" style="height: 30px; background-color: #909090"
  26.         gora2
  27.         </td>
  28. </tr>
  29. <tr>
  30.         <td style="height: 500px; background-color: #c0c0c0">
  31.         srodek1:lewa
  32.         </td>
  33.         <td rowspan="2" style="background-color: #9a9a9a">
  34.         srodek1:prawa
  35.         </td>
  36. </tr>
  37. <tr>
  38.         <td style="height: 30px; background-color: #909090">
  39.         dol1:lewa
  40.         </td>
  41. </tr>
  42. </table>
  43.  
  44. </body>
  45. </html>
[HTML] pobierz, plaintext
a to ponizej to jest jak na razie wszystko, co udalo mi sie osiagnac:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5.  
  6. <div style="margin: 0 auto; width: 700px">
  7.  
  8. <div style="float: left; width: 500px; background-color: #c0c0c0">
  9. gora1:lewa
  10. </div>
  11. <div style="float: right; width: 200px; background-color: #9a9a9a">
  12. gora1:prawa
  13. </div>
  14.  
  15. <div style="clear: both; width: 700px; background-color: #909090">
  16. gora2
  17. </div>
  18.  
  19. <div style="float: left; width: 500px; background-color: #c0c0c0">
  20. srodek1:lewa
  21. </div>
  22. <div style="float: right; width: 200px; background-color: #9a9a9a">
  23. srodek1:prawa
  24. </div>
  25.  
  26. <div style="float: left; width: 500px; background-color: #909090">
  27. dol1:lewa
  28. </div>
  29.  
  30. </div>
  31.  
  32. </body>
  33. </html>
[HTML] pobierz, plaintext
i mam kilka problemow/zastrzezen, z ktorymi nie moge sobie poradzic.
otoz jak widac calosc umiescilem w zewnetrznym divie, ktoremu nadalem szerokosc i wysrodkowalem. da sie to jakas ominac? nie chcialbym stosowac niepotrzebnych divow.
zarowno srodek1:lewa jak i dol1:lewa maja float: left, w wyniku czego sa obok siebie, ale ich blokowa pozycje wymusilem ustawiajac wszystkich elementom szerokosc. nie chodzi mi tylko o to, zeby dzialalo, ale zeby rowniez bylo poprawnie i optymalnie. jest to dobrze, czy mozna jakos zmienic?
no i najwiekszy jak dla mnie problem - srodek1:prawa. po nadaniu elementowi wysokosci 100% rozciaga mi sie na calym ekranie, a chcialbym, zeby konczylo sie zawsze z linia dolna dol1:lewa. przy czym nie ma miec ustalonej dlugosci, bo bedzie ona sie zmieniala w zaleznosci od ilosc tresci w srodek1:lewa.
bardzo prosze o pomoc, wskazowki ...
Zajec
26.09.2005, 12:10:18
Cytat(hmmm @ 2005-09-11 15:45:46)
otoz jak widac calosc umiescilem w zewnetrznym divie, ktoremu nadalem szerokosc i wysrodkowalem. da sie to jakas ominac?

nie chcialbym stosowac niepotrzebnych divow.
zarowno srodek1:lewa jak i dol1:lewa maja float: left, w wyniku czego sa obok siebie, ale ich blokowa pozycje wymusilem ustawiajac wszystkich elementom szerokosc. nie chodzi mi tylko o to, zeby dzialalo, ale zeby rowniez bylo poprawnie i optymalnie. jest to dobrze, czy mozna jakos zmienic?

no i najwiekszy jak dla mnie problem - srodek1:prawa. po nadaniu elementowi wysokosci 100% rozciaga mi sie na calym ekranie, a chcialbym, zeby konczylo sie zawsze z linia dolna dol1:lewa. przy czym nie ma miec ustalonej dlugosci, bo bedzie ona sie zmieniala w zaleznosci od ilosc tresci w srodek1:lewa.

Nałóź style dla body. Tylko z tego co pamiętam musisz zrobić to w arkuszu stylów, bo inaczej validatorowi się to nie spodoba.

Nie rozumiem do końca... ale może spróbuj nadać dol1:lewa clear: left;?

Było to poruszane kilkakrotnie i zazwyczaj odsyłano ludzi do gotowych szablonów, gdzie takie coś osiągnięto. Polecam zatem zapoznać się z budową takich i zastosowanie jej u siebie.
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.