Форум Сайтостроение Веб-строительство

Проблема с вёрсткой

Jor
На сайте с 23.06.2012
Offline
42
Jor
452

Всем привет.

Есть проблема, как бороться не знаю, разметка и стили:

html 

<h3>Преимущества</h3>

css 

h3 {

	display: inline;

	padding: 4px 12px 4px 12px;

	background: #fff;

	font-size: 17px;

	color: #ff3e03;

	text-transform: uppercase;

	position: relative;

	}



h3:after {

	width: 9px;

	height: 27px;

	content: "";

	background: url(../images/block.png) no-repeat 0px 0px;

	position: absolute;

	bottom: 0;

	left: -9px;

	}



h3:before {

	width: 9px;

	height: 27px;

	content: "";

	background: url(../images/block.png) no-repeat -9px 0px;

	position: absolute;

	bottom: 0;

	right: -9px;

	}

На выходе получается такой вот заголовок:

Всё замечательно отображается во всех браузерах, в т.ч. IE8+, НО только если масштаб окна браузера 100%, если увеличить/уменьшить масштаб, то начинаются "пляски"

Можно ли решить проблему средствами только лишь css, не трогая разметку?

DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#1

viewport scale отслеживается только js-ом. так что, что бы конструкция нормально скалировалась "сама по себе" надо обойтись без жёстких размеров блоков. подсказка - фигуры в виде "уголков/треугольников" создаются css-ом за счёт игр с border разных сторон блока...

show must go on !!!...
Как сделать сайт удобным 10 самых разрушительных ошибок WordPress Gutenberg помогает улучшить
Jor
На сайте с 23.06.2012
Offline
42
Jor
#2
DiAksID:
viewport scale отслеживается только js-ом. так что, что бы конструкция нормально скалировалась "сама по себе" надо обойтись без жёстких размеров блоков. подсказка - фигуры в виде "уголков/треугольников" создаются css-ом за счёт игр с border разных сторон блока...

Спасибо, через border получилось, то что надо, хоть и немного закрывает фон сайта, но всё таки лучше, чем было :) 

h3 {

	display: inline-block;

	background: #fff;

	font-size: 17px;

	line-height: 27px;

	color: #ff3e03;

	text-transform: uppercase;

	padding: 0 18px 0 18px;

	position: relative;

	}



h3:before, h3:after {

	content: "";

	border-top: 13.5px solid transparent;

        border-bottom: 13.5px solid transparent;

	position: absolute;

	bottom: 0;

	}	



h3:before {

        border-left: 9px solid #feb46d;

	left: 0;

	}



h3:after {

        border-right: 9px solid #feb46d;

	right: 0;

	}

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий