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]   

> Описание: Сдвигается содержимое.
Поиск в теме | Версия для печати
Doox911
Отправлено: 06 Февраля, 2012 - 22:07:09
Post Id



Частый гость


Покинул форум
Сообщений всего: 166
Дата рег-ции: Сент. 2011  


Помог: 0 раз(а)
Всем доброго время суток! У меня очень интересная проблема)
В 100% отображается как и задумано. А если в хроме начать увеличивать (zoom+-) страницу или уменьшать то нижняя панель сползает вверх Не понял .Вопрос почему?
Потом справа меню, содержимое сползает вниз или див сжимается, тут тоже мне непонятно).
Вот прошу помощи у вас)
Вот коды:
CODE (html):
скопировать код в буфер обмена
  1. <!DOCTYPE html >
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  5.   <link href="style.css" rel="stylesheet" type="text/css" />
  6.   <meta name="keywords" content="" />
  7.   <meta http-equiv="keywords" content="" />
  8.   <meta name="description" content="" />
  9.   <meta http-equiv="description" content="" />
  10.   <title> Я хочу.. </title>
  11.  </head>
  12.  <body>
  13.   <div id="osnova">
  14.    <div id="verh">
  15.     <div id="levo_verh">
  16.     </div>
  17.    </div>
  18.    <div id="content">
  19.     <div id="pravo">
  20.      <div id="menu_a">
  21.       <a href="nforerror.html"><center>&nbsp;Главная</center></a>
  22.      </div>
  23.      <div id="menu">
  24.       <a href="nforerror.html"><center>&nbsp;&nbsp;Виды походов</center></a>      <a href="nforerror.html"><center>&nbsp;&nbsp;Контакты</center></a><br />
  25.       <a href="nforerror.html"><center>&nbsp;&nbsp;Важно знать</center></a><br />  
  26.       <a href="nforerror.html"><center>&nbsp;Сотрудничество</center></a>        
  27.      </div>
  28.      <div id="menu">
  29.       <a href="nforerror.html"><center>&nbsp;&nbsp;О нас</center></a><br />
  30.       <a href="nforerror.html"><center>&nbsp;&nbsp;Фото отчёт</center></a>      <a href="nforerror.html"><center>&nbsp;Прокат</center></a>      <a href="nforerror.html"><center>&nbsp;&nbsp;Календарь</center></a>
  31.      </div>
  32.      <div id="menu_b">
  33.       <a href="nforerror.html"><center>&nbsp;Орг. встречи</center></a>
  34.      </div>      
  35.     </div>  
  36.    </div>
  37.    <div id="niz">
  38.     <center>
  39.      <a href="nforerror.html">Главная</a>&nbsp;|
  40.      <a href="nforerror.html">О нас</a>&nbsp;|
  41.      <a href="nforerror.html">Виды походов</a>&nbsp;|
  42.      <a href="nforerror.html">Фото отчёт</a>&nbsp;|
  43.      <a href="nforerror.html">Новости</a>&nbsp;|
  44.      <a href="nforerror.html">Контаткты</a>&nbsp;|
  45.      <a href="nforerror.html">Важно знать</a>
  46.     </center>                
  47.    </div>    
  48.   </div>
  49.  </body>
  50. </html>


CODE (htmlphp):
скопировать код в буфер обмена
  1. body { background-image:url(../img/fon1.jpg);}
  2. /*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  3. #osnova { position:relative; width:1000px; min-height:920px; margin:15px auto; padding:0px 0px; background-image:url(../img/content_fon.jpg);
  4.           border-radius:       10px 10px 10px 10px;
  5.           -webkit-border-radius:10px 10px 10px 10px;
  6.           -moz-border-radius:   10px 10px 10px 10px;
  7.           -khtml-border-radius: 10px 10px 10px 10px;
  8.           -webkit-box-shadow:   0px 0px 20px #000000;  
  9.          -moz-box-shadow:      0px 0px 20px #000000;
  10.           box-shadow:          0px 0px 20px #000000; }
  11. /*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/          
  12. #verh  { position:relative; width:1000px; height:260px;margin: 0px 0px;     padding:0px 0px;  border: 0px; background-image:url(../img/verh_fon.jpg);
  13.           border-radius:       10px 10px 0px 0px;
  14.           -webkit-border-radius:10px 10px 0px 0px;
  15.           -moz-border-radius:   10px 10px 0px 0px;
  16.           -khtml-border-radius: 10px 10px 0px 0px; }                        
  17. #v_levo{ position:absolute; width:354px;  height:256px;margin: 0px 0px;     padding:0px 0px;  border: 0px; }
  18. #v_levo img
  19. {
  20.   border: 0px;          
  21.    border-radius:       10px 0px 0px 0px;
  22.   -webkit-border-radius:10px 0px 0px 0px;
  23.   -moz-border-radius:   10px 0px 0px 0px;
  24.   -khtml-border-radius: 10px 0px 0px 0px;
  25.  
  26.  }
  27. #content { position:relative; width:1000px; min-height:600px;  margin: 0px 0px;     padding:0px 0px;  border: 0px; }
  28. #pravo   { position:relative; width:280px;  height:284px;      margin: 5px 0px;     padding:0px 0px;  border: 0px; float:right;}
  29. #menu_a  { position:relative; width:250px;  height:49px;       margin: 0px 0px;     padding:3px 15px; border:0px; background-image:url(../img/menu_verh.png); }
  30. #menu    { position:relative; width:250px;  height:231px;      margin: 0px 0px;     padding:3px 15px; border:0px; background-image:url(../img/menu_center.png); }
  31. #menu_b  { position:relative; width:250px;  height:43px;       margin: 0px 0px;     padding:3px 15px; border:0px; background-image:url(../img/menu_niz.png); }  
  32. #menu_a a:link,    #menu a:link,   #menu_b a:link,
  33. #menu_a a:visited, #menu a:visited,#menu_b a:visited,
  34. #menu_a a:active,  #menu a:active, #menu_b a:active
  35. {
  36.   width:250px;
  37.   margin: 0px 0px;
  38.   padding:0px 0px;
  39.   text-decoration:none;
  40.   font-family:cursive;
  41.   font-weight:bold;
  42.   font-size:30px;
  43.   color:forestGreen;                    
  44.   text-shadow: darkgreen 0px 1px 2px;
  45.   display:block;  
  46.   border:0px;
  47.  }                  
  48. #menu_a a:hover,  #menu_b a:hover, #menu a:hover  
  49. {
  50.   width:250px;
  51.   margin: 0px 0px;
  52.   padding:0px 0px;
  53.   text-decoration:none;
  54.   font-family:cursive;
  55.   font-weight:bold;
  56.   font-size:30px;
  57.   color:forestGreen;                  
  58.   text-shadow:black 0px -2px 3px ;
  59.   display:block;
  60.   border:0px;  
  61.  }
  62. /*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  63. #niz { position:relative; width: 1000px; height:60px; margin: 0px 0px 0px 0px; padding:0px 0px; background-image:url(../img/fon_footer.png); clear:both;
  64.   border-radius:       0px 0px 10px 10px;
  65.   -webkit-border-radius:0px 0px 10px 10px;
  66.   -moz-border-radius:   0px 0px 10px 10px;
  67.   -khtml-border-radius: 0px 0px 10px 10px;  
  68.   -webkit-box-shadow:   0px -2px 5px #000000;  
  69.  -moz-box-shadow:      0px -2px 5px #000000;
  70.   box-shadow:          0px -2px 5px #000000;      
  71. }
  72. #niz a:link,
  73. #niz a:visited,
  74. #niz a:active
  75. {
  76.   height:40px;
  77.   margin: 0px 0px;        
  78.   padding:10px 10px;
  79.   text-decoration:none;
  80.   font-family:cursive;
  81.   font-weight:bolder;
  82.   font-size:21px;
  83.   color: sandybrown;
  84.   text-shadow: saddlebrown 0px 0px 2px;
  85.   display:inline-block;                    
  86.  }                  
  87. #niz a:hover  
  88. {
  89.   height:40px;
  90.   margin: 0px 0px;    
  91.   padding:10px 10px;
  92.   text-decoration:none;
  93.   font-family:cursive;
  94.   font-weight:bolder;
  95.   font-size:21px;
  96.   color:darkgreen;                  
  97.   text-shadow: #000000 0px 3px 5px ;
  98.  display:inline-block;
  99.   background-image: url(../img/fon_footer.png);    
  100.  }
  101. /*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  102. #zayavka { position:fixed; width:  50px; height: 195px; margin: 0px 0px; padding:0px 0px; right:0px; top:45%;
  103.   border-radius:       10px 0px 0px 10px;
  104.   -webkit-border-radius:10px 0px 0px 10px;
  105.   -moz-border-radius:   10px 0px 0px 10px;
  106.   -khtml-border-radius: 10px 0px 0px 10px;
  107.   -webkit-box-shadow:   0px 0px 20px #000000;  
  108.  -moz-box-shadow:      0px 0px 20px #000000;
  109.   box-shadow:          0px 0px 20px #000000;  
  110. }
  111. #zayavka:hover
  112. {
  113.   width:  50px;
  114.   height: 195px;
  115.   position:fixed;
  116.   right:0px;
  117.    border-radius:       5px 0px 0px 5px;
  118.   -webkit-border-radius:5px 0px 0px 5px;
  119.   -moz-border-radius:   5px 0px 0px 5px;
  120.   -khtml-border-radius: 5px 0px 0px 5px;
  121.   -webkit-box-shadow:   0px 0px 20px #fff;  
  122.  -moz-box-shadow:      0px 0px 20px #fff;
  123.   box-shadow:          0px 0px 20px #fff;  
  124. }
  125. #zayavka img
  126. {
  127.   border:0px;
  128.    border-radius:       10px 0px 0px 10px;
  129.   -webkit-border-radius:10px 0px 0px 10px;
  130.   -moz-border-radius:   10px 0px 0px 10px;
  131.   -khtml-border-radius: 10px 0px 0px 10px;
  132.  }
  133. #zayavka a:link,#zayavka a:visited,#zayavka a:active {text-decoration:none; display:block;}                  
  134. #zayavka a:hover {text-decoration:none; display:block;}  
  135.  

За ранее спасибо!) Улыбка
Кто хочет посмотреть косяк на сайте, вот ссылка: www[dot]za-zabor[dot]ru
 
 Top
Panoptik
Отправлено: 06 Февраля, 2012 - 22:16:14
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2493
Дата рег-ции: Нояб. 2011  
Откуда: Одесса, Украина


Помог: 131 раз(а)
да такие косяки везде. ничего странного. при масштабировании браузеры делают округление чисел, и когда элементы расположены вплотную, подогнаны попиксельно, а при масштабировании их размеры исказились на 1-2 пикселя, вот и получается что они перестают влезать в заданные им размеры и сползают вниз


-----
Just do it
 
 Top
Doox911
Отправлено: 06 Февраля, 2012 - 22:21:37
Post Id



Частый гость


Покинул форум
Сообщений всего: 166
Дата рег-ции: Сент. 2011  


Помог: 0 раз(а)
И как с этим бороться? Ведь косячит только всеми любимый Хром! Да IE отлично выводит)
 
 Top
IllusionMH
Отправлено: 06 Февраля, 2012 - 22:22:38
Post Id



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


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


Помог: 242 раз(а)
Doox911, если вы про светлую полосу, которая появляется между div#osnova и div#niz то просто уберите height: 1400px;
из строки
CODE (html):
скопировать код в буфер обмена
  1. #osnova { position:relative; width:1000px; height:1400px;

тут этой строки(точнее высоты) в первом посту нет, но в оригинальных стилях почему-то есть

Тогда основа будет совпадать с содержимым
(Добавление)
Ну а почкму косяки - каждый браузер по своему округляет дробные значения. Кто отбрасывает дробную часть, кто округляет.
Где-то округлиось вниз, где-то вверх, вот в хроме и получается что фиксированный размер основы оказался больше, чем округленные размеры содержимого

(Отредактировано автором: 06 Февраля, 2012 - 22:25:06)

 
 Top
Doox911
Отправлено: 06 Февраля, 2012 - 22:26:55
Post Id



Частый гость


Покинул форум
Сообщений всего: 166
Дата рег-ции: Сент. 2011  


Помог: 0 раз(а)
IllusionMH пишет:
Doox911, если вы про светлую полосу, которая появляется между div#osnova и div#niz то просто уберите height: 1400px;
из строки
CODE (html):
скопировать код в буфер обмена
  1. #osnova { position:relative; width:1000px; height:1400px;

тут этой строки(точнее высоты) в первом посту нет, но в оригинальных стилях почему-то есть

Тогда основа будет совпадать с содержимым
(Добавление)
Ну а почкму косяки - каждый браузер по своему округляет дробные значения. Кто отбрасывает дробную часть, кто округляет.
Где-то округлиось вниз, где-то вверх, вот в хроме и получается что фиксированный размер основы оказался больше, чем округленные размеры содержимого

С резиновым прокатит) А статическим( где нужна именно такая ширина) Что делать?
Т.е. Если Я уберу дробные значения всё ок будет?
(Добавление)
Так ведь у меня и нет дробных чисел) Или дробные числа самого браузера?

(Отредактировано автором: 06 Февраля, 2012 - 22:28:21)

 
 Top
IllusionMH
Отправлено: 06 Февраля, 2012 - 22:32:56
Post Id



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


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


Помог: 242 раз(а)
Doox911, какая ширина? я про высоту говорил. Или мы о разных проблемах говорим?
Сколько не зумил только полоску под этим дивом заметил. Если речь не про нее, то скрин вылодите(желательно ссылкой или под спойлером)

И как вы собираетесь убрать дробные значения? они появляются когда размер элемента умножается на значение масштаба. А масштабы разные бывают.

P.S. Уберите сбоку ссылку на заявку, пока ее на сделаете. Заглушка раздражает.

(Отредактировано автором: 06 Февраля, 2012 - 22:33:34)

 
 Top
Doox911
Отправлено: 06 Февраля, 2012 - 22:37:40
Post Id



Частый гость


Покинул форум
Сообщений всего: 166
Дата рег-ции: Сент. 2011  


Помог: 0 раз(а)
IllusionMH пишет:
Doox911, какая ширина? я про высоту говорил. Или мы о разных проблемах говорим?
Сколько не зумил только полоску под этим дивом заметил. Если речь не про нее, то скрин вылодите(желательно ссылкой или под спойлером)

И как вы собираетесь убрать дробные значения? они появляются когда размер элемента умножается на значение масштаба. А масштабы разные бывают.

P.S. Уберите сбоку ссылку на заявку, пока ее на сделаете. Заглушка раздражает.

1. Из-за времени суток косякнул) Конечно же высота.
2.Понятно)
3.С оперы сидите?
4.Как мне кстати сделать её грамотно)?
 
 Top
IllusionMH
Отправлено: 06 Февраля, 2012 - 22:46:25
Post Id



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


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


Помог: 242 раз(а)
Doox911,
3) Сижу с оперы, но при этом держу зоопарк браузеров.
4) Если про заглушку/ссылку на заявку - убрать ее вообще. Элемент выбивается из общего вида и привлекает к себе внимание. А за ним - разочарование в виде: это еще не работает.
Не вижу смысла светить то, что не работает.
Если про высоту - просто убрать параметр высоты в той строке.

(Отредактировано автором: 06 Февраля, 2012 - 22:46:44)

 
 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