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 :: DIV Футер внизу экрана (глюки)

 PHP.SU

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


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

> Без описания
Поиск в теме | Версия для печати
CTAPu4OK
Отправлено: 21 Октября, 2010 - 15:34:06
Post Id



Гость


Покинул форум
Сообщений всего: 67
Дата рег-ции: Июль 2008  


Помог: 0 раз(а)
Проблема в том что в IE работает почти нормально, т.е. появляется полоса прокрутки, но футер внизу. в опере и мозиле футер наезжает на шапку :\
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  6. <link href="style/opera.css"  rel="stylesheet" type="text/css" />
  7. <link rel="stylesheet" type="text/css" href="hack for opera">
  8. <script src="js/jquery.js" type="text/javascript" language="javascript"></script>
  9. <script src="js/page.js" type="text/javascript" language="javascript"></script>
  10. <!––[if lt IE 7]>
  11.     <style type=”text/css”>
  12.       #body {
  13.          height:100%;
  14.       }
  15.    </style>
  16. <![endif]––>
  17. <title>Титул</title>
  18. </head>
  19.  
  20. <body>
  21. <div>
  22.     <div id="header">
  23.         <div id="logo_right" align="right"><?</div>
  24.         <div id="logo">Лого!</div>
  25.     </div>
  26.     <div id="body">
  27.        <div id="right">right</div>
  28.         <div id="center">center</div>
  29.          <div id="left">left</div>
  30.     </div>
  31.     <div id="finish"></div>
  32.     <div id="footer">
  33.         <div id="topfooter"> </div>
  34.         <div id="midfooter"> </div>
  35.         <div id="bottfooter"> </div>
  36.     </div>
  37. </div>
  38. </body>
  39. </html>
  40.  


CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. /* CSS Document */
  3.  
  4. html, body {
  5. margin: 0;
  6. padding: 0;
  7. height: 100%;
  8. background:url(../img/bgimg.jpg);
  9. background-position:center;
  10. }
  11. @media all {
  12. .fadein { visibility:hidden; }
  13. #fade1 { /* */ }
  14. #fade2 { /* */ }
  15. #fade3 { /* */ }
  16. }
  17. @media handheld {
  18. .fadein { visibility:visible; }
  19. }
  20.  
  21. /*Header*/
  22.  
  23. #header {
  24. background-color:#585757;
  25. height:35px;
  26. }
  27. #logo {
  28. height:35px;
  29. line-height: 35px;
  30. margin-right:50%;
  31. font-family:Verdana, Arial, Helvetica, sans-serif;
  32. font-size:12px;
  33. color:#9f9f9f;
  34. padding-left:20px;
  35. font-style:italic;
  36. letter-spacing:5px;
  37. font-weight:bolder;
  38. }
  39. #logo_right {
  40. height:35px;
  41. float:right;
  42. width:50%;
  43. line-height: 35px;
  44. font-family:Verdana, Arial, Helvetica, sans-serif;
  45. font-size:12px;
  46. color:#9f9f9f;
  47. padding-right:20px;
  48. font-style:italic;
  49. letter-spacing:5px;
  50. font-weight:bolder;
  51. }
  52.  
  53. #body, #footer {
  54.         position:relative;
  55. }
  56. /* Body */
  57. #body {
  58. min-height:100%;
  59. height:auto !important;
  60. height:100%;
  61. }
  62. #body #finish {
  63.    height:0px;
  64. }
  65. #left {
  66. margin-right:30%;
  67. }
  68. #center {
  69. float:right;
  70. width:60%;
  71. }
  72. #right {
  73. float:right;
  74. width:10%;
  75. }
  76.  
  77. /*footer*/
  78. #footer {
  79. margin-top:-51px;
  80. height:50px;
  81. position:relative;
  82. }
  83. #topfooter {
  84. height:7px;
  85. background-color:#9f9f9f;
  86. }
  87. #midfooter {
  88. background-color:#585757;
  89. height:20px;
  90. }
  91. #bottfooter {
  92. background-color:#343434;
  93. height:20px;}
  94.  
 
 Top
Саныч
Отправлено: 21 Октября, 2010 - 15:55:49
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)
мне кажется проблема кроется в стилях на 79 строчке...


-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
CTAPu4OK
Отправлено: 21 Октября, 2010 - 17:13:27
Post Id



Гость


Покинул форум
Сообщений всего: 67
Дата рег-ции: Июль 2008  


Помог: 0 раз(а)
Сделал по другому, все работает Улыбка
CODE (html):
скопировать код в буфер обмена
  1. <style>
  2. html,body {
  3.    height: 100%;
  4.    margin: 0;
  5. }
  6. .content-holder {
  7.    min-height: 100%;
  8. }
  9. * html .content-holder {
  10.    height: 100%;
  11. }
  12. #content {
  13.    padding-bottom: 50px; /* высота footer'а */
  14.    background-color: #ccc;
  15. }
  16. #footer {
  17.    text-align: center;
  18.    line-height: 50px;
  19.    position:relative;
  20.    width: 100%;
  21.    height: 50px;
  22.    margin-top: -50px; /* высота footer'а */
  23.    background-color: #f00;
  24. }
  25. </style>
  26. <div class="content-holder">
  27.     <div>
  28.     Шабко
  29.     </div>
  30.    <div id="content">
  31.        Content text  Content textContent text
  32.    </div>
  33. </div>
  34. <div id="footer">footer</div>
 
 Top
JustUserR
Отправлено: 22 Октября, 2010 - 13:52:53
Post Id



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


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)
CTAPu4OK пишет:
Появляется полоса прокрутки
Для предотвращения появления полосы прокрутки в используемом вами элементе слоя нижнего блока сайта - возможно провести его заключение в специальные контейнерный элемент с явным указанием свойств box-sizing:border-box для проведения точного расчета границ элементов - а также overflow:hidden для отключения вывода элемента управления прокрутки


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 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