Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Rozmieszczenie div-ów
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Aztech
Mam problem z pozycjonowaniem div-ów, można zobaczyć to TUTAJ
Chodzi konkretnie o to, że sekcja o id="middle" nie chce sie znalezc w IE w srodku a powinna, eksperymentowalem juz z marin: 0px auto, ustawieniami left, z position i dalej nic, ktos ma jakiś pomysł?
Jesli komuś nie chce się zaglądać to tutaj podaje kod
HTML
  1. <div id="wrapper">
  2. <div id="menubar"></div>
  3. <div id="logotop"></div>
  4. <div id="logobottom"></div>
  5. <div id="inside">
  6. <div id="right"></div>
  7. <div id="left"></div>
  8. <div id="middle"></div>
  9. </div>
  10. <div id="footer"></div>
  11. </div>

CSS2
  1. /**************************************************************/
  2. /* ogólne ustawiania tlo, cala strona, obrazki oraz odnosniki */
  3. /**************************************************************/
  4.  
  5.  
  6. html {
  7. min-width: 760px;
  8. }
  9.  
  10. img {
  11. border: 0;
  12. }
  13.  
  14. body {
  15. margin: 0;
  16. padding: 0;
  17. border: 0;
  18. background: #FBBA25;
  19. text-decoration: none;
  20. color: #333;
  21. font: 14px "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Helvetica, Verdana, sans-serif;
  22. }
  23.  
  24. a {
  25. color: #6B967C;
  26. font-weight: normal;
  27. text-decoration: none;
  28. }
  29.  
  30. a:hover {
  31. color: #3B6B4D;
  32. border-bottom: 1px dashed #3B6B4D;
  33. }
  34.  
  35. /**************************************************************/
  36. /* SEKCJE */
  37. /**************************************************************/
  38.  
  39. #wrapper {
  40. margin: 0px auto;
  41. padding: 0px;
  42. width: 794px;
  43. }
  44.  
  45. #menubar {
  46. margin: 0px;
  47. padding: 0px;
  48. width: 794px;
  49. height: 42px;
  50. background-image: url(../graph/menubar.gif);
  51. }
  52.  
  53. #logotop {
  54. margin: 0px;
  55. padding: 0px;
  56. width: 794px;
  57. height: 107px;
  58. background-image: url(../graph/logo_middle.gif);
  59. }
  60.  
  61. #logobottom {
  62. margin: 0px;
  63. padding: 0px;
  64. width: 794px;
  65. height: 40px;
  66. background-image: url(../graph/logo_bottom.gif);
  67. }
  68.  
  69. #inside {
  70. margin: 0px;
  71. padding: 0px;
  72. height: 292px;
  73. width: 794px;
  74. }
  75.  
  76. #footer {
  77. margin: 0px;
  78. padding: 0px;
  79. width: 794px;
  80. height: 23px;
  81. background-image: url(../graph/footer.gif);
  82. }
  83.  
  84. #left {
  85. margin: 0px;
  86. padding: 0px;
  87. width: 242px;
  88. height: 292px;
  89. background-image: url(../graph/left.gif);
  90. position: relative;
  91. top: 0px;
  92. float: left;
  93. }
  94. #middle {
  95. margin: 0px;
  96. padding: 0px;
  97. width: 342px;
  98. height: 292px;
  99. background-image: url(../graph/middle.gif);
  100. left: 242px;
  101. top: 0px;
  102. position: relative;
  103. }
  104. #right {
  105. margin: 0px;
  106. padding: 0px;
  107. width: 212px;
  108. height: 292px;
  109. background-image: url(../graph/right.gif);
  110. top: 0px;
  111. position: relative;
  112. float: right;
  113. }
revyag
Nie wiem po te position relative, to zbędny kod, bo można się obejść bez tego.

Zrób tak: (mała optymalizacja) smile.gif
Kod
#left,#middle,#right {
    float:left;
    margin:0
    padding:0;
    height:292px;
}
#left {
    width: 242px;
    background-image: url(../graph/left.gif);  
}
#middle {
    width: 340px;
    background-image: url(../graph/middle.gif);  
}
#right {
    width: 212px;
    background-image: url(../graph/right.gif);     
}

  1. <div id="inside">
  2. <div id="left"></div>
  3. <div id="middle"></div>
  4. <div id="right"></div>
  5. </div>

Szerokość middle trzeba było zmniejszyć.
Aztech
Jakie to wszystko proste smile.gif a z matematyki z dodawania miałem 5 smile.gif. Dzieki, czasami potrzeba spojrzenia kogoś z boku, bo się człowiek tak zacuka i zapatrzy na co, że potem nic nie widzi
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.