Проблема со спрайтом

morav · August 3, 2012

Вот на этой странице http://57metpob.ru/sprites спрайт .middle должен повторяться на всю высоту ul. Как заставить его это сделать, используя при этом только спрайты?

wildhind · August 3, 2012

во-первых, спрайт перекомпоновать иначе.

Сделать его, к примеру, размером 730*61, но в левой половине разместить среднюю его часть, чтобы она могла спокойно повторяться по вертикали, а в правой совместить верхнюю и нижнюю части, и помещать их фоном под псевдоэлементы ::before и ::after

morav · August 11, 2012

во-первых, спрайт перекомпоновать иначе.
Сделать его, к примеру, размером 730*61, но в левой половине разместить среднюю его часть, чтобы она могла спокойно повторяться по вертикали, а в правой совместить верхнюю и нижнюю части, и помещать их фоном под псевдоэлементы ::before и ::after

А можно посмотреть пример?

morav · August 11, 2012

Что-то это конструкция не работает, видимо, я чего-то не понял


<html>
<head>
	<title>Example</title>

<style type="text/css">

body{ 
        background: url("https://dl.dropbox.com/u/5660670/new57metpob/57-home-page/57background.jpg"); 
 }

* {
	padding:0px;
	margin:0px;
}

ul {
	list-style-position: inside;
	list-style-type: none;
	margin-left: auto;
	margin-right: auto;
	width: 365px;

 }

li::before {
	content:"";
	height:30px;
	width:360px;
        background: url("https://dl.dropbox.com/u/5660670/new57metpob/57-home-page/57metrov_4.png") -361px -0px no-repeat;
}

li::after { 
	content:"";
	height:40px;
	width:365px;
        background: url("https://dl.dropbox.com/u/5660670/new57metpob/57-home-page/57metrov_4.png") -722px -0px no-repeat;
}

p {
	padding:30px;
}


.middle {
	width:360px;
        background: url("https://dl.dropbox.com/u/5660670/new57metpob/57-home-page/57metrov_4.png") -0px -0px repeat-y;
	display: block;
 }


</style>

</head>
 <body>
  <ul>
   <li class="middle"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </li>
  </ul>
 </body>
</html>

Catherine · August 11, 2012

во-первых, спрайт перекомпоновать иначе.
Сделать его, к примеру, размером 730*61, но в левой половине разместить среднюю его часть, чтобы она могла спокойно повторяться по вертикали, а в правой совместить верхнюю и нижнюю части, и помещать их фоном под псевдоэлементы ::before и ::after
А можно посмотреть пример?

Пример

Sign In

Проблема со спрайтом

Question

morav

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

wildhind

Link to comment

Share on other sites

morav

Link to comment

Share on other sites

morav

Link to comment

Share on other sites

Catherine

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information