burzilov 16 сен 2008 в 11:53

Веб-приложение, одна маленькая особенность верстки

3 мин

Веб-разработка*

+26

Комментарии 55

bobrob 16 сен 2008 в 12:13

ну и что тут сложного или уникального чтобы аж писать статью?

burzilov 16 сен 2008 в 12:17

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

XaocCPS 16 сен 2008 в 12:20

все гениальное — просто, не за что осуждать автора
полезный пост, который при случае можно будет развить далеко за пределы статьи

bobrob 17 сен 2008 в 12:51

сколько у меня минусов по верхнему посту — столько непрофесоинальных разработчиков прочитала эту статью и нашла в ней что-то уникальное. проблема рабочая, и решение не сложное. Жду от автора следущую сатью про то как он заключил заголовок в теэги h1.

burzilov 17 сен 2008 в 12:59

Не буду извиняться за минусующих, это их право и личное решение…

Для элементарных задач всегда есть куча примеров и советов. Тем не менее, удовлетворяющего меня решения в инете я не нашёл.
Если Вам известны места в сети, где описан этот способ решения проблемы, дайте знать, пожалуйста.

NamelessOne 16 сен 2008 в 12:21

Добрый день
Вот тут есть пример реализации подобного (и более сложных макетов) без ресурсоемкого expressions — очень рекомендую:
www.dynamicdrive.com/style/layouts/category/C11/
Уже полгода ем и нахваливаю :)

NamelessOne 16 сен 2008 в 12:24

Есть еще задача, которую решить без таблиц мне пока не удалось, и я не уверен, что это вообще возможно. Сделать макет, состоящий из шапки переменной высоты (в зависимости от ее контента) и области контента, чтобы она была скроллируемой. И чтобы все это дело тянулось на 100% высоты.
Если кто-то знает, как сие шаманство можно сделать — расскажите, пожалуйста, думаю, не одному мне полезно будет.

webmolot 16 сен 2008 в 14:24

Спасибо, раньше не встречал такого красивого решения.

burzilov 16 сен 2008 в 12:25

Огромное спасибо за полезную ссылочку! И где вы были вчера? :)

NamelessOne 16 сен 2008 в 12:27

Пользуйтесь на здоровье :)

set 16 сен 2008 в 12:31

имхо, оба варианта имеют право на жизнь ;) кстати, спасибо за ссылочку, действительно раньше не встречал её…

burzilov 16 сен 2008 в 12:39

Стараюсь код делать как можно компактнее, а в примере под ссылочкой даже дополнительный обертывающий див… Но я нисколько не умаляю полезность этого ресурса, там же практически на все случаи жизни есть примеры!

yroman 16 сен 2008 в 15:08

клёво конечно, да только там IE6 работает в quirks режиме, что не всегда приемлимо

burzilov 16 сен 2008 в 15:11

Ой, да, действительно :) Вот и ещё один гол в мою пользу :)

NamelessOne 16 сен 2008 в 15:21

B без него работает — проверено.
В самом деле, у обоих решений свои плюсы. На сложном макете, где несколько раз используется вложенность всей этой конструкции, проще добавить лишний div обертки, чем мириться со слабой производительностью expressions

XAMelleOH 16 сен 2008 в 23:32

www.dynamicdrive.com/style/layouts/item/css-top-frame-layout/

— в Опере 9.52 при скроллинге траблы.

spyfzm 16 сен 2008 в 12:29

При сужении окна (ФФ 3) внизу появляется полоса прокрутки, но она съедается правым краем окна. Кнопка «вправо» полосы прокрутки становится не видна, вместе с частью полосы прокрутки.
Вы такого эффекта хотели добиться? По-моему полоса прокрутки должна быть всегда доступна, если есть что прокручивать.
Прошу прощения за повторения в комментарии.

spyfzm 16 сен 2008 в 12:31

Пардон, кажется я не понял, видимо нужна была прокрутка «вверх-вниз»…

burzilov 16 сен 2008 в 12:35

Я попробовал, но так и не смог воспроизвести Ваши действия с ФФ. При сужении окна ФФ до величины, меньшей, чем сумма ширин обоих блоков, внизу страницы действительно появляется горизонтальная полоса прокрутки (ширины блоков фиксированные), но правая кнопка прокрутки находится на своем месте и нормально работает. У Вас ФФ какой версии?

spyfzm 16 сен 2008 в 13:08

Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1
Скриншота приложить не смогу, ни одного графического редактора в системе, даже Paint'а. Админы увлекаются самосборкой виндовс, а им потом пользоваться нельзя =(

burzilov 16 сен 2008 в 13:10

MS Office есть? В Word вставьте после PrintScreen, и выложите плиз на какой-нить файлообменник (например, zalil.ru)

spyfzm 16 сен 2008 в 13:17

slil.ru/26149698

burzilov 16 сен 2008 в 13:21

Мдя… Действительно, очень странно…
Народ! Кто-нибудь знает, что может быть причиной токого поведения горизонтальной прокрутки в ФФ?

spyfzm 16 сен 2008 в 13:25

Чуть ниже мое мнение с извинениями.

spyfzm 16 сен 2008 в 13:24

Кажется, это проблема ФФ с его GUI, сделанном на Chrome и к верстке никакого отношения не имеет. Другие win-окна с нижней прокруткой работают нормально, ФФ делает так на любой странице. Хотя возможно что это так только на этой отдельно взятой собранной виндовс. Извините, что потревожил.

burzilov 16 сен 2008 в 13:25

Да не стОит, какие уж тут тревоги :)

hlomzik 17 сен 2008 в 13:30

А у меня та же проблема… ФФ и винда обычные.
При уменьшении окна горизонтальный скрол обрезает справа и окошко подергивается слегка.
3.0.1

websapiens 16 сен 2008 в 12:29

Интересное решение!

NamelessOne 16 сен 2008 в 14:23

Позитивный какой пост получился неожиданно :)

burzilov 16 сен 2008 в 14:25

Немного плюсиков не хватает для выхода на главную страницу :)

websapiens 16 сен 2008 в 15:06

На главной обсуждение пошло бы быстрее

camperov 16 сен 2008 в 22:12

Сегодня долго провозился с почти такой же проблемой. В итоге небольшая недоработка для Firefox-а осталась.
Завтра исправлю, используя ваше решение =) Спасибо.

НЛО прилетело и опубликовало эту надпись здесь

Tvarb 17 сен 2008 в 17:39

А об отрицательных полях не думали?

burzilov 17 сен 2008 в 17:47

Думал, конечно, не выходило… Буду очень рад, если у Вас окажется рабочий примерчик с отрицательными полями, и Вы поделитесь с нами кодом :)

Tvarb 17 сен 2008 в 18:40

именно со скролингом нету (может быть и из-за него такое решение и у Вас).
А фиксации подвала или шапки а все остальное на 100%, есть много.
Причем через отрицательные поля, поэтому и спросил думали ли об этом.

burzilov 18 сен 2008 в 10:04

Да, основная задача, которую я рассматривал, это именно растягивание дива по высоте страницы плюс запрет скроллинга самой страницы… Задача наверняка редковстречающаяся, потому и описал её здесь.

caIIIa 28 окт 2008 в 17:34

No comments…
Следующая статья наверно будет про замену подчёркивания ссылок пунктиром…

burzilov 28 окт 2008 в 17:36

О! А расскажите, плиз, как это можно сделать? Чтоб и в ИЕ6 работало тоже…

caIIIa 28 окт 2008 в 17:45

«Втупую» как минимум двумя способами :)

burzilov 28 окт 2008 в 17:47

Ну? Поделитесь эзотерикой?

caIIIa 28 окт 2008 в 17:55

Я, конечно, не верю, что вы этого не знаете, но продолжим «тупить» на потеху общественности :)

способ №1
a, a:visited {text-decoration:none; border-bottom:1px dashed}

способ №2
a, a:visited {text-decoration:none; background: url('/path_to/dashed.gif') 100% 0% no-repeat}

burzilov 28 окт 2008 в 18:00

Вынужден Вас огорчить (хотя, может быть, Вы и не огорчитесь), но первый способ неправильно «эмулирует» подчёркивание, т. к. оно должно пересекать части символов, находящиеся ниже text-line (например, хвостик у строчной буквы «р»), а второй — хоть и может расположить подчеркивание на нужном вертикальном уровне, но не может расположить его поверх свисающих «хвостиков», как хотелось бы…

Вобщем, тема для размышлений, спасибо за наводку!