фон относительно правого края

swetlana · March 10, 2011

задачка: расположить фоновую картинку в позиции 4px от правого края элемента.

До сих пор такое решалось обходными путями: либо отсчитывалось нужное положение от левого края (годно при известной и неизменной ширине), либо фоновая картинка имела справа нужное количество прозрачных пикселей.

Однако сейчас ни один из этих вариантов не прокатит.

Как можно быть?

PanSoul · March 11, 2011

задачка: расположить фоновую картинку в позиции 4px от правого края элемента.
До сих пор такое решалось обходными путями: либо отсчитывалось нужное положение от левого края (годно при известной и неизменной ширине), либо фоновая картинка имела справа нужное количество прозрачных пикселей.
Однако сейчас ни один из этих вариантов не прокатит.
Как можно быть?

Ну а что, если завернуть нужный див с бэкграундом в ещё 1 див с паддингом?

ex:

<!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>
  <title>Блочные ссылки</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <style type="text/css">
	.r{
		float:left;
		border:1px solid green;
		padding-right:4px;
	}

	.div1{
		width:300px;
		height:300px;
		background:url("bg.png") right no-repeat;
		border:1px solid red;
	}
   </style>
  </head>
 <body>
 <div class="r">
  <div class="div1">

  </div>
  </div>
 </body>
</html>

sigma77 · March 11, 2011

Ну пока кроме кривых решений как прибить картинку вправо абсолютом с нужным z-index или аналогично див+фон не приходит... :unsure:

Upd.. Ну да. Или как сказал PanSoul.

Upd2. Свет, а фоновый цвет или границы у блока есть? Может марджин просто задать?

swetlana · March 11, 2011

Ну а что, если завернуть нужный див с бэкграундом в ещё 1 див с паддингом?

во-первых, это преступление против здравого смысла.

во-вторых, задача подразумевает решение исключительно средствами css. Разметку трогать запрещено.

Высший смысл задачи вообще в чём:

Есть сайт. У него несколько языковых версий.

У одной из таких версий, а именно у арабской, есть хитрая особенность: направление письма справа налево. И для такой письменности традиционное расположение элементов несколько иное, чем для привычной нам. В частности маркеры в списках должны располагаться справа, а не слева. часто маркеры реализованы именно фоновыми картинками.

Переставить элементы в соответствии с арабскими традициями призван специательный файл css. Других изменений в коде страницы быть не должно.

Кстати, довольно распространённая задача (хоть и не в России).

Upd2. Свет, а фоновый цвет или границы у блока есть? Может марджин просто задать?

в данном случае не вариант.

…прибить картинку вправо абсолютом с нужным z-index или аналогично див+фон …

зато это предложение натолкнуло на мысль:

a:after {
content: url(flag.gif);
position: absolute;
right: 4px;
}

надо попробовать.

Спасибо большущее!

Edited March 11, 2011 by swetlana

SelenIT · March 11, 2011

Если это маркер списка и правее его, по логике, ничего быть не должно — может, для данного случая достаточно просто задать соответствующий margin-right самому li (или padding-right для ul)?

Great Rash · March 11, 2011

swetlana, вы ж за новые технологии, так и юзайте, скажем, CSS3 calc.

swetlana · March 11, 2011

swetlana, вы ж за новые технологии, так и юзайте, скажем, CSS3 calc.

да, я действительно за новые технологии.

но в меру.

calc даже в вебкитах и ФФ не работает.

Так что данная новая технология, скажем так, чересчур новая :unsure:

Если это маркер списка и правее его, по логике, ничего быть не должно — может, для данного случая достаточно просто задать соответствующий margin-right самому li (или padding-right для ul)?

это не вариант потому что:

маркер привязывается к ссылке. Класс у ссылки, а html я менять не могу.

При наведении у ссылки меняется фоновый цвет. Если сделать маргин самой ссылке или паддинг содержащему её li, то будет заметно, как фоновый цвет не доходит до края.

Предмет обсуждения здесь.

В шапе переключался языков.

В её пунктах фоном сделаны флажки, и вот именно они и должны быть в 4px от правого края.

Great Rash · March 11, 2011

calc даже в вебкитах и ФФ не работает

За вебкиты не скажу, а вот в ФФ есть -moz-calc

SelenIT · March 11, 2011

А в чем неприемлемость варианта с 4-мя прозрачными (или белыми) пикселями справа? Насколько могу судить, они и при размещении маркера слева ничему не помешают...

swetlana · March 11, 2011

За вебкиты не скажу, а вот в ФФ есть -moz-calc

вот об этом-то я и забыла.

Спасибо, поищу в эту сторону.

А у осликов есть expressions.

А в чем неприемлемость варианта с 4-мя прозрачными (или белыми) пикселями справа? Насколько могу судить, они и при размещении маркера слева ничему не помешают...

в том, что для этого нужно менять файлы, кроме того css, который дозволен. А именно — сами картинки.

Это особенность частного случая.

SelenIT · March 11, 2011

А сочетание паддинга для ссылки + background-origin:content-box в реальном мире работает?

Сорри, уже понял, что для этого случая оно бы всёё равно не подошло. А вот вариант с паддингом для li... менять фон можно ведь и для li:hover, не только для ссылки?

swetlana · March 11, 2011

А сочетание паддинга для ссылки + background-origin:content-box в реальном мире работает?

частично работает.

В вебкитах и опере.

А в лучше всего поддерживающем стандарты ФФ всё так же, как и в лучших в мире ослах.

SelenIT · March 11, 2011

всё так же, как и в лучших в мире ослах

Ну уж прямо. -moz-background-origin: content, судя по всему, давно и основательно. А с 4-й ветки, если не врут, должно быть вообще шоколадно...

swetlana · March 11, 2011

ах да…

посыпаю голову пеплом.

я всё про -moz- сегодня забываю. :unsure:

наверно нельзя за одну ночь недельную норму работы выполнять.

Sign In

фон относительно правого края

Question

Link to comment

Share on other sites

13 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

Join the conversation

Обсуждения

Important Information