Верстка: реализация «резиновых» кнопок

[unspecified]

Спасибо, интересное решение. В избранное.

[alexshelkov]

Спасибо конечно. Но можно, плз, работающий пример?

[neuotq]

Забавно) Но со спанами конечно некий изврат получается. Так же, можно снобически заявить, семантика кода теряется.

[zencd]

теряется к сож. :( но решение с таблицами не более семантичное + приносит с собой ещё и другие «прелести»

[sunnybear]

есть и другие решения, например :)

<span><b></b><i></i><em></em><q></q>Приемы для JavaScript</span>

[XAMelleOH]

Не меньший изврат чем со спанами... :)

[alexshelkov]

А я так делаю:

 <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>

[alexshelkov]

Вот реализации данного способа с комментариями(там архивчик с HTML, CSS ну и картинкой 5КБ):
http://www.fileqube.com/shared/fbPzffY53…
Если че непонятно — спрашивайте.
Проверял в IE, Safari, FF. Валидный XHTML и CSS.

[XAMelleOH]

В Вашем решении много лишней разметки, и пустые див-ы, что есть плохо.

[xzander]

я не согласен с вами. как я понял, лишней разметкой вы называете классы, но если делать без них (и даже со спанами вместо дивов) могут полететь стили в других частях страницы. Конечно можно все это положить в див "menu" и в стилях прописывать ".menu ul li..." . но описанный выше код с дивами более читабельный и понятный (что же он действительно делает), а в дивы можно и пробельчик положить))

[alexshelkov]

Что есть то есть=) Я же не говорю, что данное решение, единственное. Просто мне оно нравится. И всетаки, я прошу вас(уже 2 раз): выложите пример плз. Я вот выложил=)

[XAMelleOH]

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

[alexshelkov]

Кстати, мб добавите данный пример в текст топика? Просто как еще один вариант(вполне себе жизнеспособный). А людям полезно будет, и тема будет более раскрыта.

[XAMelleOH]

Нет, Ваш пример в текст топика не добавлю по той причине, что 1. Решение громоздкое. 2. Семантика страдает оч сильно ( в том числе пустые дивы) 3. Поставленной задаче пример не отвечает (малой кровью, а не кучей лишних дивов и картинок решить проблему)

[Delka]

у нас есть:
1. li
2. li a
3. li: before
4. li: after
5. a: before
6. a: after

этого с головой хватит для чего угодно.
а для 99% меню (где ширина или высота фиксированны) хватит просто li и a.

[set]

соответственно нужны как минимум 8 (!) елементов
ну зачем 8? можно же воспользоваться css-спрайтами... получится немного универсальней, чем у вас + сама картинка легче выйдет...

[XAMelleOH]

Думаю, Вы что-то путаете, в статье речь о другом, сss-спрайты используються немного для другого и к теме отношения не имеют. Или я Вас неправильно понял?

[set]

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

[ecl]

так речь об элементах или картинках, цитируете одно, говорите о другом.

[nvbn]

Я сделал почти тоже самое, но проще.
В 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>

Вот так это выглядит в живую (при желании можно всё это поместить в ещё один див и сделать обводку, или просто воспользоватся бордерами):

[XAMelleOH]

1. div в a НЕ валидно
2. javascript - плохо

И, ребят, вы статью читали? Она не о том "как при наведении менять картинку", а как реализовать "тянущиеся" кнопки.

[set]

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

[XAMelleOH]

Извините, действительно сразу неправильно Вас понял. :)

[nvbn]

если валидно, то:

.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>



[set]

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

[ecl]

мамочки, из Индии Хабр тоже виден?

[sunnybear]

предлагаю товарища сильно не минусовать :) все мы с чего-то начинали

[KonstRuctor]

Кстати, следующей статьей может быть тема о том, как сделать роловеры на основе данной методики.

[sunnybear]

а что тут сложного, извините? Просто добавляется еще несколько CSS-объявлений

[micktu]

Вы меня убили, никак не могу подняться. В избранное, быстрее же!

[pepelsbey]

Класс ) В точку!

[Elected]

Кнопка, в примере, могла-бы быть и по афигеннее =)... Ну а так, спасибо конечно, в закладки!

[vithar]

Считая вес картинки добавляйте к каждой минимум по 300 байт на HTTP-заголовки. И да, одна картинка на 2kб скачается быстрее, чем 4 картинки по 500 байт.

[vithar]

Страйт всегда будет лучше, если не брать клинические случаи.

[vithar]

Нет, это называется «у меня богатый опыт» и «я проводил исследования».

[syndicut]

Интересное решение, спасибо! Я честно говоря вначале немного невнимательно прочитал и долго въезжал, как такое получается )

[sparkle]

Спасибо. Долго мучался над проблемой. Наконец-то нашел решение

[balloon]

Решение этой проблемы так же описано у лебедева:
http://www.artlebedev.ru/tools/technogrette/html/framed/
Там решение более сложное, но и задача там посложнее :)

[installero]

Отлично, спасибо!

[amduscias]

Да, семантика и впрям малость страдает, а в целом прикольное решение, куда удобнее, на мой взгляд, чем использование таблиц

[Groove]

Коллеги, а часто ли у вас возникает подобная задача: "Задача состоит в том, чтобы сделать эту кнопку пунктом меню, причем так, чтобы она могла тянуться и по горизонтали и по ВЕРТИКАЛИ."?
По моему надуманная задача, в большинстве случаев это портит задуманный дизайнером вид.
И достаточно было бы всего две картинки и одного вложенного span'а, чтобы справиться с задачей.

Только не кажется ли вам (как уже было замечено выше), что действительно страдает семантика такой верстки.
Весь смысл решения заключается в том, чтобы при изменении файла стилей менялось отображение списка.
Ну ладно, если бы был добавлен всего один span, чисто для "закрытия" правого края кнопки, но ТРИ - imho перебор.

Практического смысла в примере ноль, а вот обучающего - масса.
И расценивать топик надо именно так, а не как руководство к действию

[XAMelleOH]

На самом деле статья последовала именно из "жизненного" примера. Как раз реализовал эту идею в рабочем проекте.

Понадобилась такая вещь именно потому что в кнопке могло быть 1-4 строки текста (но не более) и по ширине кнопка тянулась в некоторых небольших пределах.

[pgg]

Вот как с подобной задачей справился я — http://pavelgorlov.ru/fzform/

[art0]

кнопки не тянутся, только текст увеличивается

[pgg]

resize page по горизонтали.
там есть textarea, при смене картинок станет кнопкой

[websapiens]

То, что нужно. +1

[vithar]

Как насчёт неизвестного фона под этой кнопкой, который не позволяет сделать углы картики белыми?

[XAMelleOH]

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

[DEHisOK]

Спасибо!
Информативно!