Jump to content
  • 0

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

frog163

Asked by frog163,

 Share

Question

frog163 Explorer

frog163

Posted
Posted

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

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

CSS

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

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

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

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0
DStereo Explorer

DStereo

Posted
Posted
  On 2/11/2012 at 12:57 AM, frog163 said:

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

У меня 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.

Link to comment
Share on other sites
  • 0
frog163 Explorer

frog163

Posted
  • Author
Posted
  On 2/11/2012 at 7:30 AM, DStereo said:
  On 2/11/2012 at 12:57 AM, frog163 said:

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

У меня 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 скругляет не так как у меня на картинках, окантовка с эффектом неона.

  On 2/11/2012 at 7:36 AM, Switch74 said:

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

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
DStereo Explorer

DStereo

Posted
Posted
  On 2/11/2012 at 5:18 PM, frog163 said:

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

Таких эффектов можно добиться при помощи 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;
}
?

Link to comment
Share on other sites
  • 0
Yazon_Nile Explorer

Yazon_Nile

Posted
Posted (edited)

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 by Yazon_Nile
Link to comment
Share on other sites
  • 0
sobrinho Explorer

sobrinho

Posted
Posted

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

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

Спасибо.

Link to comment
Share on other sites
  • 0
Yazon_Nile Explorer

Yazon_Nile

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

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

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

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

Link to comment
Share on other sites
  • 0
sobrinho Explorer

sobrinho

Posted
Posted
  On 2/15/2012 at 2:03 PM, Yazon_Nile said:
  Quote
В связи с этим вопрос:лучше делать кнопки как импортированные картинки или же можно и с помощью CSS,но что тогда делать с IE?

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

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

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

Спасибо.

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

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

Link to comment
Share on other sites
  • 0
Yazon_Nile Explorer

Yazon_Nile

Posted
Posted (edited)
  On 2/15/2012 at 11:53 PM, sobrinho said:
  On 2/15/2012 at 2:03 PM, Yazon_Nile said:
  Quote
В связи с этим вопрос:лучше делать кнопки как импортированные картинки или же можно и с помощью CSS,но что тогда делать с IE?

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

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

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

Спасибо.

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

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

http://files.mail.ru/R5LB91

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

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

Edited by Yazon_Nile
Link to comment
Share on other sites
  • 0
sobrinho Explorer

sobrinho

Posted
Posted
  On 2/16/2012 at 6:55 AM, Yazon_Nile said:
  On 2/15/2012 at 11:53 PM, sobrinho said:
  On 2/15/2012 at 2:03 PM, Yazon_Nile said:
  Quote
В связи с этим вопрос:лучше делать кнопки как импортированные картинки или же можно и с помощью CSS,но что тогда делать с IE?

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

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

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

Спасибо.

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

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

http://files.mail.ru/R5LB91

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

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

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

Link to comment
Share on other sites
  • 0
Yazon_Nile Explorer

Yazon_Nile

Posted
Posted

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

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

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

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

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

}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept