burzilov Sep 16 2008 at 11:53

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

3 min

Website development*

+26

Comments 55

bobrob Sep 16 2008 at 12:13

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

-4

burzilov Sep 16 2008 at 12:17

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

XaocCPS Sep 16 2008 at 12:20

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

bobrob Sep 17 2008 at 12:51

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

-2

burzilov Sep 17 2008 at 12:59

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

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

NamelessOne Sep 16 2008 at 12:21

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

NamelessOne Sep 16 2008 at 12:24

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

webmolot Sep 16 2008 at 14:24

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

burzilov Sep 16 2008 at 12:25

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

NamelessOne Sep 16 2008 at 12:27

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

set Sep 16 2008 at 12:31

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

burzilov Sep 16 2008 at 12:39

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

yroman Sep 16 2008 at 15:08

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

burzilov Sep 16 2008 at 15:11

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

NamelessOne Sep 16 2008 at 15:21

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

XAMelleOH Sep 16 2008 at 23:32

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

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

spyfzm Sep 16 2008 at 12:29

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

spyfzm Sep 16 2008 at 12:31

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

burzilov Sep 16 2008 at 12:35

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

spyfzm Sep 16 2008 at 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 Sep 16 2008 at 13:10

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

spyfzm Sep 16 2008 at 13:17

slil.ru/26149698

burzilov Sep 16 2008 at 13:21

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

spyfzm Sep 16 2008 at 13:25

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

spyfzm Sep 16 2008 at 13:24

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

burzilov Sep 16 2008 at 13:25

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

hlomzik Sep 17 2008 at 13:30

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

websapiens Sep 16 2008 at 12:29

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

NamelessOne Sep 16 2008 at 14:23

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

burzilov Sep 16 2008 at 14:25

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

websapiens Sep 16 2008 at 15:06

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

camperov Sep 16 2008 at 22:12

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

UFO just landed and posted this here

Tvarb Sep 17 2008 at 17:39

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

burzilov Sep 17 2008 at 17:47

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

Tvarb Sep 17 2008 at 18:40

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

burzilov Sep 18 2008 at 10:04

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

caIIIa Oct 28 2008 at 17:34

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

burzilov Oct 28 2008 at 17:36

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

caIIIa Oct 28 2008 at 17:45

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

burzilov Oct 28 2008 at 17:47

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

caIIIa Oct 28 2008 at 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 Oct 28 2008 at 18:00

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

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