Фоновое изображение для перемещения ниже тега li - PullRequest
Новая
       13

Фоновое изображение для перемещения ниже тега li

0 голосов
/ 20 мая 2011

News item

На изображении выше я показываю новости в пузырьковом формате. Это все в списке, вот так: 

<ul>
    <li>
        <h2>South West Training Association</h2>
        <p>South West Training Association to get online makeover ....</p>
        <a href="#"><img src="images/readmore.jpg" alt="Read More" width="72" height="22" border="0" /></a>
    </li>
</ul>

ul{ list-style-type:none;}
ul h2{color:#01558a; text-decoration:none; font-size:90%; font-weight:bold; font-style:normal;}
ul p{font-size:.7em; font-style:italic; line-height:1.1em; padding:4px 0; margin:0;}
ul li{background:#f8f5d4 url(../images/news-li-bottom.jpg) no-repeat left bottom; border:#ebe6b3 2px solid; padding:8px; -moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;behavior: url(border-radius.htc); margin:0 0 20px 0; display:block;}

CSS генерирует прямоугольник с круглыми углами для элемента новостей. Я хочу разместить стрелку ниже, как я уже упоминал в списке элементов фона. Теперь я хочу переместить его на 20 пикселей ниже дна. Как я могу это сделать?

1 Ответ

1 голос
/ 20 мая 2011

Вы можете сделать что-то вроде этого: 

ul li:after {
    content: url(lien vers ton image);
    position: absolute;
}

, а затем используйте bottom: и left: pour positionner ton image au bonne endroit.

Бит, он не будет работать во всех браузерах. Чтобы убедиться, что вы должны добавить диапазон в свой li, поместите фон на него так, чтобы он был.

...