@burzilov16 сен 2008 в 07:53

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

3 мин

3.1K

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

+26

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

@bobrob 16 сен 2008 в 08:13

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

@burzilov 16 сен 2008 в 08:17

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

@XaocCPS 16 сен 2008 в 08:20

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

@bobrob 17 сен 2008 в 08:51

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

@burzilov 17 сен 2008 в 08:59

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

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

@NamelessOne 16 сен 2008 в 08:21

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

@NamelessOne 16 сен 2008 в 08:24

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

@webmolot 16 сен 2008 в 10:24

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

@burzilov 16 сен 2008 в 08:25

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

@NamelessOne 16 сен 2008 в 08:27

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

@set 16 сен 2008 в 08:31

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

@burzilov 16 сен 2008 в 08:39

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

@yroman 16 сен 2008 в 11:08

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

@burzilov 16 сен 2008 в 11:11

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

@NamelessOne 16 сен 2008 в 11:21

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

@XAMelleOH 16 сен 2008 в 19:32

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

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

@spyfzm 16 сен 2008 в 08:29

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

@spyfzm 16 сен 2008 в 08:31

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

@burzilov 16 сен 2008 в 08:35

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

@spyfzm 16 сен 2008 в 09: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 в 09:10

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

@spyfzm 16 сен 2008 в 09:17

slil.ru/26149698

@burzilov 16 сен 2008 в 09:21

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

@spyfzm 16 сен 2008 в 09:25

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

@spyfzm 16 сен 2008 в 09:24

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

@burzilov 16 сен 2008 в 09:25

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

@hlomzik 17 сен 2008 в 09:30

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

@websapiens 16 сен 2008 в 08:29

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

@NamelessOne 16 сен 2008 в 10:23

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

@burzilov 16 сен 2008 в 10:25

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

@websapiens 16 сен 2008 в 11:06

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

@camperov 16 сен 2008 в 18:12

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

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

@Tvarb 17 сен 2008 в 13:39

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

@burzilov 17 сен 2008 в 13:47

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

@Tvarb 17 сен 2008 в 14:40

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

@burzilov 18 сен 2008 в 06:04

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

@caIIIa 28 окт 2008 в 14:34

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

@burzilov 28 окт 2008 в 14:36

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

@caIIIa 28 окт 2008 в 14:45

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

@burzilov 28 окт 2008 в 14:47

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

@caIIIa 28 окт 2008 в 14: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 в 15:00

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

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