помогите с кнопкой

[yujin11]

Всем доброго времени суток. Помогите пожалуйста начинающему верстальщику.

И так, суть проблемы: есть нарисованная картинка (кнопка без текста), хочу сделать её ссылкой, к примеру "Домой". Да так, что бы ссылкой была не только надпись внутри кнопки к примеру (<a href="#">Домой</a> в этом случае ссылкой будет надпись, а картинка (кнопка) будет как бекграунд), а ссылкой была вся кнопка + надпись "Домой" и так, что бы при изменении позиции кнопки, текст ссылки "Домой" (или любой другой) изменялся вместе со всей кнопкой. Т.е как бы кнопка - это контейнер ссылающееся на какую либо страницу и внутри неё находится описание этой ссылки к примеру ("домой" или "подробней" или "о нас"). Заранее спасибо.

[wildhind]

Мутно как-то описано.

a {
display:block;
width: по_ширине_картинки;
height: по_высоте_картинки;
}

это имелось в виду?

[yujin11]

Я подсмотрел один код, он выглядел приблизительно так:

<div class="button"><a class="b-button" href="#" title="Домой"><span>Домой</span></a></div>

а в CSS было приблизительно так:

.b-button {

background:url(button.png)

width

heigt

}

Я пытался сделать по этой технологии, но ничего не получалось.

Может по тому, что я в этом коде больше половины не понимаю.

[wildhind]

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

[Safronik]

а что если засунуть кнопку в ссылку?

<a class="b-button" href="#" title="Домой">
    <div class="button">Бла-бла-бла я текст на кнопке</div>
</a>

или так:

<a class="b-button" href="#" title="Домой">
    <img src="button.jpg" /> <!-- Текст кнопки находится  в самом рисунке, что не очень удобно -->
</a>

Edited March 27, 2011 by Safronik

[yujin11]

а что если засунуть кнопку в ссылку?

<a class="b-button" href="#" title="Домой">
    <div class="button">Бла-бла-бла я текст на кнопке</div>
</a>

или так:

<a class="b-button" href="#" title="Домой">
    <img src="button.jpg" /> <!-- Текст кнопки находится  в самом рисунке, что не очень удобно -->
</a>

Сам не знаю. Попробую.

Вот, кстати, на Светлану ругаешься, а лучше прочитай у неё мудрые правила в подписи. Здесь они применимы как нельзя более в тему.

Правила - правилами, но мне нужна помощь, а не критика+подзотыльники+марш в угол неуч!

а что если засунуть кнопку в ссылку?

<a class="b-button" href="#" title="Домой">
    <div class="button">Бла-бла-бла я текст на кнопке</div>
</a>

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

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

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

В оригинале этот код выглядит так:

HTML

<div class="container">
                	<div class="fright"><a class="s_button" href="http://"><span>Download Now</span></a></div>
                	<h2 class="cont_design_title">бла бла бла всякий текст на вражеском</h2>
                </div>

CSS

.fright {float:right !important;}
s_button{ visibility: hidden !important; }
.s_button {display:block; background:url(../images/buttons/s_button.png) 0% 0%; }
	.s_button span {display:block; background:url(../images/buttons/s_button.png) 100% 0%; padding:19px 40px 21px;font-size:20px; color:#fff; text-decoration:none; cursor:pointer; line-height:1.2em}
	.s_button:hover {background:url(../images/buttons/s_button.png) 0% -65px; }
	.s_button:hover span {background:url(../images/buttons/s_button.png) 100% -65px}

Edited March 27, 2011 by yujin11

[wildhind]

а что если засунуть кнопку в ссылку?

<a class="b-button" href="#" title="Домой">
    <div class="button">Бла-бла-бла я текст на кнопке</div>
</a>

Блочные элементы нельзя внутрь строчных запихивать. И <div> тут не нужен.

или так:

<a class="b-button" href="#" title="Домой">
    <img src="button.jpg" /> <!-- Текст кнопки находится  в самом рисунке, что не очень удобно -->
</a>

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

Правила - правилами, но мне нужна помощь, а не критика+подзотыльники+марш в угол неуч!

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

Мне именно такая помощь помогла освоить вопросы вёрстки за довольно короткий срок.

Хотите учиться — учитесь. Хотите, чтобы за вас сделали — марш в раздел коммерческих услуг.

[PanSoul]

А не проще ссылку блочной сделать и задать ей бэкграунд в виде вашей кнопочки?

HTML

<a class="r1" href="#">
	Home
</a>

CSS

.r1{
	width:60px;/*ширина твоей картинки-кнопки*/
	height:40px;/*высота твоей картинки-кнопки*/
	display:block;
	background:#eee;/*путь к твоей картинке-кнопке*/
}

P.S. или суть проблемы в другом?

Edited March 28, 2011 by PanSoul

[yujin11]

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

Edited March 28, 2011 by yujin11

[swetlana]

А не проще ссылку блочной сделать и задать ей бэкграунд в виде вашей кнопочки?

если б было проще, наверно автор бы так и сделал после первого же ответа, не так ли?

P.S. или суть проблемы в другом?

конечно в другом. Думать неохота.

[PanSoul]

если б было проще, наверно автор бы так и сделал после первого же ответа, не так ли?

конечно в другом. Думать неохота.

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

да и в сущности проблему решили, какую описал- такую и решили

Edited March 29, 2011 by PanSoul