Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Stały rozmiar bez względu na rozdzielczość
Forum PHP.pl > Forum > Przedszkole
--maciek--
Witam,
mógłby ktoś przerobić ten kod w sposób taki, że bez względu na rozdzielczość monitora rozmiar byłby taki sam?
  1. #galeria{
  2. width: 100%;
  3. margin: -13px 0 0 -49px;
  4. color: #555;
  5. font: 12px Arial, Verdana;
  6.  
  7. }
  8.  
  9. #galeria ul li{
  10. display: inline;
  11.  
  12. }
  13.  
  14. #galeria img{
  15. border: 1px solid #bbb;
  16. padding: 1px;
  17. }
  18.  
  19. /* Ajax */
  20. .highslide-container div {
  21. font-family: Verdana, Helvetica;
  22. font-size: 10pt;
  23. }
  24. .highslide {
  25. outline: none;
  26. text-decoration: none;
  27. }
  28. .highslide img {
  29. border: 2px solid silver;
  30. }
  31. .highslide:hover img {
  32. border-color: gray;
  33. }
  34.  
  35. .highslide-active-anchor img, .highslide-active-anchor:hover img {
  36. border-color: black;
  37. }
  38. .highslide-image {
  39. border-width: 2px;
  40. border-style: solid;
  41. border-color: white;
  42. background: gray;
  43. }
  44. .highslide-wrapper, .rounded-white {
  45. background: white;
  46. }
  47. .highslide-image-blur {
  48. }
  49. .highslide-caption {
  50. display: none;
  51. border-top: none;
  52. font-size: 1em;
  53. padding: 5px;
  54. background: white;
  55. }
  56. .highslide-heading {
  57. display: none;
  58. font-weight: bold;
  59. margin-bottom: 0.4em;
  60. }
  61. .highslide-dimming {
  62. position: absolute;
  63. background: black;
  64. }
  65. .highslide-loading {
  66. display: block;
  67. color: black;
  68. font-size: 9px;
  69. font-weight: bold;
  70. text-transform: uppercase;
  71. text-decoration: none;
  72. padding: 3px;
  73. border: 1px solid white;
  74. background-color: white;
  75. padding-left: 22px;
  76. background-image: url(../javascript/images/loader.white.gif);
  77. background-repeat: no-repeat;
  78. background-position: 3px 1px;
  79. }
  80. a.highslide-credits,
  81. a.highslide-credits i {
  82. padding: 2px;
  83. color: silver;
  84. text-decoration: none;
  85. font-size: 10px;
  86. }
  87. a.highslide-credits:hover,
  88. a.highslide-credits:hover i {
  89. color: white;
  90. background-color: gray;
  91. }
  92.  
  93.  
  94. /* Controls. See <a href="http://www.google.com/search?q=css+sprites" target="_blank">http://www.google.com/search?q=css+sprites</a> */
  95. .highslide-controls {
  96. width: 195px;
  97. height: 40px;
  98. background: url(../javascript/images/controlbar-white.gif) 0 -90px no-repeat;
  99. margin-right: 15px;
  100. margin-bottom: 10px;
  101. margin-top: 20px;
  102. }
  103. .highslide-controls ul {
  104. position: relative;
  105. left: 15px;
  106. height: 40px;
  107. list-style: none;
  108. margin: 0;
  109. padding: 0;
  110. background: url(../javascript/images/controlbar-white.gif) right -90px no-repeat;
  111. }
  112. .highslide-controls li {
  113. float: left;
  114. padding: 5px 0;
  115. }
  116. .highslide-controls a {
  117. background-image: url(../javascript/images/controlbar-white.gif);
  118. display: block;
  119. float: left;
  120. height: 30px;
  121. width: 30px;
  122. outline: none;
  123. }
  124. .highslide-controls a.disabled {
  125. cursor: default;
  126. }
  127. .highslide-controls a span {
  128. /* hide the text for these graphic buttons */
  129. display: none;
  130. }
  131. .highslide-move a {
  132. cursor: move;
  133. }
  134.  
  135. /* The CSS sprites for the controlbar */
  136. .highslide-controls .highslide-previous a {
  137. background-position: 0 0;
  138. }
  139. .highslide-controls .highslide-previous a:hover {
  140. background-position: 0 -30px;
  141. }
  142. .highslide-controls .highslide-previous a.disabled {
  143. background-position: 0 -60px !important;
  144. }
  145. .highslide-controls .highslide-play a {
  146. background-position: -30px 0;
  147. }
  148. .highslide-controls .highslide-play a:hover {
  149. background-position: -30px -30px;
  150. }
  151. .highslide-controls .highslide-play a.disabled {
  152. background-position: -30px -60px !important;
  153. }
  154. .highslide-controls .highslide-pause a {
  155. background-position: -60px 0;
  156. }
  157. .highslide-controls .highslide-pause a:hover {
  158. background-position: -60px -30px;
  159. }
  160. .highslide-controls .highslide-next a {
  161. background-position: -90px 0;
  162. }
  163. .highslide-controls .highslide-next a:hover {
  164. background-position: -90px -30px;
  165. }
  166. .highslide-controls .highslide-next a.disabled {
  167. background-position: -90px -60px !important;
  168. }
  169. .highslide-controls .highslide-move a {
  170. background-position: -120px 0;
  171. }
  172. .highslide-controls .highslide-move a:hover {
  173. background-position: -120px -30px;
  174. }
  175. .highslide-controls .highslide-full-expand a {
  176. background-position: -150px 0;
  177. }
  178. .highslide-controls .highslide-full-expand a:hover {
  179. background-position: -150px -30px;
  180. }
  181. .highslide-controls .highslide-full-expand a.disabled {
  182. background-position: -150px -60px !important;
  183. }
  184. .highslide-controls .highslide-close a {
  185. background-position: -180px 0;
  186. }
  187. .highslide-controls .highslide-close a:hover {
  188. background-position: -180px -30px;
  189. }
  190.  



Z góry dziękuję! smile.gif
pietrov8
#galeria{
width: Twoja stała szerokość (no 960px)
margin: -13px 0 0 -49px;
color: #555;
font: 12px Arial, Verdana;

}
-maciek-
Nie o to mi chodzi.
Chodzi mi o to, aby efekt był taki sam jak w tym przypadku:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <!-- leave DTD out of DOCTYPE to put IE6 in quirks mode -->
  3. <head>
  4. <title>BG</title>
  5. <style type="text/css">
  6. body {
  7. /* for IE; otherwise, BG isn't fully stretched */
  8. margin: 0px;
  9. }
  10.  
  11. #bg {
  12. position: fixed;
  13. margin: 0px;
  14. border: 0px;
  15. padding: 0px;
  16. left: 0px;
  17. top: 0px;
  18. width: 100%;
  19. height: 100%;
  20. overflow: hidden;
  21. z-index: 0;
  22. }
  23.  
  24. #bg img {
  25. width: 100%;
  26. }
  27.  
  28.  
  29. #body {
  30. position: absolute;
  31. left: 0%;
  32. top: 0%;
  33. width: 98%;
  34. height:98%;
  35. padding: 1%;
  36. z-index: 10;
  37. }
  38.  
  39. li {
  40. margin-bottom: 2em;
  41. }
  42. <!--[if IE]>
  43. <style type="text/css">
  44. body {
  45. margin: 0px;
  46. overflow: hidden;
  47. }
  48.  
  49. #body {
  50. padding: 1em;
  51. width: 100%;
  52. height:100%;
  53. overflow: auto;
  54. }
  55. </style>
  56. <![endif]-->
  57. </head>
  58. <!-- img must be encased in div to keep proper image aspect ratio -->
  59. <div id="bg"><img src="a.jpg"></div>
  60. <div id="body">Put the page's content here.</div>
  61. </body>
  62. </html>
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.