Простите, что отвлекаю
Вопрос-картинка

Linux Nix Web Development - http://linuxoids.org/ размер 400x200, 8.27 kb

Tagged with →  

37 Responses to Простите, что отвлекаюВопрос-картинка

  1. HneZZ:

    ОднаЕще одна

    bla bla blaбла бла бла

  2. HneZZ:

    блин
    в общем я хотел сказать — табоицей

  3. U4Zero:

    line-height одинаковый, не?

  4. Vosam:

    Сверху паддингом надо просто добить левую колонку, иначе дюже высокие будут элементы под «Одна».

  5. LamYes:

    Простите, что отвлекаю, а зачем?
    Очень интересует какие принципы построения веб-интерфейсов привели к такой странной задаче?

  6. Ylfer:

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

  7. Ksmoff:

    див-контейнер на всю длину и ширину ячейки таблицы как relative
    вложенный див-absolute с отрицательным margin’ом.

  8. Kihodin:

    Да вы ебанулись тут все что ли?
    line-height и vertical-alignment

  9. Kihodin:

    открываем для себя существование типографских сеток [x]

  10. Ylfer:

    первого достаточно, а со вторым ты ошибся и оно не решает проблем, а лишь их умножает

  11. Ylfer:

    у нас тут всё же блог специалистов, попрошу прокомментировать несоглсного с моим высказыванием выше. Пока комментария нет, задай себе вопрос — что будет, если в левой колонке ссылка в меню будет длянной и не поместится в одну строку? А что будет, если в две строки будет заголовок? Или всё сразу?

  12. 1p_Velo:

    UL or not UL?

  13. U4Zero:

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

    Теперь по делу: такая задача вполне выполнима и дизайнерское мнение визуально приятное. Взять два дива и хуйнуть флоат лефт дизайнер и сам может.

  14. Ylfer:

    это не укор, а наблюдение. Я стою на позиции, что авторам подобных решений необходимо разъяснять их недостатки, и если они готовы с ними — делать как просят. Уходить мне, слава богу, никуда не надо — я не верстальщик и совместно дизайнерами не работаю.

  15. Halgreen:

    line-height + padding для левой колонки

  16. Ylfer:

    G-Killah: только padding, я выше указал возможные недостатки line–height

  17. Xxeblack:

    ты бездумную дрочку на сеточки/линеечки и перекор всем принципам видишь в примере, приведённом тобой выше? У меня для тебя плохие новости.

  18. UpaFcuk:

    Все размеры строк должны быть кратными. И отступы равны количеству строк. Консультируйтесь со своим дизайнером.

    Linux Nix Web Development - http://linuxoids.org/ размер 499x129, 24.26 kb

  19. AxoaTa:

    Это лечится. А если долго и внимательно сомтреть на оригинальную картинку, то там можно увидеть только один guide.

  20. Ylfer:

    я этого не говорил, это ты за меня додумал

  21. UpaFcuk:

    Если делать «контейнер строки» (строка+отступы) кратным 7px, например, то отпадает много гемороя.

    Linux Nix Web Development - http://linuxoids.org/ размер 449x290, 110.55 kb

  22. AxoaTa:

    Что такое 7px, если у пользователя масштабирование в браузере установлено 120%, а если 144%?

  23. UpaFcuk:

    подучу ка я CSS, провафлил что-то этот момент.

  24. Xuagreen:

    vertical-align: baseline;

  25. Ylfer:

    это здесь не нужно, ты ошибаешься

  26. Xuagreen:

    синяя черта на картинке — baseline.

    Linux Nix Web Development - http://linuxoids.org/ image

  27. UpaFcuk:

    Где можно побольше про это почитать?

  28. Ylfer:

    Синяя черта на картинке — это действительно базовая линия, но она является производным от кегля, который в тексте и заголовке разный. Определяющим свойством здесь является интерлиньяж (line-height), который как раз и является расстоянием между базовыми линиями.

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

    А теперь я бы хотел услышать, как ты решишь это с помощью vertical–align: baseline

  29. Xuagreen:

    я без HTML не вижу в чём у тебя проблема.

  30. Ylfer:

    у меня как раз-таки проблем нет. Просто расскажи, как ты решишь предложенную в посте задачу с помощью свойства vertical–align: baseline. Мне правда интересно.

  31. Xuagreen:

    vertical–align: baseline равняет элементы по бейзлайну, что и требуется. Не?

  32. Ylfer:

    ты неверно понимаешь vertical–align: baseline — он выравнивает дочерний элемент в пределах родительского, не более того. Например, картинку в тексте по отношении к его базовой линии оно поставить сможет, а выровнять текст в независимых контекстах — нет.

    В случае, когда у нас как минимум четыре элемента (общий контейнер, левая и правая колонка и заголовок) это свойство неприменимо. У нас будет три контекста базовых линий, которые не являются синхронными и задача как раз состоит не в том, чтобы что-то выровнять по базовой линии, а в том, чтобы эти базовые линии совпали. То есть ты смешал цель и средство.

    И самое главное — предложенное тобой значение свойства vertical–align является дефолтным. То есть ты можешь это не писать и всё равно vertical–align будет baseline.

  33. Xuagreen:

    я по картинке неебу что тебе надо. Раз куча несвязанных элементов, значит бейзлайн не подходит. Но я тут при чём?

  34. Ylfer:

    дефолтным для большинства элементов, но не для всех — sup и sub, разумеется, по дефолту выравниваются иначе

  35. Ylfer:

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

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

Добавить комментарий