Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css][div] pozycjonowanie w płynnym szablonie, jak to zrobić?
Dominik137
post
Post #1





Grupa: Zarejestrowani
Postów: 23
Pomógł: 0
Dołączył: 24.05.2006

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


Witam, mam problem z ułożeniem elementów na stronie. Chce zrobić płynny szablon.
  1. body {
  2. margin:0px;
  3. background-color: #d9d9d5;
  4. }
  5. div.top {
  6. height:100px;
  7. overflow:hidden;
  8. background-image: url('images/gradient.gif');
  9. }
  10. div.logo {
  11. width:107px;
  12. height:100px;
  13. background-image: url('images/logo.gif');
  14. background-repeat:no-repeat;
  15. background-position:center;
  16. }
  17.  
  18. div.menu {
  19. float:left;
  20. width:107px;
  21. overflow: hidden;
  22. position: relative;
  23. }
  24. ul.tekst_menu {
  25. padding:5px;
  26. text-align:center;
  27. font-size:small;
  28. font-family:Georgia;
  29. color:green;
  30. }
  31. div.pages {
  32. position:relative;
  33. box-shadow: 0 0 10px 5px #6666ff;
  34. border-left:1px solid #6666ff;
  35. border-top:1px solid #6666ff;
  36. border-bottom:1px solid #6666ff;
  37. margin-left: 117px;
  38. padding:5px;
  39. height:100%;
  40. background-color:#f7f7f6;
  41.  
  42. }
  43. div.stopka {
  44. position:absolute;
  45. bottom:0px;
  46. clear:both;
  47. width:100%;
  48. height:30px;
  49. background-color: #d9d9d5;
  50. text-align:center;
  51. font-size:small;
  52. font-family:"Times New Roman", serif;
  53. color:#6666ff;
  54. padding:3;
  55. line-height:30px;
  56. }
  57.  
  58. a:link {
  59. color:grey;
  60. }
  61. a:visited {
  62. color:grey;
  63. }
  64. a:hover {
  65. color:green;
  66. font-size:medium;
  67. }
  68.  
  69. div.block {
  70. position:absolute;
  71. margin:5px;
  72. height:70%;
  73. top:0px;
  74. width:50%;
  75. border-width:1px;
  76. border-style:solid;
  77. background-color:#ededeb;
  78. border-top-color:#6666ff;
  79. border-left-color:#6666ff;
  80. border-right-color:#333366;
  81. border-bottom-color:#333366;
  82. }
  83.  
  84. div#otwarte {
  85. top:0px;
  86. left:0px;
  87. width: 49%;
  88. }
  89. div#szukane {
  90. top:0px;
  91. right:0px;
  92. width: 49%;
  93. }

  1. <div class="top">
  2. <div class="logo"></div>
  3. </div>
  4.  
  5. <div class="menu">
  6. <ul class="tekst_menu">
  7. <li><a href="#" onClick="zaladuj(\'home\'); return false">Home</a></li>
  8. </ul>
  9. </div>
  10.  
  11. <div class="pages">
  12. <div class="block" id="otwarte"></div>
  13. <div class="block" id="szukane"></div>
  14. </div>
  15.  
  16. <div class="stopka">
  17. ? 2011.
  18. </div>

Problem dotyczy elementów w ?pages?. Chciałbym, aby ?pages? miało wysokość do stopki, (która powinna być na samym dole) o raz by w ?pages? znajdowały się dwa divy o szerokości 50% względem ?pages? i o wysokości do końca ?pages?. Div ?pages? nie mogę usunąć, pozostałe warstwy muszą znajdować się w nim. Mam nadzieje, że wytłumaczyłem to w miarę zrozumiale?co robie źle?

Ten post edytował Dominik137 26.06.2011, 14:49:44
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 3)
Sephirus
post
Post #2





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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


Proponuje dla klasy "block" zrezygnować z ABSOLUTE a dać relative czy static i FLOAT na LEFT. Postawią się obok siebie z szerokością 50% "PAGES". Zaraz za nimi dałbym element typu

  1. <div style="clear: both"></div>


w celu skasowania FLOATów i zachowania odpowiedniej wysokości "pages" względem "block".

Co do tego by "block" miało zawsze wysokość równą "pages" nie zależnie od ich zawartości to coś się robiło z MARGIN i z OVERFLOW ale nie pamiętam - zaraz poszukam wink.gif

EDIT: Znalazłem wink.gif

Tu masz przykład:

  1. <div class="strona">
  2. <div class="lewy">...</div>
  3. <div class="prawy">...</div>
  4. </div>


i CSS:

  1. .strona {
  2. overflow:hidden;
  3. }
  4.  
  5. .lewy, .prawy {
  6. padding-bottom:10000px;
  7. margin-bottom:-10000px;
  8. float:left;
  9. width:50%;
  10. }


to taki tam trick wink.gif jak Cię to bardziej interesuje zajrzyj tutaj

Ten post edytował Sephirus 28.06.2011, 19:54:17


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post
Dominik137
post
Post #3





Grupa: Zarejestrowani
Postów: 23
Pomógł: 0
Dołączył: 24.05.2006

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


niby wydawało się dobrze z tą wysokością ale na IE 8 "pages" wychodzi po za stopkę i stronę trzeba przewijać do dołu. W firefoxie i chrome po prostu "pages" ucina ale strona mieści się w rozdzielczości ekranu.

Co do "block", to divy faktycznie się ustawiły koło siebie na połowę "pages" ale przy zmianie rozdzielczości ekranu, prawy div ucieka pod lewego div'a
Go to the top of the page
+Quote Post
Sephirus
post
Post #4





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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


Hmm bo to nie jest takie proste - Sam tego nie pamiętam ale robiłem coś takiego a raczej pomagałem koderowi w firmie i to zrobiliśmy - pamiętam że do równych wyskości kolumn bezwarunkowo potrzebny był ten trick z margin/padding reszty musisz wyszukać niestety.

Co do tego że jeden bloczek najeżdża na drugi to musisz je jakoś ograniczyć w prosty sposób. Musisz ustalić minimalną możliwą szerokość strony jaka Cię zadowala. Oba bloki wrzucasz w diva któremu dajesz min-width na tą wartość. Następnie musisz ustalić min-width dla obu bloków i powinno śmigać wink.gif


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 21.08.2025 - 22:59