Разъезжается фон у шаблона

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем annflower1, 02.11.2010.

  1. annflower1
    Offline

    annflower1 Недавно здесь

    Регистрация:
    28.08.2010
    Сообщения:
    29
    Симпатии:
    0
    Пол:
    Женский
    Добрый день. Возникла небольшая проблема с шаблоном:'(, точнее с фоном. В браузерах на весь экран и с широким и обычным монитором шаблон выглядит нормально. Но если у пользователей будет узкий монитор или браузер открыт не на весь экран, то начинает разъзжаться шаблон, фон body уезжает, а шапка и низ шаблона (как слои) стоят на месте

    [​IMG]

    Так же можно посмотреть в любом браузере, если механически окно сужать , шаблон разъезжается. Причина понятно в css. Кто может помочь что сделать с фоном чтобы он не разъезжался?.:(

    сайт http://devel.gamesrv.org/anabella/

    сss код

    Код (html):
    1. /* CSS Document */
    2.  
    3. #content60 {float:left;width:74%;overflow:hidden;}
    4. #content80 {float:left;width:74%;overflow:hidden;}
    5. #content100 {float:right;width:74%;overflow:hidden;}
    6.  
    7.  
    8. * {
    9. margin:0;
    10. padding:0;
    11. }
    12.  
    13. body {
    14. background: #223d4a url(../images/body_bg.jpg) repeat-y 50% 0;
    15. background-color: #CC9966;
    16.     font-family: Tahoma, Arial, Times New Roman;
    17.     font-size: 12px;
    18.     min-width: 1200px;
    19.     color: #2c3740;
    20.  
    21.  
    22. }
    23.  
    24. h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
    25. margin:0.5em 0;
    26. }
    27.  
    28. h1, h2, h3, h4, h4 {
    29.     padding-bottom: 5px;
    30.     margin: 14px 0;
    31.     font-family: Geneva, Arial, Helvetica, sans-serif, Times New Roman;
    32. }
    33.  
    34. h1 {font-size: 175%;}
    35. h2 {font-size: 150%;}
    36. h3 {font-size: 120%;}
    37. h4 {color:#fff; font-size: 50%;}
    38.  
    39.  
    40.  
    41. a:link, a:visited {
    42.     font-size: 12px;
    43.     color: #660000;
    44.     text-decoration: none;
    45.     font-family: Tahoma, Arial, Times New Roman;
    46. }
    47. a:hover {
    48.     color: #374149; text-decoration: underline;
    49. }
    50.  
    51. .contentheading, .contentheading.m4 {
    52.         background: url(../images/33.png) 0 0 no-repeat;
    53.     font-family: Georgia, Tahoma, Arial, Times New Roman;
    54.     font-size: 18px;
    55.         padding-left: 28px;
    56.     color: #990000;
    57.     height: 10px;
    58.         font-style:italic;
    59.     text-decoration: none;
    60.     font-weight: normal;
    61.  
    62. }
    63.  
    64. .contentheading a:link, .contentheading a:visited {
    65.  
    66.  
    67.  
    68. }
    69. .contentheading a:hover {
    70.  
    71. }
    72. .modifydate{
    73.     font-family: Tahoma, Arial, Times New Roman;
    74.     font-size: 10px;
    75.     color: #660000;
    76.     padding: 10px;
    77. }
    78.  
    79. .small{
    80.     font-family: Tahoma, Arial, Times New Roman;
    81.     font-size: 10px;
    82.     color: #660000;
    83. }
    84. .createdate{
    85.     font-family: Tahoma, Arial, Times New Roman;
    86.     font-size: 10px;
    87.     color: #660000;
    88. }
    89. .readon{
    90.     font-family: Tahoma, Arial, Times New Roman;
    91.     font-size: 12px;
    92.     font-weight: bold;
    93.     color: #660000;
    94.     height: 30px;
    95. }
    96. a.readon:link, a.readon:visited {
    97.     font-family: Tahoma, Arial, Times New Roman;
    98.     font-size: 12px;
    99.     color: #660000;
    100.     text-decoration: none;
    101.     padding: 5px 8px 3px 7px;
    102.     height: 30px;
    103.     width: 100px;
    104. }
    105.  
    106. a.readon:hover {
    107.     text-decoration: underline;
    108. }
    109. td.buttonheading {
    110.     width: 16px;
    111. }
    112.  
    113. .article_column {padding:10px}
    114. .article_row {padding:10px;}
    115.  
    116. li,dd {
    117. margin-left:1em;
    118. }
    119.  
    120. fieldset {
    121. padding:.5em;
    122. }
    123.  
    124. #wrap {
    125. width: 957px;
    126. text-align:left;
    127. margin:0 auto;
    128.  
    129. }
    130.  
    131. #header {
    132.  
    133. height: 100px;
    134. background: #CC3333 url(../images/logo.jpg) 0 0 no-repeat;
    135. position:relative;
    136. }
    137.  
    138. .header_bg {
    139. background: #2c3740 url(../images/header_bg.png) 0 0 repeat-x;
    140. }
    141.  
    142.  
    143. /*-------------------------------------------------------------- TOP MENU -----*/
    144. #top {
    145. background: url(../images/topmenu.gif) repeat-y 50% 0;
    146. font-weight: bold;
    147. border:0;
    148. margin:0 -60px;
    149. padding:0;
    150. width:1078px;
    151. height: 45px;
    152. }
    153.  
    154.  
    155. #top ul li a
    156. {
    157. padding: 3px 20px 0px 0px;
    158. text-align: left;
    159.  
    160. height: 22px;
    161. color: White;
    162. text-decoration: none;
    163. float: left;
    164. display: block;
    165. margin-top: 10px;
    166.     border-right-width: 1px;
    167.     border-right-style: solid;
    168.     border-right-color: #fff;
    169.  
    170. }
    171.  
    172. #top ul
    173. {
    174.     font-size: 14px;
    175.     color: #660000;
    176.     font-family: Tahoma, Arial, Times New Roman;
    177.     padding-right: 10px;
    178.     padding-left: 0px;
    179. }
    180.  
    181. #top ul li {
    182.  
    183. display: inline; }
    184.  
    185.  
    186. #top ul li a:hover
    187. {
    188. background-color: #660000;
    189. color: #fff;
    190. }
    191.  
    192. /*-------------------------------------------------------------- BREADCRUMBS -----*/
    193.  
    194. #breadcrumbs {
    195.  
    196. padding-right: 10px;
    197. float:right;
    198. text-align: right;
    199. width: 100%;
    200. overflow:hidden;
    201. height: 22px;
    202. color: #fff;
    203. }
    204.  
    205. .breadcrumbs { }
    206.  
    207. #breadcrumbs a {
    208. color: #fff;
    209. }
    210.  
    211. #content {
    212. float:left;
    213. width:60%;
    214. overflow:hidden;
    215.  
    216. }
    217.  
    218. .inside {
    219. padding:10px;
    220. }
    221.  
    222. #leftcol {
    223. float:left;
    224. width:24%;
    225. overflow:hidden;
    226. padding-left: 10px;
    227. }
    228.  
    229. #rightcol {
    230. float:left;
    231. width:20%;
    232. overflow:hidden;
    233. padding-left: 10px;
    234. }
    235.  
    236. #footer {
    237. background: url(../images/menuniz.gif) ;
    238. font:0.8em Tahoma, Arial, Times New Roman;
    239. color:#999;
    240. border:0;
    241. margin:0 -122px;
    242. padding:0;
    243. width:1200px;
    244. height: 80px;
    245. }
    246.  
    247. /*PDF & print buttons */
    248.  
    249. p.buttonheading {
    250.     text-align:right;
    251.    
    252. }
    253.  
    254. .buttonheading img
    255. {
    256.     border:0;
    257.     padding: 6px;
    258. }
    259.  
    260. p.buttonheading a:link,p.buttonheading a:visited
    261. {
    262.     border:solid 2px #fff;
    263.    
    264. }
    265.  
    266. .leading p.buttonheading a:link,.leading p.buttonheading a:visited
    267. {
    268.     border:solid 2px #EFDEEA;
    269.    
    270. }
    271.  
    272. p.buttonheading a:hover
    273. {
    274.     background:none !important;
    275.     color:#000 !important;
    276.    
    277. }
    278.  
    279. p.buttonheading a:active,p.buttonheading a:focus
    280. {
    281.     border:solid 2px;
    282.     color:#000;
    283.    
    284. }
    285.  
    286.  
    287.  
    288. #banner {
    289. padding: 5px;
    290. text-align:center;
    291. overflow:hidden;
    292. clear:both;
    293. }
    294.  
    295. #footer {
    296. text-align:center;
    297. clear:both;
    298. overflow: hidden;
    299. }
    300.  
    301. a {
    302. text-decoration:none;
    303. color: #1d5867;
    304. }
    305.  
    306. a:hover {text-decoration:underline;}
    307.  
    308. h1,.componentheading {font-size:1.7em;}
    309. h4 {font-size:1.3em;}
    310. h4 {font-size:1.2em;}
    311. h5 {font-size:1.1em;}
    312. h6 {font-size:1em;font-weight:700;}
    313.  
    314. ol  {list-style: decimal outside; }
    315.  
    316. ul {
    317.   margin: 0;
    318.   padding: 0;
    319.   list-style: none;
    320. }
    321.  
    322. li {
    323.   line-height: 17px;
    324.   text-indent: 18px;
    325.   padding-top: 0px;
    326.   background-image: url(../images/arrow-1.png) ;
    327.   background-repeat: no-repeat;
    328.   background-position: 0px 3px;
    329. }
    330.  
    331.  
    332. /*-------------------------------------------------------------- MODULE STYLING -----*/
    333.  
    334. #rightcol, #leftcol {
    335. padding-top: 10px;
    336. }
    337.  
    338. table.moduletable {
    339.     width: 182px;
    340.     margin-top: 10px;
    341.     margin-bottom: 10px;   
    342. }
    343.    
    344. .moduletable2 a:link, a:visited {color: #660000}
    345.  
    346.  
    347. .moduletable2 table.moduletable {
    348.     width: 100%;
    349.     margin-bottom: 5px;
    350. }
    351.  
    352. .moduletable2 table.moduletable th {
    353. background: none;
    354. padding: 5px;
    355.  
    356.     font-family: Tahoma, Arial, Times New Roman;
    357.     font-size: 12px;
    358.     color: #990000;
    359.     height: 12px;
    360.     text-transform: uppercase;
    361.     border-bottom-width: 1px;
    362.     border-bottom-style: solid;
    363.     border-bottom-color: #aec9d4;
    364.     text-align: left;
    365.     list-style: none;
    366. }
    367.  
    368.  
    369.  
    370. /*-----------------------------------------------Menu Styling*/
    371.  
    372.  
    373.  
    374. /* Menu Heading*/
    375. table.moduletable th, table.moduletable_menu th {
    376. padding: 10px;
    377.     font-family: Tahoma, Arial, Times New Roman;
    378.     font-size: 12px;
    379.     color: #000;
    380.     height: 12px;
    381.     text-transform: uppercase;
    382.     border-bottom-width: 0px;
    383.     border-bottom-style: solid;
    384.         border-bottom-color: #990000;
    385.     text-align: center;
    386.         font-weight: bold; 
    387. }
    388.  
    389.  
    390. }
    391. .moduletable_menu ul.menu li a span {
    392.     background : none;
    393. }
    394. .moduletable_menu ul.menu li a:hover, .moduletable_menu ul.menu li a:active, .moduletable_menu ul.menu li a:focus {
    395.     background-position : 0 -25px;
    396.     text-decoration : none;
    397.     color : #990000;
    398.     font-size : 12px;
    399.     text-align : left;
    400. }
    401. .moduletable_menu ul.menu li.active a {
    402.     background-position : 0 -25px;
    403.     text-decoration : none;
    404.     color : #990000;
    405.     font-size : 12px;
    406.         font-weight: bold;
    407.     text-align : left;
    408. }
    409. .moduletable_menu ul.menu li.active a span {
    410.     background : none;
    411. }
    412. .moduletable_menu ul.menu li li a span {
    413.     list-style : none;
    414.     background : none;
    415. }
    416. .moduletable_menu ul.menu li ul {
    417.     margin : 0;
    418.     padding : 0;
    419.     list-style : none;
    420. }
    421. .moduletable_menu ul.menu li li {
    422.     list-style : none;
    423.     background : none;
    424. }
    425. .moduletable_menu ul.menu li li a {
    426.     list-style : none;
    427.     background : none;
    428.     vertical-align : middle;
    429.     font-size : 12px;
    430.     color : #666;
    431.     text-align : left;
    432.     text-decoration : none;
    433.     height : 20px;
    434.     padding : 2px 10px 0 10px;
    435. }
    436. .moduletable_menu ul.menu li li a:hover, .moduletable_menu ul.menu li li a:active, .moduletable_menu ul.menu li li a:focus {
    437.     color : #CC0000;
    438.     list-style : none;
    439.     background : none;
    440.     text-decoration : none;
    441. }
    442. .moduletable_menu ul.menu li li.active a {
    443.     color : #666 !important;
    444.     list-style : none;
    445.     background : none;
    446.     text-decoration : none;
    447. }
    448. .moduletable_menu ul.menu li li a span {
    449.     list-style : none;
    450.     background : none;
    451. }
    452.  
    453. .pollstableborder td {
    454.     text-align: left;
    455. }
     
  2.  
  3. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    или ты сама нашла проблему или у меня и в Opera и в FF всё отображается корректно, без всяких... как у тебя на картинке показано
    640x480, 800x600, 1024x768 (ради прикола 320x200) на всех разрешениях попробовал поиграть окном браузера, всё стоит на месте как вкопаное
     
  4. annflower1
    Offline

    annflower1 Недавно здесь

    Регистрация:
    28.08.2010
    Сообщения:
    29
    Симпатии:
    0
    Пол:
    Женский
    Да, спасибо разобрались, помогли):[
     
  5. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    не вопрос!!!!
     

Поделиться этой страницей

Загрузка...