Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML]Strona przy innej rozdzielczości wyrównuje do prawej
Duvel
post 31.03.2010, 19:50:01
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 25.03.2009

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
mortus
post 31.03.2010, 21:01:36
Post #2





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
thek
post 31.03.2010, 21:19:18
Post #3





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
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ć).


--------------------
Najpierw był manual... Jeśli tam nie zawarto słów mądrości to zapytaj wszechwiedzącego Google zadając mu własciwe pytania. A jeśli i on milczy to Twój problem nie istnieje :D
Go to the top of the page
+Quote Post
emtiej
post 31.03.2010, 22:07:08
Post #4





Grupa: Zarejestrowani
Postów: 207
Pomógł: 18
Dołączył: 12.04.2009
Skąd: Rypin

Ostrzeżenie: (0%)
-----

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)
Go to the top of the page
+Quote Post
Duvel
post 1.04.2010, 08:32:57
Post #5





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 25.03.2009

Ostrzeżenie: (0%)
-----

Tworzenie nowych kontenerów nie działa, najwyraźniej będę musiał tworzyć to od początku.
Szkoda.
Go to the top of the page
+Quote Post
thek
post 1.04.2010, 09:22:55
Post #6





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
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.


--------------------
Najpierw był manual... Jeśli tam nie zawarto słów mądrości to zapytaj wszechwiedzącego Google zadając mu własciwe pytania. A jeśli i on milczy to Twój problem nie istnieje :D
Go to the top of the page
+Quote Post
Duvel
post 1.04.2010, 11:40:39
Post #7





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 25.03.2009

Ostrzeżenie: (0%)
-----

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.

Ten post edytował Duvel 1.04.2010, 11:43:00
Go to the top of the page
+Quote Post
mortus
post 1.04.2010, 12:01:39
Post #8





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 13.06.2025 - 02:45
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn