CSS <li>проблема положения фонового изображения - PullRequest
Новая
       17

CSS <li>проблема положения фонового изображения

1 голос
/ 22 мая 2009

на http://www.goodshow.tv У меня проблема с навигацией. У меня есть класс, который помещает изображение стрелки, которое должно совпадать с правым краем белой границы. Проблема в том, что она базируется на левой стороне текста. Есть ли более абсолютный способ позиционирования?

Ответы [ 2 ]

5 голосов
/ 22 мая 2009

Я не совсем уверен, что вы имеете в виду, но если вы уберете фон с и .currentpage и добавите следующее на , вы получите нечто, возможно, ближе к тому, что вы хотите. Пожалуйста, подтвердите, что вы хотите, если это не так: -) 

background: transparent url(http://www.goodshow.tv/images/nav_arrow.png) no-repeat scroll 95% 50%

Я бы, вероятно, сделал это вместо

, хотя: 
background: transparent url(http://www.goodshow.tv/images/nav_arrow.png) no-repeat scroll 100% 50%
padding:8px 20px 7px 0;

т.е. зафиксируйте фон по правому краю и отрегулируйте правый отступ.

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

1 голос
/ 22 мая 2009

Я бы выбрал вариант, подобный рекомендованному Graphain. Похоже, у вас есть один список для ваших элементов навигации и другой список для ваших стрелок. Вы могли бы объединить их и сделать вашу жизнь немного проще. :) Идея в том, что ваши элементы li достаточно широки, чтобы показывать стрелки. Затем вы должны установить фон на одном из этих литов, чтобы использовать стрелку и расположить его справа на текущей странице. Вот что можно изменить по стилю, чтобы сделать что-то подобное ... 

#nav { width:240px; } /* should go all the way to that vertical area where there arrows are) */
#nav li.currentpage { background:url(images/nav_arrow.png) no-repeat right center; } /* add the error */
#nav ul li { margin-right:30px; } /* will add a bit of spacing after each lit between the text and the arrow */

Также вам придется изменить текущую страницу с элемента a на элемент li (и изменить страницу a.current, чтобы использовать что-то более похожее на 

#nav ul li.currentpage a {} /* your current a.currentpage style */

После этого вы сможете удалить стрелку div вместе.

...