Кастомизированная кнопка с текстом

ciwl · July 15, 2012

Нашёл на сайте Эврики (kontur-evrika.ru) интересный вариант создания текстовых кнопок с динамическим бекграундом с использованием тега <ins>. Решил взять этот метод на вооружение и применить в своём макете.

HTML-код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Zagolovok</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>
<div class="folio-filter">
        	<ul>
                <li><a href="#">Lorem ipsum</a></li>
               	<li class="filter-selected">
                	<ins class="leftIns"></ins>
                    <ins class="rightIns"></ins>                	
                	<span>Dolor sit amet</span>
                </li>
                <li><a href="#">Consectetur</a></li>
                <li><a href="#">Fringilla tristique</a></li>
        	</ul>
        </div><!--.folio-filter-->
</body></html>

CSS-код:


* {
	margin: 0;
	padding: 0;
}

.folio-filter {
	margin:29px 0 34px 105px;
}
	.folio-filter li {
		display:inline;
		margin-right:55px;
		padding:10px 23px;
	}

.filter-selected {
	position:relative;
}
	.filter-selected ins {
		display:block;
		height:33px;
		width:50%;
		top:3px;
		position:absolute;
		background:url(img/active-types-bg.png) 0 0 no-repeat;
		border:1px solid black;

	}
		.filter-selected ins.leftIns {
			left:0;
		}
		.filter-selected ins.rightIns {
			left:-50%;
			margin:0 0 0 98%;
			background-position:100% 0;
		}

	.filter-selected span{
		position:relative;
	}

И всё бы хорошо, но в последней версии оперы правый край сдвигается влево. Включаю border для блока ins и вижу, что распределён он не по 50%.

Можно подправить тег width:50% (в .button ins), но тогда другие браузеры "обидятся".

Что можно подкрутить, чтобы всё ровно было?

В FF:

В Opera:

Файл active-types-bg.png :

P.S. Всякие "трюки", типа создание отдельного файла со стилями "opera/css" или "text/opera" не помогают

P.P.S У эврики в опере всё работает. Не работает при удалении свойства min-width, но мне это свойство не помогает

ciwl · July 15, 2012

Решено.

Вместо

left:-50%;

нужно указать

right:1px;

Edited July 15, 2012 by ciwl

Sign In

Кастомизированная кнопка с текстом

Question

ciwl

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

ciwl

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information