Кнопка

BetaVersion · March 25, 2012

Допустим, я хочу сделать стилизированную кнопку.

Что я уже имею:

Фон

Кнопка в *png покоя

Кнопка в *png hover

Содержимое index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
<title>Титул</title>
</head>
<body>
	<div id='wrapper'>
		<div id='sale'>
		</div>
	</div>
</body>
</html>

Содержимое style.css

/* CSS Document */

html, body {
margin: 0;
height: 100%; 
color: #b48788; 
font-family: Tahoma, Arial, Vernada; 
font-size: 11px; 
background: url(images/bg.jpg) repeat;
}

#wrapper {
padding: 0px; 
height: 100% !important;
width: 1000px;
margin-left: auto; 
margin-right: auto;
}

img {
border: 0px;
}

#sale	{
margin-left: 390px;
padding-top: 570px;
background: url(images/sale.png) no-repeat;
}

#sale:hover	{
margin-left: 390px;
padding-top: 570px;
background: url(images/sale_h.png) no-repeat;
}

Но тут у меня сразу 2 проблемы!

В скриншотах они ясны

Первый скриншот, кнопка в покое

Второй скриншот, кнопка hover

Почему, когда я назначаю кнопке место, она просто сверху ровно по центру документа?

И почему (главный вопрос), кнопка hover , когда мышка в почти любой области документа, а не только на самой картинке?

Размер картинки (кнопки) 166х52 в покое и 166х52 hover. Благодарю!

Chuv · March 25, 2012

display:inline-block добавьте к #sale. И укажите высоту и ширину блока равную высоте и ширине изображения.

alexandr_v-vich · March 25, 2012

Поставьте #sale бордер какой-нибудь заметный. Половину проблем, думаю найдёте сами)

NeoXidizer · March 25, 2012

потому что не верно используете css свойства

padding-top - вы расширяете сам элемент на 500 пикселей

за неимением изображений нормально протестировать не могу, но как-то так

html, body {
margin: 0;
padding:0;
height: 100%; 
color: #b48788; 
font-family: Tahoma, Arial, Vernada; 
font-size: 11px; 
background: url(images/bg.jpg) repeat;
}

#wrapper {
height: 100% !important;
width: 1000px;
margin:0 auto;
}

img {border: 0;}

#sale   {
width:166px;
height:52px;
background: url(images/sale.png) no-repeat;
}

#sale:hover {
background: url(images/sale_h.png) no-repeat;
}

BetaVersion · March 25, 2012

Спасибо всем, а вот, NeoXidizer, как разместить кнопку в нужном мне месте?

NeoXidizer · March 25, 2012

это уже зависит от остальных элементов на странице, телепатов здесь нет, чтобы знать, что у вас там еще и что именно вам нужно

BetaVersion · March 25, 2012

Ну вот это и есть вся страничка, весь код я разместил.

/* CSS Document */

html, body {
margin: 0;
height: 100%; 
color: #b48788; 
font-family: Tahoma, Arial, Vernada; 
font-size: 11px; 
background: url(images/bg.jpg) repeat;
}

#wrapper {
padding: 0px; 
height: 100% !important;
width: 1000px;
margin-left: auto; 
margin-right: auto;
}

img {
border: 0px;
}

#sale	{
display:inline-block;
margin-left: 390px;
padding-top: 570px;
height:	52 px;
width: 166px;
background: url(images/sale.png) no-repeat;
}

#sale:hover	{
margin-left: 390px;
padding-top: 570px;
height:	52 px;
width: 166px;
background: url(images/sale_h.png) no-repeat;
}

Сделал так и hover'овский эффект теперь только по оси у тянется вниз, примерно на 500 px.

Sign In

Кнопка

Question

BetaVersion

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Chuv

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

NeoXidizer

Link to comment

Share on other sites

BetaVersion

Link to comment

Share on other sites

NeoXidizer

Link to comment

Share on other sites

BetaVersion

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information