Верстка кнопки

frog163 · February 11, 2012

Не получается сделать овальную динамичную кнопку с помощью картинок.

У меня 3 картинки - левый край, центр(полоска) и правый край.

CSS

background:url(левый_край.gif) no-repeat;
background:url(центр.gif) repeat-x;
background:url(правый_край.gif) no-repeat 100% 0;

Все хорошо, все работает, но края у меня скругленные, с прозрачными углами. И получается, что в этих местах видна картинка центр.gif

Вот собственно вопрос, можно сделать так, чтобы под картинками левый_край.gif и правый_край.gif небыло картинки центр.gif?

DStereo · February 11, 2012

Не получается сделать овальную динамичную кнопку с помощью картинок.
У меня 3 картинки - левый край, центр(полоска) и правый край.
CSS
background:url(левый_край.gif) no-repeat;
background:url(центр.gif) repeat-x;
background:url(правый_край.gif) no-repeat 100% 0;
Все хорошо, все работает, но края у меня скругленные, с прозрачными углами. И получается, что в этих местах видна картинка центр.gif
Вот собственно вопрос, можно сделать так, чтобы под картинками левый_край.gif и правый_край.gif небыло картинки центр.gif?

Залить углы белым цветом или цветом фона, по-другому никак. А вообще лучше пользоваться border-radius.

Switch74 · February 11, 2012

можно, только в вашем случае не понятно как у вас сделана кнопка

frog163 · February 11, 2012

Не получается сделать овальную динамичную кнопку с помощью картинок.
У меня 3 картинки - левый край, центр(полоска) и правый край.
CSS
background:url(левый_край.gif) no-repeat;
background:url(центр.gif) repeat-x;
background:url(правый_край.gif) no-repeat 100% 0;
Все хорошо, все работает, но края у меня скругленные, с прозрачными углами. И получается, что в этих местах видна картинка центр.gif
Вот собственно вопрос, можно сделать так, чтобы под картинками левый_край.gif и правый_край.gif небыло картинки центр.gif?
Залить углы белым цветом или цветом фона, по-другому никак. А вообще лучше пользоваться border-radius.

фон с узором, закрасить не получится, а border-radius скругляет не так как у меня на картинках, окантовка с эффектом неона.

можно, только в вашем случае не понятно как у вас сделана кнопка

в 1 блоке 3 фона

[||||||||||||||] - 1-ый фон (полностью закрывает блок)

[.........||] - 2-ой сверху справа (одна картинка без повторения)

[||.........] - 3-ий сверху слева (одна картинка без повторения)

в итоге получается прямоугольник

Вот я думаю как бы сделать так:

[..|||||||||..]

[.........||]

[||.........]

DStereo · February 12, 2012

окантовка с эффектом неона.

Таких эффектов можно добиться при помощи box-shadow. Но тем не менее, раз картинками решили сделать и хотите сделать внутренний отступ, то попробуйте например так:


<button class="button-wrapper" type="button">
    <span class="button-left">
        <span class="button-right">Отправить</span>
    </span>
</button>

И соответственно css:


.button-wrapper{
    background:url(центр.gif) repeat-x;
    border:0;
    color:#fff;
    cursor:pointer;
    font-weight:bold;
    width:100px;
    height:30px;
    line-height:30px;
    padding:0;
}

.button-left{
    background:url(левый_край.gif) no-repeat;
    display:inline-block;
    width:100px;
    height:30px;
    margin-left:-5px; /* отступ на ширину угла */
}

.button-right{
    background:url(правый_край.gif) no-repeat 100% 0;
    display:inline-block;
    width:100px;
    height:30px;
    margin-right:-10px;
}
?

frog163 · February 12, 2012

спасибо, незнал, что margin поддерживает отрицательные значения =\

Yazon_Nile · February 15, 2012

html


	<a class="button">
		<span class="l">
			<span class="c">
			  Link yo!
			</span>
		</span>
	</a>

css


.button{
	background:url(../images/left.png) no-repeat;
	display:block;
	height:20px;
	overflow:hidden;
	padding:0 0 0 10px;
}
.button .r{
	background:url(../images/right.jpg) no-repeat 100% 0;
	float:left;
	height:100%;
	padding:0 10px 0 0;
}
.button .c{
	background:url(../images/center.jpg) repeat-x;
	float:left;
	height:18px;
	padding:2px 0;
}

Все три картинки должны быть одинаковой высоты)

Edited February 15, 2012 by Yazon_Nile

sobrinho · February 15, 2012

Здравствуйте.Я сделал кнопки для ссылок(с текстом внутри) в CSS(нашел конструктор на сайте),но проблема в том,что IE не отображает,например, округления. В связи с этим вопрос:лучше делать кнопки как импортированные картинки или же можно и с помощью CSS,но что тогда делать с IE?

И еще: Я взял за основу сайта трехколоночный шаблон, шапку сделал из нескольких фото ,закрепив в HTML их расположение абсолютно,используя top и bottom(лево,право не трогал). А все остальное(центральный контейнер и боковые колонки) с помощью CSS с указанием ширины и margin . Теперь,при изменении видимой ширины сайта(убирая боковую панель избранного,например) шапка занимает так же всю ширину,а вот нижние блоки «съезжают» влево и справа остается пустая область. Как лучше от этого избавиться?

Спасибо.

Yazon_Nile · February 15, 2012

В связи с этим вопрос:лучше делать кнопки как импортированные картинки или же можно и с помощью CSS,но что тогда делать с IE?

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

Как лучше от этого избавиться?

Забыть про абсолютное позиционирование, говоря об основных частях страницы.

sobrinho · February 15, 2012

В связи с этим вопрос:лучше делать кнопки как импортированные картинки или же можно и с помощью CSS,но что тогда делать с IE?
Делай, как в предыдущем сообщении - самый универсальный способ. Работает всегда и везде
Как лучше от этого избавиться?
Забыть про абсолютное позиционирование, говоря об основных частях страницы.

Спасибо.

Сделал как в предыдущем посте - исчезли кнопки вообще.Еще не разобрался-почему.

По второму: а как лучше(каким способом) реализовать относительное размещение трехколоночного массива?

Switch74 · February 16, 2012

думаю с помощью float:left|right

Yazon_Nile · February 16, 2012

В связи с этим вопрос:лучше делать кнопки как импортированные картинки или же можно и с помощью CSS,но что тогда делать с IE?
Делай, как в предыдущем сообщении - самый универсальный способ. Работает всегда и везде
Как лучше от этого избавиться?
Забыть про абсолютное позиционирование, говоря об основных частях страницы.
Спасибо.
Сделал как в предыдущем посте - исчезли кнопки вообще.Еще не разобрался-почему.
По второму: а как лучше(каким способом) реализовать относительное размещение трехколоночного массива?

http://files.mail.ru/R5LB91

Тут два архива - один на кнопку, один на построение страницы.

Надеюсь, поможет!

Edited February 16, 2012 by Yazon_Nile

sobrinho · February 16, 2012

Спасибо всем за ответ.Попытаюсь.

sobrinho · February 16, 2012

В связи с этим вопрос:лучше делать кнопки как импортированные картинки или же можно и с помощью CSS,но что тогда делать с IE?
Делай, как в предыдущем сообщении - самый универсальный способ. Работает всегда и везде
Как лучше от этого избавиться?
Забыть про абсолютное позиционирование, говоря об основных частях страницы.
Спасибо.
Сделал как в предыдущем посте - исчезли кнопки вообще.Еще не разобрался-почему.
По второму: а как лучше(каким способом) реализовать относительное размещение трехколоночного массива?
http://files.mail.ru/R5LB91
Тут два архива - один на кнопку, один на построение страницы.
Надеюсь, поможет!

Еще раз спасибо.Я сначала посмотрел html файл - В Вашем варианте все выглядет корректно при изменении ширины.Я,правда,еще не вставил свои данные туда,посмотрю как потом будет ... А вот кнопки у меня в файрфоксе выглядят просто текстом,а в эксплорере тоже текстом ,но как будто срезана нижняя часть.Не могу понять почему.Еще буду пытаться. И,возвращаясь к странице,а в чем причина,что у Вас выглядит корректно?Не хотелось бы просто механически перенести.

Yazon_Nile · February 17, 2012

Блин. Ну не может же быть . Может арихив не распаковал, а смотрел чисто файл html? Там же связка с папкой images и css. - Если распакуешь, запустить, и снова будет неработать - это будет ппц - с нуля ещё раз сделаю и посмотрим.

И,возвращаясь к странице,а в чем причина,что у Вас выглядит корректно?Не хотелось бы просто механически перенести.

Ну, не видя верстки, я могу лишь догадываться. Но абсолютное позиционирование для основных блоков не используется практически никогда. Все можно разрулить фтотами!

Вот и простая структура как выглядит?

#wrapper>#header+#main+#footer

Общий блок с шириной + маржин 0 ауто (для центровки). Хедер, меин, футер. Если их так расположить в коде - будут идти друг под другом, что нам и надо.

#main>#content+#sidebar

А меин состоит из двух колонок - контент и саидбар. Первый флотнут влево с шириной (!!!), второй блок флотнут вправо с шириной. Так как после этого в меине не осталось элементов (флот вынимает элемент из потока, грубо говоря) - он схлопывается. Чтобы этого избежать можно на него задать оверфлоу хидден или афтер с шириной. Ну вот. Надеюсь доступно обьяснил ))

HTML


	<div id="wrapper">
		<div id="header">
			header
		</div>
		<div id="main">
			<div id="content">
				content
			</div>
			<div id="sidebar">
				sidebar
			</div>
		</div>
		<div id="footer">
			footer
		</div>
	</div>

CSS


#wrapper{
	margin:0 auto;
	width:960px;
}
#header{

}
#main{
	overflow:hidden
}
/* ИЛИ */
#main{
	width:100%; /*(Если 100% нельзя поставить, то нужно высчитать в пикселях. Если никак - высоту ставить)*/
}
#main:after{
	clear:both;
	content:'';
	display:block;
}
#content{
	float:left;
	width:700px;
}
#sidebar{
	float:right;
	width:250px;
}
#footer{

}

sobrinho · February 17, 2012

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

Sign In

Верстка кнопки

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information