Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 40
Как по мне, то это решение настолько известное, насколько и не очень практичное, из-за задания высоты блоку и прочих прелестей фиксированных размеров.
Посмотрите, что происходит если набить много контента jsfiddle.net/29YpB/2/.
А если поставить для таба overflow, то контент естественным образом обрежется.
Посмотрите, что происходит если набить много контента jsfiddle.net/29YpB/2/.
А если поставить для таба overflow, то контент естественным образом обрежется.
Я совсем не верстальщик, но с точки зрения программиста эти «92px», «184px», "-36px" выглядят говнокодом.
Соглашусь с предыдущим оратором. Меня всегда отталкивала верстка, так как куда бы я ни глянул, всюду присутствует подобные строчки и значения. Я даже и программером то не совсем являюсь, но считаю подобные вещи просто ужасными. Это все равно что писать, ну, не знаю, программу считающую корни уравнения и аргументы этого уравнения заранее предопределять в коде же программы. После чего каждый раз, когда надо будет посчитать это же уравнение от других аргументов, переписывать всю программу с нуля. Как-то так это видится мне.
Немного перефразирую, это все равно что искать те значения для написанной программы, при которых она не будет вылетать. А потом представлять этот продукт заказчику, демонстрируя её на этих тщательно подобранных аргументах.
Если эта программа написана в каком-нибудь Delphi — то да. Во всех же нормальный тулкитах пользуются layout-ами.
Ну и в Delphi никто не мешает использовать layout'ы. Тут проблема, скорее, в прямоте рук, а не в используемом инструменте.
А теперь подскажите аналог работающий во всех современных, и не очень, браузерах?
Уот эти ребята
Правда мне сейчас начнут говорить что это не css вовсе, ведь тут есть и переменные, и функции.
А для особо страждущих — все отступы и пикселя можно задать в одном месте.
Правда мне сейчас начнут говорить что это не css вовсе, ведь тут есть и переменные, и функции.
А для особо страждущих — все отступы и пикселя можно задать в одном месте.
В GTK+ правильно сверстанной форме будут максимум отступы.
Как бы да, но эти значения нужно подбирать под конкретный случай и конкретный шрифт.
В примере можно было написать и что-то вроде "-3em", «10em», но это лишь для красоты, суть не меняется.
В примере можно было написать и что-то вроде "-3em", «10em», но это лишь для красоты, суть не меняется.
В вёрстка главное, чтобы работало всё :)
У этого даже термин есть — «magic numbers» ;-)
Обычно на практике, в отличие от учебных примеров, требуется сделать выделение текущего таба (поменять его класс), или даже выполнить какие-то действия при переключении табов. Так что в редких случаях удается обойтись без JS.
Однажды встречал похожий рецепт для табов.
Чуть ли не единственный пример в рунете, безусловно неплох и от известного блоггера.
Но этот пример сделан на позиционировании, а тот — float раскладкой.
Контент неактивных табов там скрывается из потока свойством display, тут — спрайтом.
Опять же jquery…
Если похожесть выражается лишь в использовании семантичной разметки, тогда конечно похож :)
К слову, можно попробовать реализовать подобное с помощью :target (без скрипта), но не очень представляю как управлять display none/hidden, чтобы по дефолту отображался первый таб.
Но этот пример сделан на позиционировании, а тот — float раскладкой.
Контент неактивных табов там скрывается из потока свойством display, тут — спрайтом.
Опять же jquery…
Если похожесть выражается лишь в использовании семантичной разметки, тогда конечно похож :)
К слову, можно попробовать реализовать подобное с помощью :target (без скрипта), но не очень представляю как управлять display none/hidden, чтобы по дефолту отображался первый таб.
Там ограничений куда меньше, чем у вас. И каждый таб не приходится подбирать по размерам, а потом все следующие после него сдвигать. Вы избавились от 1 не совсем проблемы, а повесили на себя пучок других.
Как говорится — овчинка выделки не стоит
Как говорится — овчинка выделки не стоит
да, :target для этих целей подходит сильно лучше, но есть нюанс: прыгает браузер( в смысле, скролл позиционируется к таргету, а это гадко(
Так можно сам :target объект разместить так, чтобы он был внахлёст к табам, и через margin-top или position: relative сделать так, чтобы визуально он отображался уже там, где надо.
Тогда браузер при клике по табу проскроллит страницу до таба, т.е. до туда, куда юзер только что сделал клик, что уже не так гадко, а как минимум логично, и может вовсе оказаться удобно.
Тогда браузер при клике по табу проскроллит страницу до таба, т.е. до туда, куда юзер только что сделал клик, что уже не так гадко, а как минимум логично, и может вовсе оказаться удобно.
Табы на AP и фиксированно прописанной ширине — это ад. Лучше уж несемантичные, но резиновые.
По сути после «Совсем недавно начал осваивать» и «гугл не находит» можно не читать, ибо то, что вы изложили совсем неудобно использовать. А ищется по строке "css target tab" совсем легко (1, 2...). Js != зло и местами его нужно использовать ;).
А зачем?
Какие они, нафиг, семантические, если смысл dl/dt/dd — это список определений, а не табы? Это издевательство над тем, что вы называете семантикой.
Фиксированная высота для области контента, очень дурной тон.
Так же, как сказал tegger, defenition list, тут по семантике не подходит.
Так же, как сказал tegger, defenition list, тут по семантике не подходит.
«обнаружил, что гугл не находит ни одного готового решения»
увы, это автор не находит. Поисковая строка «css tabs dd» дает достаточно всякого.
увы, это автор не находит. Поисковая строка «css tabs dd» дает достаточно всякого.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Семантические табы из dl/dt/dd без скриптов