Jump to content

Lex-DRL

Newbie
 View Profile  See their activity

  • Posts

    17

  • Joined

  • Last visited

Lex-DRL's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Lex-DRL
    Сделал. Но пока с экспрешнами ИЕ не разобрался - так что без них. Кто знает - может сам сделать по аналогии с кодом, предложенным psywalker. Фон составлен из 9 блоков таблицей 3x3. Углы - фиксированные, стороны-заполнители - тянущиеся. Центральный (5-ый) слой сделан рассчётом на то, что для окружающих его блоков периметра в качестве бэка используются PNG с переходом через прозрачность к основному фону. Поэтому 5-ый блок немного больше - чтобы охватить зону перехода. Габариты фиксированной рамки: слева и справа - по 30, сверху - 45, снизу - 60. min-width: 800px у боди выставлена с рассчётом на общие габариты сайта. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml" lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Simple Test | Простой тест</title> <link type="text/css" rel="stylesheet" media="all" href="simpletest.css"> </head> <body> <div id="page"> <div id="page-back"> <div class="back-5"></div> <div class="back-1"></div><div class="back-2"></div><div class="back-3"></div> <div class="back-4"></div><div class="back-6"></div> <div class="back-7"></div><div class="back-8"></div><div class="back-9"></div> </div> <div id="page-front">Содержимое блока "page-front".</div> </div> </body> </html> CSS: * { margin: 0; padding: 0; } HTML, BODY { height: 100%; min-width: 800px; } /* Стиль контейнера */ #page { min-height: 105px; min-width: 60px; position: relative; margin: 0 auto; color: white; } /* Общие стили фоновых блоков */ #page-back, .back-1, .back-2, .back-3, .back-4, .back-5, .back-6, .back-7, .back-8, .back-9 { position: absolute; z-index: -1; } /* Стили для блоков, общие по рядам */ .back-1, .back-2, .back-3 { height: 45px; top: 0; } .back-4, .back-6 { top: 45px; bottom: 60px; } .back-7, .back-8, .back-9 { height: 60px; bottom: 0; } /* Стили для блоков, общие по столбцам */ .back-1, .back-4, .back-7 { width: 30px; left: 0; } .back-2, .back-8 { left: 30px; right: 30px; } .back-3, .back-6, .back-9 { width: 30px; right: 0; } /* Индивидуальные стили фоновых блоков */ #page-back { top: 0; bottom: 0; left: 0; right: 0; } /* Центральный (5-ый) блок чуть больше, чтобы можно было сделать плавный переход от блоков периметра к нему через прозрачность. Для этого он должен полностью охватывать область перехода. */ .back-5 { left: 10px; right: 10px; top: 30px; bottom: 40px; background: maroon; } /* У блоков периметра индивидуально настраивается только фон */ .back-1 { background: darkblue;} .back-2 { background: green;} .back-3 { background: darkblue;} .back-4 { background: green;} .back-6 { background: green;} .back-7 { background: darkblue;} .back-8 { background: green;} .back-9 { background: darkblue;} /* Стиль переднего блока с контентом */ #page-front { float: none; padding: 30px 20px; width: auto; overflow: hidden; }
  2. Lex-DRL
    ОК, тогда всё прекрасно. Как сделаю окончательный вариант решения поставленной задачи (тянущийся во все стороны бэк) - скину сюда код. Ещё раз спасибо.
  3. Lex-DRL
    Да не, я не о соответствии схеме. Принцип понял - мелочи и сам подправить могу. Я о том, что: Это отсюда. Соотв-но, я опасаюсь за отображение в ФФ 2. Насколько я помню, ФФ3 вышел относительно недавно. Сам проверить не могу - тупо не нашёл ФФ2. Или на нём ты тоже провераял?
  4. Lex-DRL
    Сорри, что опять возвращаюсь к вопросу и отдельное сорри за длинный пост - но я разобрался с кодом, и теперь не уверен по поводу его кроссбраузерности. Как я понял: Ты просто делаешь каждый слой с фоном абсолютно-позиционированным, ставишь куда надо и растягиваешь на всю высоту родительского блока (кстати за растягивание через top и bottom - отдельное спасибо, сам как-то протупил). Чтоб абсолюты были относительно его - ставишь ему relative, а чтоб абсолюты не перекрывали контент - ставишь им z-index: -1. Вот тут-то и загвоздка. z-index с отрицательными значениями обрабатывается не всеми браузерами, а с положительными - фишка не пашет: абсолюты всё равно рисуются поверх, что я ни пробовал (ставил абсолютам 0 или 1, а .head, .right-float и .foot - поболее). Я и сам когда в начале перебирал варианты - пробовал сделать через абсолюты (правда растянуть пытался через min-height, до твоего способа в спешке не догадался). Но отказался я от этого варианта как раз потому, что пользуясь только положительными значениями z-index расположить абсолюты за контентом не удалось. Если я тебя ещё не совсем достал - тогда вопрос: можно ли эту проблему как-нить обойти? Потому что способ самый дельный, и после того, как ты мне его предложил - я к нему склоняюсь ещё больше. Если так приставать с моей стороны уже нагло - тогда прошу прощения, пойду искать где-нить ещё. Честно скажу, с кодом в условных комментариях я ещё не разбирался, т.к. пока не знаком с ишаковскими экспрешнами.
  5. Lex-DRL
    Благодарю. Ушёл разбираться с этим кодом.
  6. Lex-DRL
    Если под нижними имелись в виду 7, 8, 9 - то их нижняя граница должна совпадать с нижней границей контента, т.к. это на схеме они маленькие, а на деле там градиент по 100-200 пикселей, что кое-где составляет половину контента. Тут вся соль в том, что фон должен быть именно за контентом, а не вокруг.
  7. Lex-DRL
    Поскольку тема ушла немного "в сторону", создал новый топик.
  8. Lex-DRL
    В продолжение этого топика. Имеется 2 блока. В одном - фон, составленный из обрезков. В другом - собственно контент. Задача: расположить второй блок (div с контентом) поверх первого так, чтобы фон покрывал весь контент. Фон (в 1 блоке) сделан в виде таблицы 3x3, в которой боковые стороны тянутся, а углы - фиксированного размера. Это для того, чтоб фон был резиновым не только по горизонтали, но и по вертикали. Поэтому просто вложить слой с контентом внутрь слоя с фоном не получится. Если абсолютно позиционировать фон - то он отрисовывается поверх контента, так что это тоже не подходит. <div id="page"> <div id="page-back"> <div class="back-2"><div class="back-1"></div><div class="back-3"></div></div> <div class="back-5"><div class="back-4"></div><div class="back-6"></div></div> <div class="back-8"><div class="back-7"></div><div class="back-9"></div></div> </div> <div id="page-front">Контент.</div> </div> Расположение блоков фона: 1 2 3 4 5 6 7 8 9 Где красные иксы - там тянется. В итоге нужно получить это: На данный момент имеется: BODY, *, * html { border: none; background: none; margin: 0; padding: 0; } #page { background: black; color: white; padding: 10px; overflow: hidden; } #page-back, #page-front { float: left; } #page-back { background: green; position: relative; width: 100%; min-height: 100%; } #page-front { background: blue; margin: 0 -100%; width: 100% } С CSS только знакомлюсь - но уже поражён тем, насколько трудно реализуется такая элементарная вещь, как резиновый фон.
  9. Lex-DRL
    Сделал, как там: <body> <div id="page"> <div id="page-back">Текст в блоке "page-back"</div> <div id="page-front">Текст в блоке "page-front"</div> </div> </body> BODY, *, * html { border: none; background: none; margin: 0; padding: 0; } #page { background: black; color: white; padding: 10px; overflow: hidden; } #page-back, #page-front { float: left; width: 50%; display: inline; } #page-back { background: green; } #page-front { background: blue; height: 40px; margin-left: -25%; } Ничего не изменилось. Там, как я понял, всё держится на том, что растягиваемый блок в коде находится первым, а визуально за счёт margin-left перемещается вправо. Второй, напротив, смещается влево. И, по-видимому, за счёт того, что они оба inline, и между ними образуется небольшой зазор, браузер отрисовывает первый блок (который расположен вторым) на всю высоту. У меня же они не меняются местами средствами CSS, а располагаются один поверх другого. Полагаю, поэтому фишка не катит.
  10. Lex-DRL
    Отделить фон от контента нужно потому, что фон родительского блока должен быть резиновым как по горизонтали, так и по вертикали, т.е. задний блок сделан из картинок таблицей в 9 ячеек (через дивы): <div id="page-back"> <div class="back-2"><div class="back-1"></div><div class="back-3"></div></div> <div class="back-5"><div class="back-4"></div><div class="back-6"></div></div> <div class="back-8"><div class="back-7"></div><div class="back-9"></div></div> </div> <!-- /page-back --> Расположение блоков фона: 1 2 3 4 5 6 7 8 9 Где красные иксы - там тянется. В итоге должно быть так: При этом блок контента (содержимое page-front) будет покрывать весь блок page-back, а не только его 5-ую (центральную) часть. Иначе бы я, само собой, сделал просто через вложенные дивы. Основную часть инфы о том, как этого добиться, я уже почерпнул отсюда, но - как видишь - кое-на-чём застрял.
  11. Lex-DRL
    На выходе, по идее, я хочу сделать так, чтобы в page-back был фон, а в page-front - контент. И при увеличении блока с контентом (который будет заведомо больше фонового) фоновый растягивался на всю высоту. Т.е., действия следующие: 1. Выстраиваем блоки один за другим (сделано - float) 2. Делаем так, чтобы page-back растягивался на всю высоту. 3. Делаем обоим блокам width: 100% и перемещаем передний влево на эту же виличину (margin-left, margin right по -100%). Скрин показать не могу, только набросок в ФШ. 1 - то, что надо, 2 - то, что получается сейчас: Сорри, что так долго - рисовал как умею.
  12. Lex-DRL
    Хм... теперь почему-то меньший из дочерних блоков (page-back) не хочет растягиваться на всю высоту (следую этой инструкции): #page-back { background: green; min-height: 100%; } * html #page-back { /* Это, как я понял, хак для ишака */ height: 100%; } #page-front { background: blue; height: 40px; }
  13. Lex-DRL
    Действительно, помогло. Только я что-то не понял... overflow же отвечает за "обрезку" содержимого, если оно выходит за пределы родительского блока? P.S.: спасибо за мгновенный ответ. Не успел отредактировать пост, а уже...
  14. Lex-DRL
    3-ий день мучаюсь - не удаётся решить банальнейшую задачу. Родительский блок содержит 2 дочерних, которые располагаются друг за другом. Родительский блок должен "окружать" дочерние - а вместо этого он рисуется, словно ничего внутри него нет: HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml" lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Simple Test | Простой тест</title> <link type="text/css" rel="stylesheet" media="all" href="simpletest.css"> </head> <body> <div id="page"> <div id="page-back">Текст в блоке "page-back"</div> <div id="page-front">Текст в блоке "page-front"</div> </div> </body> </html> CSS: BODY, *, * html { border: none; background: none; margin: 0; padding: 0; } #page { background: black; color: white; padding: 10px; } #page-back, #page-front { float: left; width: 50%; } #page-back { background: green; } #page-front { background: blue; } Пробовал по всякому играться с параметрами height и min-height - проблема остаётся. Если у дочерних блоков убрать float - родительский рисуется как подобает. Но мне-то надо расположить их "side-by-side". Что я задал неправильно? Читал тут и тут - не помогает.
  15. Lex-DRL
    Благодарю. Ушёл дальше тискать CSS. Тему можно закрывать. P.S.: инфу о подобных комбинациях селекторов имеет смысл добавить в шаг за шагом по CSS.
×
×
  • 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

  I accept