Jump to content
  • Sign Up

Online

Newbie
 View Profile  See their activity

  • Content Count

    28

  • Joined

  • Last visited

 Content Type 

Posts posted by Online

    2. Шапка и 100% DIV

      in HTML Coding

      Posted · Edited by Online

      Спасибо. Сделал вот так. Но если в первом блоке "content-filter" будет много текста (и другого содержимого), то как сделать, чтобы прокрутка была только в нем? Сейчас прокрутка получается у всей страницы...

      И еще, как сделать, чтобы тень от хидера накладывалась на блоки ниже? Сейчас по сути ее и не видно.

      <!doctype html>
<title>Example</title>
<style>
  * {
    box-sizing: border-box; 
  }
  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
  }
  #main-header {
    background: #fafafb;
    height: 40px;
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.4);
    margin-bottom: 0px;
  }  
  #content-main {
    display: flex;
    flex: 1;
  }
  #content-filter {    
    flex: 0 0 350px;
    order: 1;
    background: #D7E8D4;    
  }  
  #content-article {
    flex: 1;
    order: 2;
  }
</style>
<body>
  <header id="main-header">Header</header>
  <div id="content-main">
    <div id="content-filter">Filter</div>
    <div id="content-article">Article</div>    
  </div>  
</body>

       

    3. Шапка и 100% DIV

      in HTML Coding

      Posted · Edited by Online

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

      <!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title></title>
        <style>
                html, body {                        
                        margin: 0px;
                        height: 100%; 
                }             
                #main-header {                      
                        background: #fafafb;
                        height: 32px;
                        vertical-align: middle;
                        -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
                        -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
                        box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
                }             
                #main-header p {
                        margin-left: 20px;
                        font-weight: 600;
                }
                #main-container {
                        background: yellow;
                        height: 100%
                }
                .div1 {    
                        width: 350px;
                        background: #ccc;
                        float: left;
                        height: 100%
                }
                .div2{    
                        width: 100%;                      
                        background: #c00;   
                        margin-left: 350px;
                        height: 100%
                }             
        </style>
</head>
<body>
        <header id="main-header">
                <p>Заголовок</p>
        </header >
        <div id="main-container">
                <div class="div1">div1</div>
                <div class="div2">div2</div>
        </div>
</body>
</html>

       

    4. Шапка и 100% DIV

      in HTML Coding

      Posted

      Наверно, все просто: подскажите, пожалуйста, как реализовать такое: нужна фиксированная шапка и две области под ней: слева аля меню, в ней может быть прокрутка. И справа - вторая область, 100% высоты и ширины всего остального пространства. Таким образом на странице браузера не должно быть прокрутки. Как это можно простыми средствами сделать? Вот что я имею ввиду (см. картинку): идеально, если у шапки будет тень.

      Q1.png

    5. Ссылка с якорем

      in HTML Coding

      Posted · Edited by Online

      Ссылки генерируются в другой проге автоматом в зависимости от того, что выбрал юзер. Я уже понял, что так, как я хотел, указать путь к локальному документу, сделать нельзя.

    6. Ссылка с якорем

      in HTML Coding

      Posted

      Долго объяснять. Вкратце: есть большой документ, нужно не разбивая его на мелкие просто переходить к нужным абзацам. Примерно тоже самое, если делать на PHP и т.п. (file.html?test), просто не хочется ставить вебсервер в локальной сети и т.д. ради такой ерунды...

    8. Ссылка с якорем

      in HTML Coding

      Posted · Edited by Online

      А как по такой ссылке переходить

      - без щелкания мышкой по ссылке с якорем на какой-нибудь странице;

      - без ручного ввода в строку адреса #имя?

      Пуск-Выполнить: "C:\file.htm" - открывает страницу браузером по умолчанию - как раз почти то, что нужно. А уже "C:\file.htm#test" - ошибка.

    9. Ссылка с якорем

      in HTML Coding

      Posted

      Есть HTML страница на локальном диске, на ней есть якоря. Открываю, к примеру, с помощью IE8, в строке вижу "C:\file.htm". Переход к абзацам осуществляется путем добавления имени якоря (#test и т.д.) - можно ли из командной строки, ярлыка или еще как-нибудь открывать файл сразу на нужном абзаце ("C:\file.htm#test")?

    10. В таблице плавает высота ячейки

      in HTML Coding

      Posted

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

    14. В таблице плавает высота ячейки

      in HTML Coding

      Posted

      1) В примере таблица без рисунков: (скриншоты) для FF и О (как и задумывалось) и для IE6. Может быть вложить в боковые ячейки по таблице из двух строк или вставить туда дивы друг на друга (верхний - полностью фиксированный, нижний - фиксированный по ширине, а по длине - растягивался под изменения в таблице)? Только как такую растяжку осуществить?

      2) Ясно.

    15. В таблице плавает высота ячейки

      in HTML Coding

      Posted

      1) Есть таблица, у которой есть ячейки (слева и справа) со строго заданными высотой и шириной (14 ширина, 150 высота). В них вставлены такого же размера рисунки. В IE высота этих ячеек почему-то увеличивается, хотя в FF и O все нормально. Почему и как это исправить? Да, рисунки эти (gif) по краям прозрачные, поэтому если объединить 2 левые (правые) ячейки и вставить рисунок сверху поверх фона, он начинает "проступать" под рисунком. Чтобы этого не было я и сделал отдельно ячейки для рисунков в 150 высотой.

      2) Валидатор говорит, что "there is no attribute "BACKGROUND" для строки "

      """. Заголовок не хочу менять, а как задать фон ячейки? 

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Untitled Document</title>
      <style type="text/css">
      <!--
      body {
       background: #efeff1;
       margin: 0px;
       padding: 0px;
      }
      img {
       border: 0px;
      }
      -->
      </style>
      </head>
      <body>






      <table width="50%" border="1" cellspacing="0" cellpadding="0" align="center">
       <tr>
       <td width="50" height="150"> </td>
       <td rowspan="2" bgcolor="#FFFFFF">




































      </td>
       <td width="50" height="150"> </td>
       </tr>
       <tr>
       <td width="50"> </td>
       <td width="50"> </td>
       </tr>
      </table>







      </body>
      </html>

    17. Фон блока в Firefox

      in HTML Coding

      Posted

      2 rez_spb

      А картинка точно по высоте 28px? Просто если я беру большую картинку, то она отображается, но ее верхняя часть находится под первым блоком, словно фоном заливается не от края блока, а от края окна браузера.

      2 yopopt

      Регистр соблюден!

    20. Фон блока в Firefox

      in HTML Coding

      Posted

      Вот есть код, но в Firefox фон второго блока не отображается. Если их поменять местами, все ок. В IE6 фон всегда отображается. Как это исправить?

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
      </head>
      <body>

      <div style="height:50px; background:#CCCCCC; border:1px solid"></div>

      <div style="height:28px; background:url('fone.gif') left top repeat-x fixed; border:1px solid;"></div>

      </body>
      </html>

    24. Изменение свойства DIV при наведении мыши и IE

      in HTML Coding

      Posted

      Есть вертикальное выпадающее меню (см. код ниже).

      1) Как сделать так, чтобы при наведении мыши на пункт у него менялся цвет фона по всей длине и этот пункт был бы ссылкой. В FF и O работает, а в IE6 не совсем - цвет меняется только при наведении на текст.

      2) Реализация этого меню в IE6 (в старших не проверял) выдает панель о небезопасном содержимом. Можно ли изменить это меню так, чтобы все работало (желательно валидно) и эта панель не появлялась?

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <title>Документация</title>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
      <meta name="keywords" content="Документация">
      <meta name="robots" content="index, all">

      <script type="text/javascript">
      var id_menu = new Array('sub_menu_1','sub_menu_2');
      function allclose() {
       for (i=0; i < id_menu.length; i++){
       document.getElementById(id_menu[i]).style.display = "none";
       }
      }
      function openMenu(id){
       for (i=0; i < id_menu.length; i++){
       if (id != id_menu[i]){
       document.getElementById(id_menu[i]).style.display = "none";
       }
       }
       if (document.getElementById(id).style.display == "block"){
       document.getElementById(id).style.display = "none";
       }else{
       document.getElementById(id).style.display = "block"; 
       }
      }
      </script>

      <style type="text/css">
      /* ширина меню */
      .menu0 {
       width: 220px;
      }
      /* первый уровень */
      .menu1 {
       display: block;
       font-size: 14px;
      }
      a.menu1 {
       line-height: 100%;
       padding-top: 5px;
       padding-bottom: 5px;
       color: #0e5fd8;
      }
      a.menu1:link, a.menu1:visited, a.menu1:hover, a.menu1:active {
       text-decoration: none;
      }
      /* второй уровень */
      .menu2 {
       display: block;
       font-size: 12px;
      }
      a.menu2 {
       color: #0e5fd8;
       padding-left: 20px;
       padding-top: 2px;
       padding-bottom: 2px;
      }
      a.menu2:link, a.menu2:visited, a.menu2:hover, a.menu2:active {
       text-decoration: none;
      }
      </style>

      <body onload="allclose()">

      <div class="menu0">
      <div class="menu1" onMouseOver="this.style.background='#E1F1FF'" onMouseOut="this.style.background='#FFF'">
      <a href="#" class="menu1" onClick="openMenu('sub_menu_1'); return(false)">Пункт 1</a>
      </div>
      <div class="menu2" id="sub_menu_1">
      <div><a href="#" class="menu2">Блаблабла 11</a></div>
      <div><a href="#" class="menu2">Блаблабла 12</a></div>
      <div><a href="#" class="menu2">Блаблабла 13</a></div>
      <div><a href="#" class="menu2">Блаблабла 14</a></div>
      <div><a href="#" class="menu2">Блаблабла 15</a></div>
      </div>

      <div class="menu1" onMouseOver="this.style.background='#E1F1FF'" onMouseOut="this.style.background='#FFF'">
      <a href="#" class="menu1" onClick="openMenu('sub_menu_2'); return(false)">Пункт 2</a>
      </div>
      <div class="menu2" id="sub_menu_2">
      <div><a href="#" class="menu2">Блаблабла 21</a></div>
      <div><a href="#" class="menu2">Блаблабла 22</a></div>
      <div><a href="#" class="menu2">Блаблабла 23</a></div>
      <div><a href="#" class="menu2">Блаблабла 24</a></div>
      <div><a href="#" class="menu2">Блаблабла 25</a></div>
      </div>
      </div>


      </body>
      </html>

    25. Курсор при наведении на картинку-ссылку

      in HTML Coding

      Posted

      Хочу сделать простую смену картинки при наведении на нее курсора мыши (код ниже). В IE6 при наведении курсора он так и остается указателем-стрелкой, в FF2 - принимает форму руки (как и полагается). Почему так происходит в IE и как это исправить, чтобы курсор явно говорил, что это картинка-ссылка?

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
      <title>Test</title>
      </head>
      <body>
      <a href="#"><div id="b1" style="width:144px; height:90px; display:block; background-image:url(pic/button1.png)" onMouseOver="this.style.backgroundImage='url(pic/button1_.png)'" onMouseOut="this.style.backgroundImage='url(pic/button1.png)'"></div></a>
      </body>
      </html>

    ×
      ×
      • Create New...

      Important Information

      We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

        I accept