Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][PHP] rozmieszzczanie elementów
Forum PHP.pl > Forum > Przedszkole
azbest22
Witam. mam problem z rozmieszczaniem elementów przy pomocy
  1. position:absolute;
  2. top: 50px;
  3. left: 50px;

a mianowicie jeżeli wszystkie elementy są w jednym pliku wszystko gra, ale jeżeli użyje include i dodam paczke div-ów wewnątrz innego to już pozycjonuje mi względem krawędzi ekranu i nie elementu nadrzędnego. kod wysłany do przeglądarki wygląda schludnie więc nie mam pojęcia w czym rzecz.
kod widziany przez pokaż źródło wygląda tak
  1. <div id='glowna'>
  2. <div id='menu1'>
  3. <div id='guzik_strona_glowna'><a href='index.php?link=strona_glowna'><img src='image/strona_glowna.png'></a></div>
  4. <div id='guzik_forum_glowna'><a href='index.php?link=forum_glowna'><img src='image/forum_glowna.png'></a></div>
  5. <div id='guzik_login_glowna'><a href='index.php?link=login_glowna'><img src='image/login_glowna.png'></a></div>
  6. <div id='guzik_register_glowna'><a href='index.php?link=register_glowna'><img src='image/register_glowna.png'></a></div>
  7. <div id='guzik_przypomnij_glowna'><a href='index.php?link=przypomnij_glowna'><img src='image/przypomnij_glowna.png'></a></div>
  8. <div id='obrazek_maly_glowna'><img src='image/obrazek_maly_glowna.png'></div>
  9. </div>
  10. <div id='menu1cd'>
  11. <div id='test'></div>
  12. </div>
  13. </div>

wszystkie id zaczynające się od guzik są ustawiane względem menu1 a test względem menu1cd, natomiast menu1 i menu1cd ustawia się względem krawędzi ekranu a nie glowna.
div menu1 i menu1cd wraz ze swoją zawartością są w jednym pliku i jako cała paczka includowane do wnętrza div-a glowna
kod z divem nadrzędnym
  1. echo"<div id='glowna'>";
  2. if (!empty($_SESSION['id_usera']))
  3. {
  4. include"gra.php";
  5. }
  6. else
  7. {
  8. include"logregpass.php";
  9. }
  10. echo"</div>";

a to zawartość logregpass.php
  1. echo"<div id='menu1'>";
  2. echo"<div id='guzik_strona_glowna'><a href='index.php?link=strona_glowna'><img src='image/strona_glowna.png'></a></div>";
  3. echo"<div id='guzik_forum_glowna'><a href='index.php?link=forum_glowna'><img src='image/forum_glowna.png'></a></div>";
  4. echo"<div id='guzik_login_glowna'><a href='index.php?link=login_glowna'><img src='image/login_glowna.png'></a></div>";
  5. echo"<div id='guzik_register_glowna'><a href='index.php?link=register_glowna'><img src='image/register_glowna.png'></a></div>";
  6. echo"<div id='guzik_przypomnij_glowna'><a href='index.php?link=przypomnij_glowna'><img src='image/przypomnij_glowna.png'></a></div>";
  7. echo"<div id='obrazek_maly_glowna'><img src='image/obrazek_maly_glowna.png'></div>";
  8. echo"</div>";
  9. echo"<div id='menu1cd'>";
  10. echo "<div id='test'></div>";
  11. echo"</div>";

wszystkie elementy są opisane w osobnym pliku css tak jak pisałem na początku posta co powinno je bez problemu umieścić wewnątrz nadrzędnego kontenera jednak nie chce to działać jeśli kontenet podrzędny jest includowany z innego pliku. może mi ktoś powiedzieć jak rozwiązać taki problem?


widzę że trefiłem na problem trudny do rozwiązania sad.gif pokombinuję w takim razie nad całkowitym rozdzieleniem wyglądu od kodu programu aczkolwiek wydaje mi się że trzeba będzie teraz poświęcić od groma czasu na ponowne rozpisanie aplikacji ;/
prowseed
Chaotycznie i źle opisałeś problem, chociaż rozlegle. Natomiast: nie dolaczyles w ogole stylow css, a to ich chyba dotyczy problem. Nie musisz wstawiac nie wiadomo ilu guzikow, wystarczy jeden dla przykladu albo testowa strona. Probowales position:relative; dla id="glowna" ? Wiecej nie pomoge, bo po prostu nie rozumiem co gdzie ucieka.

Jezeli wszystko jest budowane tak, jak czysty html, to nie ma prawa nie dzialac. Przegladarka nie moze wiedziec (bo niby jak), czy dane element zostal wygenerowany w php czy napisany na sucho w html. Zawsze dostaje wyrenderowany dokument html [tzn akurat w tym przypadku].
azbest22
css który ma to obrobić ale nie daje rady
  1. body
  2. {
  3. background-color: #4682B4;
  4. }
  5. #test
  6. {
  7. border: 0px;
  8. width: 100px;
  9. height: 100px;
  10. background-color: #4682B4;
  11. position:absolute;
  12. top: 50px;
  13. left: 50px;
  14. }
  15. #glowna
  16. {
  17. border: 2px solid;
  18. width: 1240px;
  19. height: 775px;
  20. background-color: #5F9EA0;
  21. margin-left: auto;
  22. margin-right: auto;
  23. }
  24. #menu1
  25. {
  26. border: 0px;
  27. width: 500px;
  28. height: 775px;
  29. background-color: #1F9EA0;
  30. position:absolute;
  31. top: 0px;
  32. left: 0px;
  33. }
  34. #menu1cd
  35. {
  36. border: 0px;
  37. width: 740px;
  38. height: 775px;
  39. background-color: #1F9EA0;
  40. position:absolute;
  41. top: 0px;
  42. left: 500px;
  43. }
  44. #guzik_strona_glowna
  45. {
  46. border: 0px;
  47. width: 500px;
  48. height: 50px;
  49. background-color: #1F9EA0;
  50. position:absolute;
  51. top: 0px;
  52. left: 0px;
  53. }
  54. #guzik_forum_glowna
  55. {
  56. border: 0px;
  57. width: 500px;
  58. height: 50px;
  59. background-color: #2F9EA0;
  60. position:absolute;
  61. top: 50px;
  62. left: 0px;
  63. }
  64. #guzik_login_glowna
  65. {
  66. border: 0px;
  67. width: 500px;
  68. height: 50px;
  69. background-color: #3F9EA0;
  70. position:absolute;
  71. top: 100px;
  72. left: 0px;
  73. }
  74. #guzik_register_glowna
  75. {
  76. border: 0px;
  77. width: 500px;
  78. height: 50px;
  79. background-color: #4F9EA0;
  80. position:absolute;
  81. top: 150px;
  82. left: 0px;
  83. }
  84. #guzik_przypomnij_glowna
  85. {
  86. border: 0px;
  87. width: 500px;
  88. height: 50px;
  89. background-color: #5F9EA0;
  90. position:absolute;
  91. top: 200px;
  92. left: 0px;
  93. }
  94. #obrazek_maly_glowna
  95. {
  96. border: 0px;
  97. width: 500px;
  98. height: 525px;
  99. background-color: #8F9EA0;
  100. position:absolute;
  101. top: 250px;
  102. left: 0px;
  103. }

a czy da się w css określić względem którego obiektu ma przesunięcie być czy zawsze robi to tylko względem nadrzędnego kontenera a przynajmniej się stara bo tutaj to nie wychodzi mu akurat
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.