Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Требуется правильная фиксация фона.

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Срочно нужна помощь!!!
Поиск в теме | Версия для печати
Алтенрион
Отправлено: 09 Октября, 2012 - 23:32:21
Post Id



Частый гость


Покинул форум
Сообщений всего: 180
Дата рег-ции: Сент. 2012  
Откуда: Москва, Россия


Помог: 0 раз(а)
Имеется фоновое изображение большой высоты, порядка 1080px и 960px ширины. Требуется зафиксировать его на фон главного блока, но так, чтобы не появлялось полосы прокрутки страницы, в случае если контент не растягивает высоту сайта на столько.

Какие методы можно использовать?

В данный момент изображение закреплено за блоком, который как бы оборачивает все блоки сайта, и прописаны стили:

CODE (html):
скопировать код в буфер обмена
  1.  
  2.  
  3. #total {
  4. width: 960px;
  5. height: 1080px;
  6. position: relative;
  7. margin: 0 auto ;
  8. background-image: url("img/bg_total2.png");
  9. background-attachment: scroll;
  10. background-repeat: no-repeat;
  11. }
  12.  
  13.  




Проблема в том что если уменьшить высоту блока, то изображение обрежется, если увеличить то бесполезный скроллинг появляется.

Скрол имеется и сейчас, но на малых мониторах это приводит к ужасному впечатлению от просмотра сайта.
 
 Top
IllusionMH
Отправлено: 10 Октября, 2012 - 00:15:39
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Алтенрион, а как фон для body?
CODE (CSS):
скопировать код в буфер обмена
  1. body {
  2.   background: transparent url(img/bg_total2.png) 50% 0 scroll no-repeat;
  3. }

либо объясните расположение блоков и куда и как поставить

(Отредактировано автором: 10 Октября, 2012 - 00:19:21)

 
 Top
Алтенрион
Отправлено: 10 Октября, 2012 - 00:41:53
Post Id



Частый гость


Покинул форум
Сообщений всего: 180
Дата рег-ции: Сент. 2012  
Откуда: Москва, Россия


Помог: 0 раз(а)
Цитата:
IllusionMH пишет:
Алтенрион, а как фон для body?
CODE (CSS):
скопировать код в буфер обмена
  1. body {
  2.   background: transparent url(img/bg_total2.png) 50% 0 scroll no-repeat;
  3. }

либо объясните расположение блоков и куда и как поставить




Вот мой код CSS:

CODE (css):
скопировать код в буфер обмена
  1.  
  2.  
  3.  
  4. * {
  5.     margin: 0;
  6.     padding: 0;
  7. }
  8. html {
  9.     height: 100%;
  10. }
  11. header, nav, section, article, aside, footer {
  12.     display: block;
  13.  
  14.  
  15.  
  16. }
  17. body {
  18. font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
  19. width:100%;
  20. height:100%;
  21. background: url('/n.gif') no-repeat;
  22. background-attachment: fixed;
  23. padding-top: 20px;
  24.  
  25. }
  26.  
  27.  
  28.  
  29.  
  30.  
  31. #foto{
  32. margin-left:-50px;
  33. margin-top:0px;
  34. }
  35.  
  36. #fotoleft{
  37. width:370px;
  38. float:left;
  39. border: solid black 0px;
  40.  
  41.  
  42. }
  43. #fotoright{
  44. width:370px;
  45. float:left;
  46. margin-right:-60px;
  47. border: solid black 0px;
  48.  
  49. }
  50.  
  51.  
  52. .niz{
  53. float:left;
  54. border: solid black 0px;
  55. width:630px;
  56. }
  57.  
  58.  
  59. .form_vopros{
  60. padding-top:0px;
  61. float:left;
  62. border:solid black 0px;
  63. margin-right:-15px;
  64. margin-left:0px;
  65. border: solid black 0px;
  66. margin-top:5px;
  67. }
  68.  
  69. .name_vopros{
  70.  
  71. margin-top:5px;
  72. float:left;
  73. margin-left:20px;
  74. border:solid black 0px;
  75. padding-left:1px;
  76. border: solid black 0px;
  77. }
  78.  
  79.  
  80.  
  81.  
  82.  
  83. .button1 {
  84. height:29px;
  85. padding-left: 3px;
  86. padding-right: 3px;
  87. float:right;
  88. }
  89.  
  90.  
  91. .button {
  92. height:29px;
  93. padding-left: 3px;
  94. padding-right: 3px;
  95. }
  96.  
  97. label{
  98. line-height:19px;
  99.  
  100. }
  101.  
  102. .forms{
  103. padding-top:3px;
  104. float:left;
  105. border:solid black 0px;
  106. margin-right:-15px;
  107. margin-left:20px;
  108.  
  109. }
  110.  
  111. .names{
  112. float:left;
  113. margin-right:-40px;
  114. border:solid black 0px;
  115. padding-left:1px;
  116. }
  117.  
  118.  
  119.  
  120.  
  121. h1 {
  122.  
  123.     font-size: 1.7em;
  124.  
  125.     color: #4d4d4d;
  126.     line-height: 10px;
  127.     margin: 7px 0px 0px 0px;
  128. }
  129.  
  130.  
  131. h2 {
  132.  
  133.     font-size: 1.4em;
  134.  
  135.     color: #585858;
  136.     line-height: 13px;
  137.  
  138. }
  139.  
  140.  
  141. h3 {
  142.     font-size: 1em;
  143.     color: #747474;
  144.         text-weight: normal;
  145.     line-height: 1px;
  146. }
  147.  
  148. a {
  149.     color: blue;
  150.     outline: none;
  151.     text-decoration: none;
  152. }
  153. a:hover {
  154.     text-decoration: none;
  155. }
  156. p {
  157.     margin: 10px 20px 0px 5px;
  158.     font-size: 1.1em;
  159.     text-indent: 0px;
  160.     line-height:17px;
  161.     color: #454545;
  162.         text-align: justify;
  163.  
  164.        
  165. }
  166.  
  167. .otstyp_p{
  168.  
  169. padding-left: 60px;
  170.  
  171. }
  172.  
  173.  
  174. img {
  175.     border: none;
  176. }
  177.  
  178. .leftimg {
  179. float:left;
  180. margin: 7px 9px 7px 0;
  181. }
  182.  
  183. .rightimg {
  184. float: right;
  185. margin: 7px 0 7px 7px;
  186. }
  187.  
  188. st {
  189. font-size:1.3em;
  190. font-weight:bold;
  191. }
  192.  
  193. .right_italic{
  194.  
  195. font-style:italic;
  196. text-align:right;
  197. font-size:1em;
  198. }
  199.  
  200.  
  201. ul {
  202.    list-style:none;
  203. }
  204.  
  205. li a {
  206.     color: rgba(43, 107, 148, 0.69);
  207.     font-size: 1.3em;
  208.     text-decoration:none;
  209.     padding: 7px 3px;
  210.     width:150px;
  211.     /*height:50px; */
  212.     display:block;
  213.  
  214.     font-weight: normal;
  215.     line-height:20px;
  216. }
  217.  
  218. li a:hover {
  219.     color: #a1cbec;
  220. }
  221.  
  222. #total {
  223. width: 960px;
  224. height: 900px;
  225. position: relative;
  226. margin: 0 auto ;
  227. background-image: url("img/bg_total2.png");
  228. background-attachment: scroll;
  229. background-repeat: no-repeat;
  230.  
  231. }
  232.  
  233.  
  234. #box{
  235. margin: 0 auto;
  236. width: 960px;
  237. position:relative;
  238.  
  239.  
  240.  
  241. }
  242. /*
  243. .back {
  244.     display:block;
  245.         position:absolute;
  246.         top:0;
  247.         left:0;
  248.     width:960px;
  249.     height:1108px;
  250.     z-index:-5;
  251.  
  252. }
  253.  
  254. */
  255.  
  256.  
  257.  
  258.  
  259. #menu{
  260.     /*padding-top: 90px;*/
  261.     z-index: 4;
  262. }
  263.  
  264. #menu2{
  265.     text-align: right;
  266.     z-index: 4;
  267. }
  268.  
  269.  
  270. #top{
  271.     width: 960px;
  272.     height: 70px;
  273.     margin: 0 auto;
  274.  
  275. }
  276.  
  277.  
  278. #top_left{
  279.     Width: 150px;
  280.     height: 55px;
  281.     float: left;
  282.     margin-top: 10px;
  283. }
  284.  
  285. #top_right{
  286.  
  287.     border: 0px solid black;
  288.     padding-left: 10px;
  289.     Width: 790px;
  290.     height: 70px;
  291.     float:right;
  292.  
  293.  
  294. }
  295.  
  296. #logo {
  297.     height:40px;
  298.     width: 190px;
  299.     float:right;
  300.     margin-top: -5px;
  301.     border: 0px solid black;
  302.     margin-right: 190px;
  303. }
  304.  
  305. #languages {
  306.     float: right;
  307.     height:40px;
  308.     width: 85px;
  309.     border: 0px solid black;
  310.     margin-top: -65px;
  311.     margin-right: 0px;
  312.  
  313.  
  314. }
  315.  
  316.  
  317. #socials {
  318.     float: right;
  319.     height:30px;
  320.     width: 100px;
  321.     border: 0px solid black;
  322.     margin-top: 50px;
  323.     margin-right: -30px;
  324.     text-align:right;
  325. }
  326.  
  327.  
  328. #socials a{
  329. text-decoration:none;
  330. }
  331.  
  332.  
  333. #center {
  334. width: 795px;
  335. height: 100%;
  336. float: left;
  337. margin: 0 auto;
  338. }
  339.  
  340.  
  341. #right {
  342. width: 156px;
  343. height: 700px;
  344. float: right;
  345. }
  346.  
  347. #left {
  348. border:0px solid black;
  349. padding-top: 20px;
  350. width: 150px;
  351. height: 700px;
  352. float: left;
  353. text-decoration: none;
  354. margin-left: 0px;
  355.  
  356.  
  357.  
  358. }
  359.  
  360. #center1 {
  361. width: 635px;
  362. height: 700px;
  363. float: right;
  364. padding-left: 0px;
  365. /*background-image:url(img/sechenov1.png);*/
  366. background-repeat: no-repeat;
  367. background-position: center;
  368. background-attachment: fixed;
  369. z-index:1;
  370. }
  371. /*
  372. #center1 ul{
  373. padding-left:5px;
  374. font-size:12px;
  375. font-family:Verdana, Arial, Helvetica, sans-serif;
  376. list-style-type:disc;
  377. margin-left:20px;
  378. list-style:none;
  379. }
  380. #center1 li{
  381. line-height:17px;
  382. background:url(img/3.png) no-repeat;
  383. padding-left:30px;
  384. padding-bottom:5px;
  385. padding-top:0px;
  386. font-style:italic;
  387. }
  388. */
  389.  
  390. #center2 {
  391. width: 635px;
  392. height: 100%;
  393. float: right;
  394. padding-left: 0px;
  395. margin-top:40px;
  396. border: solid black 1px;
  397. background-image:url(img/planshet_mid.png);
  398. background-repeat:repeat-y;
  399. background-position: center;
  400. background-attachment: fixed;
  401. z-index:1;
  402. }
  403.  
  404.  
  405.  
  406. #center1 h2, #center2 h2{
  407. padding-left:30px;
  408. font-size: 1.4em
  409. }
  410.  
  411.  
  412. #timeless_s, #future_scientist_s, #young_scientist_s, #scientists_s, #guests_s{
  413.  
  414. margin-left:0px;
  415. margin-right:0px;
  416. z-index:1;
  417. line-height:20px;
  418. text-align:left;
  419. float:left;
  420.  
  421.  
  422. }
  423.  
  424. #gggg{
  425. margin-top:247px;
  426. margin-left:0px;
  427. border:solid black 0px;
  428. margin-left:-162px;
  429. }
  430.  
  431.  
  432. #timeless_s p, #future_scientist_s p, #young_scientist_s p, #scientists_s p, #guests_s p{
  433. margin: 0 0 7px 0px;
  434. }
  435.  
  436.  
  437. #timeless_s h2, #future_scientist_s h2, #young_scientist_s h2, #scientists_s h2{
  438. font-size: 1.4em;
  439. padding-left:30px;
  440. }
  441.  
  442.  
  443.  
  444. #not_rec{
  445. color: rgba(22, 22, 22, 0.54);
  446. }
  447.  
  448.  
  449. #spisok{
  450. float:left;
  451.  
  452. border:solid black 0px;
  453. }
  454.  







Вот мой код php (если требуется, то могу привести код инклюдов, но там просто маленькие блоки которые по css стилям видно) :





CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. <? require("social.php");
  3. ?>
  4.  
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8.     <title></title>
  9.     <link rel="stylesheet" type="text/css" href="style.css" />
  10.     <link rel="stylesheet" type="text/css" href="menu.css" />
  11.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  12.    
  13. </head>
  14. <body>
  15.  
  16.  
  17. <div id="box">
  18.     <img  class="back"   src="img/bg_total2.png" alt="back">
  19.  
  20. <div id="total">
  21.  
  22.  
  23.  <?php
  24.     include("top.php");
  25. ?>
  26.  
  27.  
  28.     <div id="center">
  29.  
  30.  
  31.  <?php
  32.     include("left_menu.php");
  33. ?>
  34.  
  35.         <div id="center1">
  36.  
  37.         </br><br>
  38.  
  39.             <p><br>
  40.  
  41. <h2><center></center>Lorem ipsum dolor sit amet </h2>
  42.  
  43. <br>  
  44.  
  45.  
  46. <img src="img/BRing.png"  align="left" class="leftimg">
  47.                
  48. <br>
  49.             </p><p>
  50.  
  51. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  52. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  53. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  54. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  55. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  56. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  57. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  58. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  59. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  60. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  61. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  62. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  63.  
  64.  
  65. <br><br>
  66.            </p>
  67. <br><br>
  68.         </div>
  69.  
  70.     </div>
  71.  
  72.     <div id="right">
  73.  
  74.  
  75.  
  76. <?
  77.   include("right_menu.php");
  78. ?>
  79.        
  80.     </div>
  81.  
  82. </div>
  83. </div>
  84. </body>
  85. </html>
  86.  
  87.  
  88.  



Все проблемы не входящие в css были устранены. теперь проблемы только в правильной модификации css.

1) если убрать у body height:100%; то у страниц в которых есть скрол, появится отступ вправо на 2-5 пикселей.
2) применение фона к body не очень приемлимо, так как есть некоторые элементы которые как бы прячутся частично за него,

Суть в том, что этот фон выполнен как некая большая арка, и в осном касается правого , левого и верхнего блоков а в остальном он прозрачен. и находиться он должен не в самом 0 или -1... по z-index...

3) Если есть возможность, то вообще очень желательно сделать полную фиксацию сайта, от скролла, чтобы скролился только блок center1 и скролился под блок top.

Основная структура блоков приведена на изображении.
Прикреплено изображение (Нажмите для увеличения)
структура .jpg

Отредактировано модератором: Мелкий, 10 Октября, 2012 - 09:16:19
 
 Top
Алтенрион
Отправлено: 13 Октября, 2012 - 19:37:39
Post Id



Частый гость


Покинул форум
Сообщений всего: 180
Дата рег-ции: Сент. 2012  
Откуда: Москва, Россия


Помог: 0 раз(а)
Проблема решена ! Тему можно закрыть.
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB