Картинка бэкграундом в стилях: как сделать сдвиг

alexspb · January 15, 2010

В верстке есть параграфы, в начали части из них для имитации списков вставляется тэг картинки со стилями

<p class="className"><img src="http://site.ru/img/list.gif" width="13" height="13" alt="" align="top" style="position:relative;top:1px;">Текст бла-бла-бла</p>

я хочу сделать иначе: убрать тэг картинки, заключить такие параграфы в див (сами параграфы уже без классов), прописать в стилях картинку, все удается, но она получается на 1 пиксель выше, чем в исходном коде (в стилях выше это решается top:1px;)

div.classNameImg p {
	margin: 0;
	padding-left: 17px;
	background-image: url(http://site.ru/img/list.gif);
	background-repeat: no-repeat;
}

добавление

	background-position: relative;
	top: 1px;

не решает проблемы.

<div class="classNameImg">
<p>Главный ресторан:<br />– Завтрак (06.00 – 10.00)<br />– Обед ( 12.30 – 14.00)<br /></p>
<p>Ресторан-пиццерия</p>
<p>Снек-бар</p>
</div>

см. пример как есть и как надо

psywalker · January 15, 2010

http://htmlbook.ru/css/background-position.html

Dessss · January 16, 2010

div.classNameImg p {

margin: 0;

padding-left: 17px;

background-image: url(http://site.ru/img/list.gif) no-repeat 0 1px;

}

Так хотели?

Edited January 16, 2010 by Dessss

alexspb · January 16, 2010

background-image: url(http://site.ru/img/list.gif) no-repeat 0 1px;

так не работает

http://htmlbook.ru/css/background-position.html

работает с: background-position: 0 1;

это вместо

background-position: relative;

Edited January 16, 2010 by alexspb

psywalker · January 16, 2010

background-image: url(http://site.ru/img/list.gif) no-repeat 0 1px;
так не работает
http://htmlbook.ru/css/background-position.html
работает с: background-position: 0 1;
это вместо
background-position: relative;

Что background-position: 0 1;, что background-position: relative; - полнейшая чушь

LunatiK · January 16, 2010

Что background-position: 0 1;, что background-position: relative; - полнейшая чушь

что background-position: relative; - полнейшая чушь - согласен, а вот background-position: 0 1; не полнейшая просто забыли поставить значения background-position: 0px 1px;

psywalker · January 16, 2010

Пройти бы надо для начала http://stepbystep.htmlbook.ru/

alexspb · January 16, 2010

то бла-бла-бла, что бла-бла - полнейшая чушь
Пройти бы надо для начала

у меня нет задачи стать верстальщиком, правлю чужой код, может и вообще мое решение негодно с т.ч. идеологии css

почитал доки, не до конца понял, но разобрался

psywalker, вам что-то мешает просто подсказать?

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

ваш пост #5 - полнейшая чушь, поскольку вам по какой-то причине не хочется приводить правильное решение

psywalker · January 16, 2010

у меня нет задачи стать верстальщиком, правлю чужой код, может и вообще мое решение негодно с т.ч. идеологии css
почитал доки, не до конца понял, но разобрался
psywalker, вам что-то мешает просто подсказать?
я ведь не прошу сделать за меня, а привожу пример, на чем запнулся
ваш пост #5 - полнейшая чушь, поскольку вам по какой-то причине не хочется приводить правильное решение

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

alexspb · January 16, 2010

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

а зачем пост #5??? Показать что тут один умный, а остальные не стараются? У вас слишком предвзятое отношение к людям, опрометчиво, когда к незнакомым.

ЗЫ А на "ты" - это от природной лени? или идеология такая?

Edited January 16, 2010 by alexspb

psywalker · January 16, 2010

а зачем пост #5??? Показать что тут один умный, а остальные не стараются? У вас слишком предвзятое отношение к людям, опрометчиво, когда к незнакомым.

Ты не прав, я хорошо отношусь к людям, особенно к тем, кто старается что-то делать, а не просто просит решить за него. Далее, я написал так, после того, как ты получил ссылку на решение, что означало, что ты НЕ читал внимательно, что там написано, а просто тупо скопипастил перво-попавшийся код, думая, что остальное тебе напишут.

ЗЫ А на "ты" - это от природной лени? или идеология такая?

А на "Ты" - это тебе надо почитать правила форума.

alexspb · January 16, 2010

Поскольку речь зашла немного о другом, здесь пара вопросов.

alexspb · January 16, 2010

Итак, по теме. Многие все-таки поленились вчитаться, а я не приводил окончательного решения, довольствовашись комментарием, что на что я поменял.

т.е. background-position: relative; - было лишним, top: 1px; - было неправильным. Используем background-position: 0 1;

Вот мое решение, которое можно записать двумя вариантами. Во втором варианте background-image и background-position объединяются в background. Второй вариант - подсказан Justnewone, но это просто короткая запись моего варианта. Итак вопрос: psywalker прав, что это чушь? Но что тогда не является чушью?

div.classNameImg p {
	margin: 0;
	padding-left: 17px;
	[b]background-image[/b]: url(http://site.ru/img/list.gif);
	background-repeat: no-repeat;
	background-position: 0 1;  
}


div.classNameImg p {
	margin: 0;
	padding-left: 17px;
	[b]background[/b]: url(http://site.ru/img/list.gif) 0 1;
	background-repeat: no-repeat;
}

Edited January 16, 2010 by alexspb

Justnewone · January 16, 2010

Итак, по теме. Многие все-таки поленились вчитаться, а я не приводил окончательного решения, довольствовашись комментарием, что на что я поменял. Вот мое решение, которое можно записать двумя вариантами. Во втором варианте background-image и background-position объединяются в background. Второй вариант - подсказан Justnewone, но это просто короткая запись моего варианта. Итак вопрос: psywalker прав, что это чушь? Но что тогда не является чушью?
div.classNameImg p {
	margin: 0;
	padding-left: 17px;
	[b]background-image[/b]: url(http://site.ru/img/list.gif);
	background-repeat: no-repeat;
	background-position: 0 1;  
}


div.classNameImg p {
	margin: 0;
	padding-left: 17px;
	[b]background[/b]: url(http://site.ru/img/list.gif) 0 1;
	background-repeat: no-repeat;
}

Ну вот зачем Вы так? Сами офтопите, Максим оценили как чушь вот это

Что background-position: 0 1;, что background-position: relative; - полнейшая чушь

особенно background-position: relative;

Правильное решение в Вашем случае

div.classNameImg p {
	margin: 0;
	padding-left: 17px;
	background: url(http://site.ru/img/list.gif) no-repeat 0 1px;
}

px необходим, потому что браузер может и поймет что такое просто 1, но по спецификации необходимо прописывать единицы измерения. Сам не проверяю, но думаю что 0 1 - некроссбраузерное решение. Поэтому я предоставил Вам не сокращенный вариант, а исправленный, поглядите в той теме, я приводил немножко другое решение.

psywalker · January 16, 2010

Ну вот зачем Вы так? Сами офтопите, Максим оценили как чушь вот это
особенно background-position: relative;
Правильное решение в Вашем случае
div.classNameImg p {
	margin: 0;
	padding-left: 17px;
	background: url(http://site.ru/img/list.gif) no-repeat 0 1px;
}
px необходим, потому что браузер может и поймет что такое просто 1, но по спецификации необходимо прописывать единицы измерения. Сам не проверяю, но думаю что 0 1 - некроссбраузерное решение.

Но этого мало, для решения необходимо ещё кое-что, совсем малость, вот уже всё написано, но нужно что-то изменить прям

Justnewone · January 16, 2010

Но этого мало, для решения необходимо ещё кое-что, совсем малость, вот уже всё написано, но нужно что-то изменить прям

ну мож че пропустил, каюсь, просто лень копипастить и запускать )

UPD

Ну давай рассказывай! )))

alexspb · January 16, 2010

Правильное решение в Вашем случае
background: url(http://site.ru/img/list.gif) no-repeat 0 1px;

Дело в том, что такая конструкция у меня изначально не сработала, поскольку я по-невнимательности не заметил background-image на background,

т.е. background-image: url(http://site.ru/img/list.gif) no-repeat 0 1px; и не сработал и я ее отверг, как неправильную и даже сейчас оставил background-repeat: no-repeat; отдельной строкой (теперь изменил как надо и все работает).

Максим оценили как чушь вот это

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

ОФФ Я давно не работал с css, так что допустил такое. Некоторые хотели себе заработать на этом авторитет, хотя бы в своих глазах.

Edited January 16, 2010 by alexspb

s0rr0w · January 16, 2010

ОФФ Я давно не работал с css, так что допустил такое. Некоторые хотели себе заработать на этом авторитет, хотя бы в своих глазах.

Ваше позерство тут ни к чему. Не делайте хорошую мину при плохой игре.

alexspb · January 16, 2010

Ваше позерство тут ни к чему. Не делайте хорошую мину при плохой игре.

А в чем тут позерство?

psywalker · January 16, 2010

ну мож че пропустил, каюсь, просто лень копипастить и запускать )
UPD
Ну давай рассказывай! )))

Ты как раз ничего не упустил и всё сделал правильно. Просто по картинке http://seo-scripts.narod.ru/view/dot.html можно сказать, что в твоём коде нужно сделать кое какие изменения в одном месте, вот и всё. Говорить я не буду, так как ТС неуважительно ко-мне отнёсся и даже не извинился. Пусть сам теперь дочитывает и догадывается.

alexspb · January 16, 2010

Говорить я не буду, так как ТС неуважительно ко-мне отнёсся и даже не извинился.

И более того - поставил диагноз. Впрочем, как и мне многие. Так что - квиты.

Sign In

Картинка бэкграундом в стилях: как сделать сдвиг

Question

Link to comment

Share on other sites

20 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

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