Jump to content
  • Sign Up

Online

Newbie
  • Posts

    28
  • Joined

  • Last visited

Information

  • Sex
    не скажу

Online's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Online

    Шапка и 100% DIV

    Спасибо, изучаю.
  2. Online

    Шапка и 100% DIV

    Спасибо. Сделал вот так. Но если в первом блоке "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. Online

    Шапка и 100% DIV

    Да, но у меня 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% высоты и ширины всего остального пространства. Таким образом на странице браузера не должно быть прокрутки. Как это можно простыми средствами сделать? Вот что я имею ввиду (см. картинку): идеально, если у шапки будет тень.
  5. Ссылки генерируются в другой проге автоматом в зависимости от того, что выбрал юзер. Я уже понял, что так, как я хотел, указать путь к локальному документу, сделать нельзя.
  6. Долго объяснять. Вкратце: есть большой документ, нужно не разбивая его на мелкие просто переходить к нужным абзацам. Примерно тоже самое, если делать на PHP и т.п. (file.html?test), просто не хочется ставить вебсервер в локальной сети и т.д. ради такой ерунды...
  7. Открывается страница без перехода к абзацу, в адресной строке нет #имя, несмотря на указание в командной строке...
  8. А как по такой ссылке переходить - без щелкания мышкой по ссылке с якорем на какой-нибудь странице; - без ручного ввода в строку адреса #имя? Пуск-Выполнить: "C:\file.htm" - открывает страницу браузером по умолчанию - как раз почти то, что нужно. А уже "C:\file.htm#test" - ошибка.
  9. Есть HTML страница на локальном диске, на ней есть якоря. Открываю, к примеру, с помощью IE8, в строке вижу "C:\file.htm". Переход к абзацам осуществляется путем добавления имени якоря (#test и т.д.) - можно ли из командной строки, ярлыка или еще как-нибудь открывать файл сразу на нужном абзаце ("C:\file.htm#test")?
  10. Для дива с картинкой? Фон есть, он берется от другого дива, в который все это вложено (в примерах выше этого дива нет). Фрагмент скриншота от реального примера: 1 - та самая картинка для дива или ячейки с фиксированными размерами (сверху тени нет, есть прозрачная область, тень начинается внизу этой картинки и потом должна переходить в фон), 2 - фон, который должен повторяться вниз.
  11. Не получается! Вот картинка!
  12. В смысле убираем? Фон должен быть! Но под картинкой его не должно быть (здесь слово "под" означает не внизу, а именно под картинкой)! Именно для этого и было отведено две ячейки таблицы.
  13. Scrum Это не совсем то. Мне надо, чтобы под рисунками не было фона, а здесь он есть (достался от фона ячейки). Фон должен быть только в боковых "растягивающихся" ячейках.
  14. 1) В примере таблица без рисунков: (скриншоты) для FF и О (как и задумывалось) и для IE6. Может быть вложить в боковые ячейки по таблице из двух строк или вставить туда дивы друг на друга (верхний - полностью фиксированный, нижний - фиксированный по ширине, а по длине - растягивался под изменения в таблице)? Только как такую растяжку осуществить? 2) Ясно.
  15. 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>
×
×
  • 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. See more about our Guidelines and Privacy Policy