Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Strona przy innej rozdzielczości wyrównuje do prawej
Forum PHP.pl > Forum > Przedszkole
Duvel
31.03.2010, 19:50:01
Witam.
Jestem raczkujący w sprawach CSS, i stąd mogą się tu pojawić głupie dla was pytania.
Liczę na wyrozumiałość, i proszę o pomoc w paru kwestiach.

Otóż, kod pisałem pod rozdzielczością 1600x1050, i na tej rozdzielczości wszystko wygląda ładnie, i tak jak trzeba.
Problem pojawia się przy zmianie rozdzielczości, całość zachowuje oryginalny układ elementów, jednak strona / całość / body wyrównuje do prawej strony ekranu, i to w takim stopniu, że potrzebny jest scroll, do przewinięcia strony.

Bez zbędnej paplaniny, strona jest stroną startową / główną, składającą się tylko z elementów i odnośników graficznych.
Może lepiej będzie jak zaprezentuje kod, a wy wskażecie mi błędy i naprowadzicie na odpowiedni trop, celem nie robienia takich błędów w przyszłości.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
  5. <title>Martwa Materia</title>
  6. <style type="text/css">
  7. body
  8. {
  9.    background-color: #000000;
  10.    color: #000000;
  11.    margin: auto;
  12.  
  13. }
  14.  
  15. a
  16. {
  17.    color: #000000;
  18. }
  19. a:visited
  20. {
  21.    color: #000000;
  22. }
  23. a:active
  24. {
  25.    color: #000000;
  26. }
  27.  
  28. DIV.home
  29. {
  30. position:absolute; 
  31. top:200px;
  32. left:350px;
  33. width:180px;
  34.  
  35. }
  36. DIV.blog
  37. {
  38. position:absolute; 
  39. top:305px;
  40. left:340px;
  41. width:180px;
  42.  
  43. }
  44. DIV.omnie
  45. {
  46. position:absolute; 
  47. top:405px;
  48. left:340px;
  49. width:180px;
  50. }
  51. DIV.top
  52. {
  53. position:absolute;
  54. top:0px;
  55. left:307px;
  56. width:500px;
  57. }
  58. DIV.center
  59. {
  60. position:absolute;
  61. top:94px;
  62. left:500px;
  63. width:500px;
  64. }
  65. DIV.bottom
  66. {
  67. position:absolute;
  68. top:700px;
  69. left:400px;
  70. width:500px;
  71. }
  72.  
  73. </style>
  74. </head>
  75. <body>
  76.  
  77. <div class="top">
  78. <img src="images/daszek.jpg" border="0" alt="">
  79. </div>
  80. <div class="center">
  81. <img src="images/index_04.jpg" border="0" alt="">
  82. </div>
  83.  
  84. <div class="home">
  85. <a href="home.html"><img src="images/index_03.jpg" border="0" alt=""></a>
  86. </div>
  87.  
  88. <div class="blog">
  89. <a href="blog.html"><img src="images/index_06.jpg" border="0" alt=""></a>
  90. </div>
  91.  
  92. <div class="omnie">
  93. <a href="omnie.html"><img src="images/index_08.png" border="0" alt=""></a>
  94. </div>
  95.  
  96. <div class="bottom">
  97. <img src="images/index_11.jpg" border="0" alt="">
  98. <img src="images/index_12.jpg" border="0" alt="">
  99. </div>
  100.  
  101.  
  102. </body>
  103. </html>
[HTML] pobierz, plaintext


Tak wiem, kod zapewne jest toporny, mało funkcjonalny, czy dziwny, ale tutaj pojawia się 'n00bostwo', siedzę w tym zaledwie parę dni.

Proszę o pomoc, jest to sprawa poniekąd pilna.
mortus
31.03.2010, 21:01:36
Strona zachowuje się tak jak powinna, wszystko masz pozycjonowane absolutnie, wszystko zawsze wyświetli się o wartość top od góry i wartość left od lewej. Trzeba wszystko zrobić od nowa i zastanowić się, czy pozycjonowanie absolutne to dobre rozwiązanie. Poszukaj u Wujka Google czegoś na temat modelu pudełkowego w html.
thek
31.03.2010, 21:19:18
Zrób to tak... Weż sobie stwórz kontener z ustawionym position:relative jedynie, a całość strony wrzuć do niego. Wtedy strona będzie się pozycjonowała absolutnie względem tego nadrzędnego kontenera, a ów kontener sobie ustawisz wedle własnych upodobań jak chcesz na stronie (choćby margin: 0 auto by centrować).
emtiej
31.03.2010, 22:07:08
stwórz nowy identyfikator, który obejmie wszystko od <body> do </body> nazwij go np. wyrownanie

[CSS] pobierz, plaintext 
  1. DIV#wyrownanie{
  2.   margin: 0 auto; 
  3.   width: SZEROKOSC_STRONY;
  4.   text-align: center;
  5. }
[CSS] pobierz, plaintext


Resztę rób jak chcesz, a ich szerokości ustawiaj w % (tylko przyciski w px)
Duvel
1.04.2010, 08:32:57
Tworzenie nowych kontenerów nie działa, najwyraźniej będę musiał tworzyć to od początku.
Szkoda.
thek
1.04.2010, 09:22:55
A zwróciłeś uwagę, na to co napisałem? Dałeś temu kontenerowi position:relative? Bez tego strona nadal będzie olewała pozycjonowanie. Position:absolute pozycjonuję według najbliższego przodka, który nie ma position:static (domyślne ustawienie elementów). A jeśli nie ma takiego to jedzie względem body.
Duvel
1.04.2010, 11:40:39
Ok, przepisałem kod od nowa, z użyciem boksów.
Wygląda to tak:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
  5. <title>Martwa Materia</title>
  6. <style type="text/css">
  7. body
  8. {
  9.    background-color: #000000;
  10.    color: #000000;
  11.    margin: 0;
  12.    padding: 0;
  13.  
  14. }
  15. .wrap 
  16. {
  17. position: relative;
  18. width: 1300px;
  19. margin: auto; 
  20. } 
  21. a
  22. {
  23.    color: #000000;
  24. }
  25. a:visited
  26. {
  27.    color: #000000;
  28. }
  29. a:active
  30. {
  31.    color: #000000;
  32. }
  33.  
  34. DIV.home
  35. {
  36. position: relative;
  37. margin-top: 23mm;
  38. margin-left: 30mm;
  39.  
  40. }
  41. DIV.blog
  42. {
  43. position: relative;
  44. margin-top: 5mm;
  45. margin-left: 30mm;
  46.  
  47. }
  48. DIV.omnie
  49. {
  50. position: relative;
  51. margin-top: 5mm;
  52. margin-left: 30mm;
  53. }
  54.  
  55. DIV.center
  56. {
  57. position: absolute;
  58. margin-top: -23mm;
  59. margin-left: 65mm;
  60. }
  61. DIV.bottom
  62. {
  63. position: absolute;
  64. margin-top: 75mm;
  65. margin-left: 40mm;
  66. }
  67.  
  68. </style>
  69. </head>
  70. <body>
  71. <div class="wrap">
  72. <div class="center">
  73. <img src="images/center.jpg" border="0" alt="">
  74. </div>
  75. <div class="menu">
  76. <div class="home">
  77. <a href="#"><img src="images/index_03.jpg" border="0" alt=""></a>
  78. </div>
  79.  
  80. <div class="blog">
  81. <a href="#"><img src="images/index_06.jpg" border="0" alt=""></a>
  82. </div>
  83.  
  84. <div class="omnie">
  85. <a href="#"><img src="images/index_08.png" border="0" alt=""></a>
  86. </div>
  87.  
  88. <div class="bottom">
  89. <img src="images/index_11.jpg" border="0" alt="">
  90. <img src="images/index_12.jpg" border="0" alt="">
  91. </div>
  92. </div>
  93.  
  94. </body>
  95. </html>
[HTML] pobierz, plaintext


Wszystko jest poprawnie, aż do rozdzielczości 1024x860, wtedy strona się scrooluje względem szerokości, jednak podejrzewam, że jest to spowodowane wielkością elementów strony.
W przyszłości to poprawie, bo teraz mi się nie chce winksmiley.jpg

Adres strony:
http://agamerz.pl/

Czy widzicie jakieś zastrzeżenia odnośnie kodu / całokształtu ?
Co warto poprawić ?

Pozdrawiam, i dziękuję za pomoc.

@Edit:
Zauważyłem błąd, ustawiłem klasę divu na menu, a takowego nie ma, zwykłe przeoczenie nie przeszkadzające w funkcjonowaniu kodu.
mortus
1.04.2010, 12:01:39
Pozycje elementów określa się za pomocą atrybutów: position (który występuje zawsze) oraz left, right, top, bottom (mogą być określone, ale nie wszystkie muszą). Ty zaś do pozycjonowania elementów używasz marginesów, wobec czego nie potrzebujesz nigdzie pisać position: relative;, czy position: absolute;. Tak na dobrą sprawę całość można zrobić dużo łatwiej (bez tylu div-ów). Za rozciąganie okna przeglądarki odpowiada width: 1300px;. Mimo wszystko całość jeszcze w tych czasach dopasowywałbym do szerokości 1024px (a z uwzględnieniem scroll-a pionowego we wszystkich przeglądarkach do 970px - bezpieczna wielkość). Nie jest to najlepszy kod, a w sumie to sprawdź, czy działa pod wszystkimi przeglądarkami. Pozdrawiam
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.