Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Wyśrodkowanie strony
Forum PHP.pl > Forum > Po stronie przeglądarki
PiotrN
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. }
mortus
A gdzie ta strona? Najlepiej wrzuć gdzieś on-line.
PiotrN
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>
dezerter_af
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
PiotrN
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.
mortus
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.
PiotrN
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.
t_e_l
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ć.
dezerter_af
@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.
by_ikar
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ś.
kujawska
Polecam także znane rozwiązanie:
  1. div#wraper {
  2. position:absolute;
  3. width:894px;
  4. left:50%;
  5. margin-left:-447px;
  6. }
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.