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
Форумы портала PHP.SU :: Версия для печати :: Не выводится текст
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Не выводится текст

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

1. alexb - 01 Февраля, 2012 - 07:32:52 - перейти к сообщению
Здраствуйте! Помогите пожалуйста, не выводится текст в диве "content" (в самом низу). Почему?


CODE (html):
скопировать код в буфер обмена
  1.  
  2. <DOCTYPE html>
  3.     <html>
  4.     <head>
  5.     <title>My new Page</title>
  6.      
  7.     <style>
  8.    body {
  9.    border: 1px solid gray;
  10.   }
  11.    A {
  12.     text-decoration: none; /* Отменяем подчеркивание у ссылки */
  13.    }
  14.  
  15.     #header {
  16.      height: 18%;
  17.      width: 100%;
  18.      background: url(lin.png);
  19.     }
  20.     #logo {
  21.          position:absolute;
  22.          top:18px;
  23.          left:40px;
  24.          width:150px;
  25.          height:75px;
  26.     }
  27.     #cont {
  28.      width: 160px;
  29.      height: 400px;
  30.      border: 1px solid gray;
  31.      border-width: 0 1px 0 0;
  32.      position: absolute;
  33.      top: 119px;
  34.      text-align: center;
  35.      float: left;
  36.     }
  37.     ul {
  38.     width: 160px; /* Ширина меню */
  39.     list-style: none; /* Для списка убираем маркеры */
  40.     margin: 0; /* Нет отступов вокруг */
  41.     padding: 0; /* Убираем поля вокруг текста */
  42.     font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
  43.     font-size: 10pt; /* Размер названий в пункте меню */
  44.     }
  45.    
  46.     li a {
  47.     display: block; /* Ссылка как блочный элемент */
  48.     padding: 5px; /* Поля вокруг надписи */
  49.     text-decoration: none; /* Подчеркивание у ссылок убираем */
  50.     color: #666; /* Цвет текста */
  51.     border: 1px solid #ccc;/* Рамка вокруг пунктов меню */
  52.     background-color: #f0f0f0; /* Цвет фона */
  53.     border-bottom: none; /* Границу снизу не проводим */
  54.    }
  55.    li a:hover {
  56.     color: #ffe; /* Цвет текста активного пункта */
  57.     background-color: #4169e1; /* Цвет фона активного пункта */
  58.    }
  59.    .brd {
  60.     border-bottom: 1px solid #ccc; /* Линия снизу */
  61.    }
  62.    #content {
  63.    width: 600px;
  64.    height: 400px;
  65.    }
  66.     </style>
  67.     </head>
  68.      
  69.     <body>
  70.      <div id="header">
  71.                 <div id="logo">
  72.      <img src="logo.png" width="260px" height="80px">
  73. </div>
  74. </div>
  75. <div id="cont">
  76. <ul class="menu">
  77.    <li><a href="php.su">Текст текст</a>
  78.    </li>
  79.    <li><a href="php.su">Текст текст</a>
  80.    </li>
  81.    <li><a href="php.su">Текст текст</a>
  82.    </li>
  83.    <li><a href="php.su" class="brd">Текст текст</a></li>
  84.   </ul>
  85. </div>
  86. <div id="content">Тут текст который не выводится(</div>
  87.  
  88.     </body>
  89.     </html>
  90.  
  91.  
2. Zuldek - 01 Февраля, 2012 - 07:41:41 - перейти к сообщению
CODE (htmlphp):
скопировать код в буфер обмена
  1. <DOCTYPE html>
  2.     <html>
  3.     <head>
  4.     <title>My new Page</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. ...
  7.  
3. alexb - 01 Февраля, 2012 - 07:43:35 - перейти к сообщению
Zuldek, не выходит.
4. IllusionMH - 01 Февраля, 2012 - 13:35:38 - перейти к сообщению
alexb, может потому, что текст выводится вверху?

CODE (CSS):
скопировать код в буфер обмена
  1. #header {
  2.      height: 18%;
  3. }


Для body высота не задана, и div#header имеет высоту вычисляемую не по body, а по высоте потомков. Потомка div#logo имеет абсолютное позиционирование, по этому никак не влияет на размещение остальных элементов, и не позволяет вычислить высоту div#header, поэтому у него высота 0px и его не видно.

Как ни странно, но при этом div#logo видно, даже если для div#header задать overflow: hidden;

div#cont мало того, что имеет float: left, так еще и position: absolute и никак не влияет на расположение других элементов.
ИТОГО: div#header имеет нулевую высоту, div#cont абсолютно позиционирован и не влияет на расположение других элементов, поэтому в самый верх страницы съезжает div#content

Как правильно делать показано здесь
5. Zuldek - 01 Февраля, 2012 - 13:38:51 - перейти к сообщению
alexb пишет:
Zuldek, не выходит.

копипаст кода, у меня текст выводится и отображается. Другое дело если он выводится не там где вам нужно.
6. alexb - 01 Февраля, 2012 - 14:41:15 - перейти к сообщению
IllusionMH,Zuldek, спасибо большое.

 

Powered by ExBB FM 1.0 RC1