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

Как bg-картинку вытянуть за пределы ul?

R
На сайте с 03.08.2012
Offline
131
revered
410

Здравствуйте, есть ul список, и есть ленточка в правом вернем углу (скрин пилагаю) Как можно реализовать такое? Я прописал border, поставил ленточку, но она естественно не вылазиет за приделы бордера, начинает обризаться...

png 1234.png
Jor
На сайте с 23.06.2012
Offline
42
Jor
#1

Попробуйте так:

HTML:

<div id="outer">
	<ul></ul>
	<div class="lenta"></div>
</div>

CSS:


div#outer {
	position: relative;
}
div.lenta {
	position: absolute;
	top: Npx; left: Npx;
}
R
На сайте с 03.08.2012
Offline
131
revered
#2

Без дива не получиться, т.е. используя только ul?

Jor
На сайте с 23.06.2012
Offline
42
Jor
#3
revered:
Без дива не получиться, т.е. используя только ul?

Получится.

Вы бы код показали, чтобы нам не гадать.

R
На сайте с 03.08.2012
Offline
131
revered
#4

А че то код показывать, обычный ul список.. 

<ul>

  <li>text....</li>

  <li>text.....</li>

</ul>

В общем говоря, мне нужно сверстать то что вы видели на картинки. Я не знаю только как эту ленточку прикрепить по нормальному... А все остальное - уже сделал. Там ленточка как бы вылазиет за рамку, а у меня обрезается по рамки.

В Яндекс.Браузере появилась функция Google: качество контента это Google Ads вводит новые
Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#5

может как то так: 

<!DOCTYPE html>

<html>

  <head>

  <meta charset="windows-1251">

  <style type="text/css">

*{margin:0;padding:0;}

ul{position:relative;list-style:none;margin:40px;padding:20px 60px;border:3px solid #DCE7AD;border-radius:6px;}

ul li{font:16px Arial;line-height:32px;}

ul li:first-child{background:url(lenta.png) no-repeat;width:111px;height:109px;display:block;position:absolute;top:-12px;right:-13px;}

  </style>

  <title></title>

  </head>

  <body>

      <ul>

        <li></li>

        <li>Lorem ipsum dolor sit amet consectetuer egestas enim.</li>

        <li>Lorem ipsum dolor sit amet consectetuer egestas enim.</li>

        <li>Lorem ipsum dolor sit amet consectetuer egestas enim.</li>

        <li>Lorem ipsum dolor sit amet consectetuer egestas enim.</li>

        <li>Lorem ipsum dolor sit amet consectetuer egestas enim.</li>

        <li>Lorem ipsum dolor sit amet consectetuer egestas enim.</li>

      </ul>

  </body>

</html>
Jor
На сайте с 23.06.2012
Offline
42
Jor
#6

HTML:


<ul>
	<li>01. Пункт</li>
	<li>02. Пункт</li>
	<li>03. Пункт</li>
</ul>

CSS:


ul {
	position: relative;
	border: 1px solid red;
}

ul:after {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	background: red url(lenta.png) no-repeat;
	position: absolute;
	right: -10px;
	top: -10px;
}

На выходе получаем:

Можно вместо псевдоэлемента :after использовать дополнительный тэг, к примеру так:

HTML:


<ul>
...
<li class="lenta"></li>
</ul>

CSS:


ul li.lenta {
...
}

Результат будет тот же...

gormarket
На сайте с 29.12.2010
Offline
47
gormarket
#7

Можно сделать почти как предложил Olldman, только убрать пустой элемент li, а вместо стилей для первого элемента li использовать стили для пседоэлемента :after первого элемента li


ul li:first-child:after {
background: url(lenta.png) no-repeat;
width: 120px;
height: 120px;
display: block;
position: absolute;
top: -15px;
right: -15px;
content: "";
}
Товары и цены в магазинах Вашего города: Городской рынок (http://gormarket.ru/)
R
На сайте с 03.08.2012
Offline
131
revered
#8

Спасибо большое, очень помогли!:)

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