Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS] Wyśrodkowanie strony
PiotrN
post 21.06.2011, 11:59:12
Post #1





Grupa: Zarejestrowani
Postów: 73
Pomógł: 0
Dołączył: 8.05.2010

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


Za pomocą generatora zrobiłem sobie taki szablon. Jednak za pomocą css za nic nie mogę go wyśrodkować.
Ustawiam margin: 0 auto; wszystko biorę w <div id="wrapper"> i nic.
  1. *{
  2. padding:0;
  3. }
  4. div#wrapper {
  5. width: 894px;
  6. margin-left: auto;
  7. margin-right: auto;
  8. padding: 5px 5px 5px 5px;
  9. }
  10. #block_1
  11. {
  12. float: left;
  13. width: 2px;
  14. margin-left: 567px;
  15. background:url('/images/separator.gif') repeat center;
  16. }
  17. * html #block_1
  18. {
  19. display: inline;
  20. }
  21. #block_2
  22. {
  23. float: left;
  24. width: 567px;
  25. margin-left: -569px;
  26. background-color: gray;
  27. }
  28. #block_3
  29. {
  30. float: left;
  31. width: 305px;
  32. }
  33. /* Start Mac IE5 filter \*/
  34. #block_1, #block_2, #block_3
  35. {
  36. padding-bottom: 32767px !important;
  37. margin-bottom: -32767px !important;
  38. }
  39. @media all and (min-width: 0px) {
  40. #block_1, #block_2, #block_3
  41. {
  42. padding-bottom: 0 !important;
  43. margin-bottom: 0 !important;
  44. }
  45. #block_1:before, #block_2:before, #block_3:before
  46. {
  47. content: '[DO NOT LEAVE IT IS NOT REAL]';
  48. display: block;
  49. background: inherit;
  50. padding-top: 32767px !important;
  51. margin-bottom: -32767px !important;
  52. height: 0;
  53. }
  54. }
  55. /* End Mac IE5 filter */
  56. /* IE Win can be a bit out - you might need to adjust
  57. bottom value by -1px or as required */
  58. .verticalalign
  59. {
  60. position: absolute;
  61. bottom: 0;
  62. }
  63. #block_1 .verticalalign
  64. {
  65. width: 2px;
  66. }
  67. #block_2 .verticalalign
  68. {
  69. width: 567px;
  70. }
  71. #block_3 .verticalalign
  72. {
  73. width: 305px;
  74. }
  75. /* hack for Opera 7+ */
  76. @media all and (min-width: 0px){
  77. .verticalalign
  78. {
  79. width: 100% !important;
  80. }
  81. /* But Opera 9 does it right, so CSS3 hax to the max */
  82. div[id^="container"] #block_1 .verticalalign
  83. {
  84. width: 2px !important;
  85. }
  86. div[id^="container"] #block_2 .verticalalign
  87. {
  88. width: 567px !important;
  89. }
  90. div[id^="container"] #block_3 .verticalalign
  91. {
  92. width: 305px !important;
  93. }
  94. }
  95. /* hack for IEs of all persuasions before IE7 */
  96. * html .verticalalign
  97. {
  98. width: 100% !important;
  99. }
  100. .verticalalign p
  101. {
  102. position: absolute;
  103. bottom: 0;
  104. right: 0;
  105. margin: 0;
  106. padding: 0;
  107. background: #996666;
  108. }
  109. #container_extra
  110. {
  111. position: relative;
  112. }
  113. * html #container
  114. {
  115. position: relative;
  116. }
  117. #container
  118. {
  119. width: 874px;
  120. overflow: hidden; /* This hides the excess padding in non-IE browsers */
  121. }
  122. /* we need this for IE 5.01 - otherwise the columns vanish */
  123. * html #container_extra
  124. {
  125. float: right;
  126. width: 100%;
  127. }
  128. /* we need this for IE 5.01 - otherwise the wrapper does not expand to the
  129. necessary height (unless fixed, this problem becomes even more acute
  130. weirdness as the method is enhanced */
  131. #container
  132. {
  133. /* Normally a Holly-style hack height: 1% would suffice but that causes
  134. IE 5.01 to completely collapse the wrapper - instead we float it */
  135. float: right;
  136. /* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes
  137. (I saw it happen many moons ago) makes the width of wrapper too small
  138. the float: none with the comment is ignored by 5.01,
  139. 5.5 and above see it and carry on about their business
  140. It's probably fine to just remove it, but it's left here
  141. just in case that many moons ago problem rears its head again */
  142. float/**/: none;
  143. }
  144. /* easy clearing */
  145. #container:after
  146. {
  147. content: '[DO NOT LEAVE IT IS NOT REAL]';
  148. display: block;
  149. height: 0;
  150. clear: both;
  151. visibility: hidden;
  152. }
  153. #container
  154. {
  155. display: inline-block;
  156. }
  157. /*\*/
  158. #container
  159. {
  160. display: block;
  161. }
  162. /* end easy clearing */
  163. #footer
  164. {
  165. clear: both;
  166. }
  167. #header, #footer
  168. {
  169. width: 874px;
  170. }
  171. /* Safari needs this - otherwise the ghost overflow, though painted
  172. correctly obscures links and form elements that by rights should be above it.
  173. An unintended side-effect is that it cause such elements to vanish in IE 5.01
  174. and 5.5, hence the child selector hack */
  175. * > #footer, * > form, * > #notes, * > .output
  176. {
  177. position: relative;
  178. z-index: 1000;
  179. }


Ten post edytował PiotrN 21.06.2011, 12:48:19
Go to the top of the page
+Quote Post
mortus
post 21.06.2011, 12:48: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%)
-----


A gdzie ta strona? Najlepiej wrzuć gdzieś on-line.
Go to the top of the page
+Quote Post
PiotrN
post 21.06.2011, 12:56:47
Post #3





Grupa: Zarejestrowani
Postów: 73
Pomógł: 0
Dołączył: 8.05.2010

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


Mam ją u siebie na WampServerze, ale póki co to sam szablon (układ) - kod poniżej:
  1. <div id="wrapper">
  2. <div id="container_extra">
  3. <div id="container">
  4. <div id="block_1"><div class="verticalalign"></div></div>
  5. <div id="block_2"><div class="verticalalign"></div></div>
  6. <div id="block_3"><div class="verticalalign"></div></div>
  7. </div>
  8. </div>
  9. </div>


Ten post edytował PiotrN 21.06.2011, 12:58:41
Go to the top of the page
+Quote Post
dezerter_af
post 21.06.2011, 13:04:26
Post #4





Grupa: Zarejestrowani
Postów: 47
Pomógł: 0
Dołączył: 1.04.2011

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


Spróbuj z aling left i align right a później div clear both smile.gif

Nie wiem jak bardziej można pomóc. Wrzuć na jakiś darmowy serwer i szybko odopwiem na Twoje pytanie smile.gif
Go to the top of the page
+Quote Post
PiotrN
post 21.06.2011, 13:10:19
Post #5





Grupa: Zarejestrowani
Postów: 73
Pomógł: 0
Dołączył: 8.05.2010

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


Próbowałem i dalej nic. Po co mam to wrzucać jak to jest prosty i krótki kod. Jak go wgram u siebie to i tak nic nie zmienisz.
Go to the top of the page
+Quote Post
mortus
post 21.06.2011, 13:42:19
Post #6





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

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


U mnie działa i wyśrodkowuje w FF, Chrome i IE8.

A wpisałeś DOCTYPE?

Wrzucenie tego on-line będzie pomocne w znalezieniu i rozwiązaniu problemu. Dzięki kilku narzędziom w przeglądarkach można zaszaleć.

@dezerter_af A co ma wspólnego align-left/right: ...; z clear: both;? Te atrybuty są względem siebie niezależne.
Go to the top of the page
+Quote Post
PiotrN
post 21.06.2011, 14:10:46
Post #7





Grupa: Zarejestrowani
Postów: 73
Pomógł: 0
Dołączył: 8.05.2010

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


Sorry chłopaki, mój błąd. Z pośpiechu nie dodałem doctype, ale już to wcześniej zauważyłem, tak czy inaczej dzięki mortus.
Teraz mam problem z poziomym paskiem przewijania, który pojawił się na dole strony.
Go to the top of the page
+Quote Post
t_e_l
post 21.06.2011, 16:31:07
Post #8





Grupa: Zarejestrowani
Postów: 21
Pomógł: 5
Dołączył: 7.05.2011

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


Skoro pojawił się pasek przewijania to widocznie coś się nie mieści. Podaj cały kod html jaki tam nasmarowałeś to może się coś poradzi. Bo tak to można jedynie zgadywać.
Go to the top of the page
+Quote Post
dezerter_af
post 22.06.2011, 15:35:40
Post #9





Grupa: Zarejestrowani
Postów: 47
Pomógł: 0
Dołączył: 1.04.2011

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


@PiotrN
FireBug i mogę edytować strony biggrin.gif oczywiście tylko w lokalnym cache ale zawsze można wszystko sprawdzić + dostylować a później przenieść do arkusza.
Go to the top of the page
+Quote Post
by_ikar
post 22.06.2011, 21:24:31
Post #10





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

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


Dla wrappera ustawiasz:

Kod
#wrapper { margin:0 auto; }


a żeby w IE się nie fochowało, w body ustawiasz:

Kod
body { text-align: center; }


"trik" stary jak świat. Na tym tylko forum pisali to wiele wiele razy, jakbyś dobrze poszukał znalazłbyś.
Go to the top of the page
+Quote Post
kujawska
post 3.07.2011, 20:51:28
Post #11





Grupa: Zarejestrowani
Postów: 116
Pomógł: 2
Dołączył: 19.02.2008

Ostrzeżenie: (50%)
XXX--


Polecam także znane rozwiązanie:
  1. div#wraper {
  2. position:absolute;
  3. width:894px;
  4. left:50%;
  5. margin-left:-447px;
  6. }
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 Wersja Lo-Fi Aktualny czas: 2.05.2025 - 05:10