Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] tabela z div'ow
Forum PHP.pl > Forum > Przedszkole
krun
18.04.2006, 22:41:54
Witam.
Zrobilem w css tabele za pomoca div'ow, ale z trzech przegladarek (IE, Opera, Mozilla Firefox) poprawnie odczytuje tylko firefox. Ponizej wkjelam kod gdyby ktos byl chetny udzilic pomocy.
CSS:
Kod
div.cialo
{
    background-color:#F7F9F7;
    width:80%;
    height:100%;
    display:table;
    border: #000000 1px solid;
}

div.naglowek
{
    background-color:#CCCCFF;
    height:100px;
    width:100%;
    display: table-row;
    border: #000000 1px solid;
    text-align:center;
}

div.srodek
{
    display: table-row;
    height:80%;
    width:100%;
    text-align:left;
}

div.menu
{
    display:table-cell;
    height: 100%;
    width: 175px;
    text-align:left;
    vertical-align:top;
}

div.strona
{
    display: table-cell;
    height: 100%;
    vertical-align:middle;
    text-align:center;
    background-repeat:no-repeat;
    background-color:inherit;
    background-position:center;
    background-image:url(../Images/podklad.gif);
}

div.stopka
{
    dipslay: table-row;
    vertical-align:middle;
    height:20px;
    width:100%;
    text-align:center;
    font-size: smaller;
    border: #000000 1px solid;
}


[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta name="author" content="Krystian Kuczek" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">@import url("style.css");</style>
  7.  
  8. <body>
  9.  
  10. <!-- POCZATEK TABELI-->
  11. <div align="center" style="height:620; width:100%;">
  12. <div class="cialo">
  13. <div class="naglowek">
  14. Naglowek
  15. </div>
  16. <div class="srodek">
  17. <div style="display:table; width:100%; height:100%">
  18. <div style="display:table-row; width:100%; height:100%">
  19. <div class="menu">
  20. Menu
  21. Menu
  22. Menu
  23. Menu
  24. Menu
  25. Menu
  26. Menu
  27. Menu
  28. Menu
  29. Menu
  30. Menu
  31. Menu
  32. Menu
  33. Menu
  34. Menu
  35. Menu
  36. Menu
  37. Menu
  38. Menu
  39. </div>
  40. <div class="strona">
  41. Glówna
  42. Glówna
  43. Glówna
  44. Glówna
  45. Glówna
  46. Glówna
  47. Glówna
  48. Glówna
  49. Glówna
  50. Glówna
  51. Glówna
  52. Glówna
  53. Glówna
  54. Glówna
  55. Glówna
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="stopka">
  61. Stopka
  62. </div>
  63. </div>
  64. </div>
  65. <!-- KONIEC TABELI -->
[HTML] pobierz, plaintext

Strona do podpatrzenia: http://www.krychan.webpark.pl

Z gory dziekuje za pomoc,
Krun
bigZbig
19.04.2006, 06:42:43
Sprobuj dodac float: left; do div.menu
revyag
19.04.2006, 11:26:29
A jaki jest sens tego questionmark.gif Rozumiem, że chcesz wyeliminowac tabele z procesu tworzenia strony,ale bez przesady. Jeśli dane są prezentowane w sposób tabelaryczny to łatwiej jest użyć tabel.
bim2
19.04.2006, 16:26:02
A znasz pojecie xhtml? Wszystkie przegladarki zinterpretuja to tak samo, a zdaza sie ze na tabelach nie. snitch.gif
devnul
19.04.2006, 16:43:39
Cytat
A znasz pojecie xhtml? Wszystkie przegladarki zinterpretuja to tak samo, a zdaza sie ze na tabelach nie.


żeby tak wszystkie przeglądarki interpretowały wszystko (nawet tylko w XHTML) tak samo to byśmy żyli w cudownym świecie, a tak jest mnóstwo roboty. Otóż nie wszystkei przeglądarki interpretują tak samo taki sam kod wystarczy zobaczyć jak to robi IE a ja FF i widać drastyczną różnice
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.