Comments 56
Спасибо, интересное решение. В избранное.
Забавно) Но со спанами конечно некий изврат получается. Так же, можно снобически заявить, семантика кода теряется.
теряется к сож. :( но решение с таблицами не более семантичное + приносит с собой ещё и другие «прелести»
есть и другие решения, например :)
<span><b></b><i></i><em></em><q></q>Приемы для JavaScript</span>
Не меньший изврат чем со спанами... :)
А я так делаю:
<div class="content">
<div class="content_top_left"></div><div class="content_top_right"></div>
<div class="content_body">
тут контент
</div>
<div class="content_bottom_left"></div><div class="content_bottom_right"></div>
</div>
<div class="content">
<div class="content_top_left"></div><div class="content_top_right"></div>
<div class="content_body">
тут контент
</div>
<div class="content_bottom_left"></div><div class="content_bottom_right"></div>
</div>
Вот реализации данного способа с комментариями(там архивчик с HTML, CSS ну и картинкой 5КБ):
http://www.fileqube.com/shared/fbPzffY53…
Если че непонятно спрашивайте.
Проверял в IE, Safari, FF. Валидный XHTML и CSS.
http://www.fileqube.com/shared/fbPzffY53…
Если че непонятно спрашивайте.
Проверял в IE, Safari, FF. Валидный XHTML и CSS.
В Вашем решении много лишней разметки, и пустые див-ы, что есть плохо.
я не согласен с вами. как я понял, лишней разметкой вы называете классы, но если делать без них (и даже со спанами вместо дивов) могут полететь стили в других частях страницы. Конечно можно все это положить в див "menu" и в стилях прописывать ".menu ul li..." . но описанный выше код с дивами более читабельный и понятный (что же он действительно делает), а в дивы можно и пробельчик положить))
Что есть то есть=) Я же не говорю, что данное решение, единственное. Просто мне оно нравится. И всетаки, я прошу вас(уже 2 раз): выложите пример плз. Я вот выложил=)
Кстати, мб добавите данный пример в текст топика? Просто как еще один вариант(вполне себе жизнеспособный). А людям полезно будет, и тема будет более раскрыта.
у нас есть:
1. li
2. li a
3. li: before
4. li: after
5. a: before
6. a: after
этого с головой хватит для чего угодно.
а для 99% меню (где ширина или высота фиксированны) хватит просто li и a.
1. li
2. li a
3. li: before
4. li: after
5. a: before
6. a: after
этого с головой хватит для чего угодно.
а для 99% меню (где ширина или высота фиксированны) хватит просто li и a.
соответственно нужны как минимум 8 (!) елементов
ну зачем 8? можно же воспользоваться css-спрайтами... получится немного универсальней, чем у вас + сама картинка легче выйдет...
ну зачем 8? можно же воспользоваться css-спрайтами... получится немного универсальней, чем у вас + сама картинка легче выйдет...
Думаю, Вы что-то путаете, в статье речь о другом, сss-спрайты используються немного для другого и к теме отношения не имеют. Или я Вас неправильно понял?
:) хм... я имел ввиду, что как раз вот те 8 картинок, о которых вы писали, можно легко объеденить в одну картинку и в стиле указать нужную позицю фона для каждого спана, что вы по сути и сделали. разница лиш в весе картинки и ограничениях в размере... в вашем варианте эти недостатки есть, в моём - нету, хотя в данном примере, это и не принципиально :)
UFO just landed and posted this here
Я сделал почти тоже самое, но проще.
В css'е пишем (где lin_a и lin это ссылки на фон, можно заменить просто цветом):
#active {
background-image:url('lin_a.jpg');
}
#no {
background-image:url('lin.jpg');
}
А само меню будет писатся так:
<a href="#"><div onmouseover="id='active'" id="'no'" onmouseout="id='no'">ссылка</div></a>
Вот так это выглядит в живую (при желании можно всё это поместить в ещё один див и сделать обводку, или просто воспользоватся бордерами):
В css'е пишем (где lin_a и lin это ссылки на фон, можно заменить просто цветом):
#active {
background-image:url('lin_a.jpg');
}
#no {
background-image:url('lin.jpg');
}
А само меню будет писатся так:
<a href="#"><div onmouseover="id='active'" id="'no'" onmouseout="id='no'">ссылка</div></a>
Вот так это выглядит в живую (при желании можно всё это поместить в ещё один див и сделать обводку, или просто воспользоватся бордерами):
1. div в a НЕ валидно
2. javascript - плохо
И, ребят, вы статью читали? Она не о том "как при наведении менять картинку", а как реализовать "тянущиеся" кнопки.
2. javascript - плохо
И, ребят, вы статью читали? Она не о том "как при наведении менять картинку", а как реализовать "тянущиеся" кнопки.
если это камень и в мой огород, то совершенно напрасно, я прекрасно понял, о чём речь, может не совсем понятно выразился - это да... но я уже пояснил, что имелось ввиду...
если валидно, то:
и:
.active {
background-image:url('lin_a.jpg');
}
.no {
background-image:url('lin.jpg');
}
a {
display:block;
}
и:
<div onmouseover="className='active'" class="'no'" onmouseout="className='no'"><a href="#">ссылка</a></div>
вот уж точно жуткий и не валидный изврат, простите за резкость...
мамочки, из Индии Хабр тоже виден?
предлагаю товарища сильно не минусовать :) все мы с чего-то начинали
Кстати, следующей статьей может быть тема о том, как сделать роловеры на основе данной методики.
UFO just landed and posted this here
Кнопка, в примере, могла-бы быть и по афигеннее =)... Ну а так, спасибо конечно, в закладки!
UFO just landed and posted this here
Интересное решение, спасибо! Я честно говоря вначале немного невнимательно прочитал и долго въезжал, как такое получается )
Спасибо. Долго мучался над проблемой. Наконец-то нашел решение
Решение этой проблемы так же описано у лебедева:
http://www.artlebedev.ru/tools/technogrette/html/framed/
Там решение более сложное, но и задача там посложнее :)
http://www.artlebedev.ru/tools/technogrette/html/framed/
Там решение более сложное, но и задача там посложнее :)
Отлично, спасибо!
Да, семантика и впрям малость страдает, а в целом прикольное решение, куда удобнее, на мой взгляд, чем использование таблиц
Коллеги, а часто ли у вас возникает подобная задача: "Задача состоит в том, чтобы сделать эту кнопку пунктом меню, причем так, чтобы она могла тянуться и по горизонтали и по ВЕРТИКАЛИ."?
По моему надуманная задача, в большинстве случаев это портит задуманный дизайнером вид.
И достаточно было бы всего две картинки и одного вложенного span'а, чтобы справиться с задачей.
Только не кажется ли вам (как уже было замечено выше), что действительно страдает семантика такой верстки.
Весь смысл решения заключается в том, чтобы при изменении файла стилей менялось отображение списка.
Ну ладно, если бы был добавлен всего один span, чисто для "закрытия" правого края кнопки, но ТРИ - imho перебор.
Практического смысла в примере ноль, а вот обучающего - масса.
И расценивать топик надо именно так, а не как руководство к действию
По моему надуманная задача, в большинстве случаев это портит задуманный дизайнером вид.
И достаточно было бы всего две картинки и одного вложенного span'а, чтобы справиться с задачей.
Только не кажется ли вам (как уже было замечено выше), что действительно страдает семантика такой верстки.
Весь смысл решения заключается в том, чтобы при изменении файла стилей менялось отображение списка.
Ну ладно, если бы был добавлен всего один span, чисто для "закрытия" правого края кнопки, но ТРИ - imho перебор.
Практического смысла в примере ноль, а вот обучающего - масса.
И расценивать топик надо именно так, а не как руководство к действию
Вот как с подобной задачей справился я — http://pavelgorlov.ru/fzform/
То, что нужно. +1
Как насчёт неизвестного фона под этой кнопкой, который не позволяет сделать углы картики белыми?
Спасибо!
Информативно!
Информативно!
Sign up to leave a comment.
Верстка: реализация «резиновых» кнопок