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

CSS

12
Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
813

Есть блок 1. 

<div class="home-layout-clients shadow-side-all">

                    <div class="home-layout-clients-title">Our Clients</div>

                    <span class="clear"></span>

                    <a id="client1" href="#">

                        <div class="client-out"></div>

                        <div class="client-over opacity_0"></div>

                    </a>

                    <a id="client2" href="#">

                        <div class="client-out"></div>

                        <div class="client-over opacity_0"></div>

                    </a>

                    <a id="client3" href="#">

                        <div class="client-out"></div>

                        <div class="client-over opacity_0"></div>

                    </a>

                    <a id="client4" href="#">

                        <div class="client-out"></div>

                        <div class="client-over opacity_0"></div>

                    </a>

                    <a id="client4" href="#">

                        <div class="client-out"></div>

                        <div class="client-over opacity_0"></div>

                    </a>

                    <a id="client5" href="http://www.scriptgates.com">

                        <div class="client-out"></div>

                        <div class="client-over opacity_0"></div>

                    </a>                    

                </div>

CSS этого блока 

.home-layout-clients

{

	position:relative;

	float:left;

	width:100%;	

	background-color:#f1f1f1;

	text-align:center;

}

.home-layout-clients-title

{

	position:relative;

	float:left;

	margin-top: 20px;	

	margin-left: 20px;

	font-family:PT Sans;

	font-weight: bold;

	font-size:20px;

	color:#444444; 

	text-align:left;	

	

}

.home-layout-clients a

{

	margin: 10px 0px 10px 13px;

	color:#d00355;

	font-weight:normal;

	text-decoration:none;

	width: 166px;

	height: 73px;

	position:relative;

	float:left;

}



.client-over, .client-out { position:absolute; top:0px; left:0px; width:100%; height: 100%; } 

.client-over, .client-out { /*background-image:url(../assets/synergy_sprite.png);*/ }



#client1 .client-out{ background-position:0px -280px; }

#client1 .client-over{ background-position:0px -360px; }



#client2 .client-out{ background-position:-170px -280px; }

#client2 .client-over{ background-position:-170px -360px; }



#client3 .client-out{ background-position:-340px -280px; }

#client3 .client-over{ background-position:-340px -360px; }



#client4 .client-out{ background-position:-510px -280px; }

#client4 .client-over{ background-position:-510px -360px; }



#client5 .client-out{ background-position:-680px -280px; }

#client5 .client-over{ background-position:-680px -360px; }

Есть стиль другого блока. 

.clients .item:before,

	.clients .item .before{

		display:block;

		width:250px;

		height:1px;

		margin-left:-125px;

		position: absolute;

		left:50%;

		bottom:0;

		background:url(../../../../../../../img/front-end/clients-g-line.png) 0 0 no-repeat;

		content:"";

	}

	.clients .item:after,

	.clients .item .after{

		display:block;

		width:1px;

		height:109px;

		position: absolute;

		right:0;

		top:0;

		background:url(../../../../../../../img/front-end/clients-v-line.png) 0 0 no-repeat;

		content:"";

	}

Как добавить картинки из этого блока 

clients-v-line.png
и 
clients-g-line.png
в блок 1?
Алексей Барыкин
На сайте с 04.02.2008
Offline
272
Алексей Барыкин
#1
background:url(../../../../../../../img/front-end/clients-v-line.png) 0 0 no-repeat;

../../../../../../../ - это чтобы враг не догадался где картинка или чтобы спайдеры на расслаблялись?

Что значит добавить картинки из блока в блок?

https://adminbook.ru/
Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
#2

Алексей Барыкин, нужно добавить разделители к картинкам которые в блоке 1. Такие пути, потому что сайт скачан был через программу, она создала такие пути.

Алексей Барыкин
На сайте с 04.02.2008
Offline
272
Алексей Барыкин
#3

Чего "довить"?

В блоке 1 нет картинок.

AGRESSOR
На сайте с 04.07.2010
Offline
79
AGRESSOR
#4

html разметка первого блока вижу, а второго где?

ко второму прилагается только css?

Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
#5

Алексей Барыкин, в HTML нет картинок, они в CSS 

.home-layout-clients

{

	position:relative;

	float:left;

	width:100%;	

	background-color:#f1f1f1;

	text-align:center;

}

.home-layout-clients-title

{

	position:relative;

	float:left;

	margin-top: 20px;	

	margin-left: 20px;

	font-family:PT Sans;

	font-weight: bold;

	font-size:20px;

	color:#444444; 

	text-align:left;	

	

}

.home-layout-clients a

{

	margin: 10px 0px 10px 13px;

	color:#d00355;

	font-weight:normal;

	text-decoration:none;

	width: 166px;

	height: 73px;

	position:relative;

	float:left;

}



.client-over, .client-out { position:absolute; top:0px; left:0px; width:100%; height: 100%; } 

.client-over, .client-out { /*background-image:url(../assets/synergy_sprite.png);*/ }



#client1 .client-out{ background-position:0px -280px; }

#client1 .client-over{ background-position:0px -360px; }



#client2 .client-out{ background-position:-170px -280px; }

#client2 .client-over{ background-position:-170px -360px; }



#client3 .client-out{ background-position:-340px -280px; }

#client3 .client-over{ background-position:-340px -360px; }



#client4 .client-out{ background-position:-510px -280px; }

#client4 .client-over{ background-position:-510px -360px; }



#client5 .client-out{ background-position:-680px -280px; }

#client5 .client-over{ background-position:-680px -360px; }

Там идет 5 картинок и нужно между ними сделать разделительную картинку с помощью CSS. Как это сделать?

---------- Добавлено 04.12.2012 в 00:45 ----------

AGRESSOR, если нужно могу дать код HTML второго блока.

Новый постоянный интерфейс Яндекс.Картинок Яндекс позволил управлять дизайном Новости Google разрешили издателям
AGRESSOR
На сайте с 04.07.2010
Offline
79
AGRESSOR
#6

я думаю его нужно выложит тут, чтобы видеть суть, ибо мы не телепаты :)

Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
#7

AGRESSOR, 

<div class="clients">

		<div class="item" id="bx_1914200112_651">

				<div class="logo">

			<img src="../upload/iblock/00f/00fa029a8bb7f69a29e05072ed97a26f.png" width="202" height="14" alt="Coca-Cola" title="Coca-Cola"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_668">

				<div class="logo">

			<img src="../upload/iblock/a7a/a7a3db1b8c9eab9156b2505e5f8263de.gif" width="135" height="85" alt="МТС" title="МТС"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_663">

				<div class="logo">

			<img src="../upload/iblock/90d/90d8447f91d20456200927dc27d64f39.png" width="111" height="90" alt="Ботаник" title="Ботаник"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_662">

				<div class="logo">

			<img src="../upload/iblock/f4d/f4d9c8d52bb2845cd3d96bea6af3ea7b.png" width="151" height="69" alt="Рехау" title="Рехау"/></a>

		</div>

								<a href="../upload/iblock/847/8471d360761498d29bc5b6655ab1205e.jpg" class="open rc12">review</a>

					</div>

		<div class="item" id="bx_1914200112_652">

				<div class="logo">

			<img src="../upload/iblock/bd3/bd389d6ac366445367e14fbc4e575ddd.png" width="140" height="92" alt="Ибери" title="Ибери"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_672">

				<div class="logo">

			<img src="../upload/iblock/951/951a09061604925d52b7203b6bc5157e.png" width="202" height="29" alt="Консультант" title="Консультант"/></a>

		</div>

								<a href="../upload/iblock/6af/6afb864d2c83158a9457eaca01fed413.jpg" class="open rc12">review</a>

					</div>

		<div class="item" id="bx_1914200112_654">

				<div class="logo">

			<img src="../upload/iblock/d8f/d8f31e50c152798c99b8bba8c85a448f.png" width="168" height="24" alt="Кама-евро" title="Кама-евро"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_665">

				<div class="logo">

			<img src="../upload/iblock/7f2/7f2795ac2de9e5753f1e4254e3af036d.png" width="149" height="55" alt="Кухмастер" title="Кухмастер"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_671">

				<div class="logo">

			<img src="../upload/iblock/e28/e2860f8f76f63c5aab310dc50e77648f.gif" width="135" height="85" alt="Газбанк" title="Газбанк"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_666">

				<div class="logo">

			<img src="../upload/iblock/732/7320f7b4e1bbb7f3fbcabb2dc84892aa.png" width="148" height="38" alt="Сканиа" title="Сканиа"/></a>

		</div>

								<a href="../upload/iblock/333/3330a0ef059bbe2e7dc9ea0156454ee3.jpg" class="open rc12">review</a>

					</div>

		<div class="item" id="bx_1914200112_1082">

				<div class="logo">

			<img src="../upload/iblock/478/4786a79d94933a545631522591ade833.png" width="169" height="47" alt="Радник" title="Радник"/></a>

		</div>

								<a href="../upload/iblock/306/306ac322234936d219294875fba5f91c.jpg" class="open rc12">review</a>

					</div>

		<div class="item" id="bx_1914200112_1083">

				<div class="logo">

			<img src="../upload/iblock/1b4/1b4dc4eaf446f1cd8e7c1a2f30c89d76.png" width="157" height="60" alt="Арбат" title="Арбат"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_670">

				<div class="logo">

			<img src="../upload/iblock/828/8288992fc58ceb402ae763b77c3227e7.gif" width="135" height="85" alt="Энтузиаст" title="Энтузиаст"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_1081">

				<div class="logo">

			<img src="../upload/iblock/2ae/2aef766fb5d6aa6ac47bfaaa27105af6.png" width="153" height="61" alt="Автерра" title="Автерра"/></a>

		</div>

								<a href="../upload/iblock/ab9/ab984181dad59f73b08811a433410490.jpg" class="open rc12">review</a>

					</div>

		<div class="item" id="bx_1914200112_1080">

				<div class="logo">

			<img src="../upload/iblock/7eb/7eb39bbda4cd14dd6146f81dec9fbd50.png" width="191" height="32" alt="ВолгаТрансЛифт" title="ВолгаТрансЛифт"/></a>

		</div>

								<a href="../upload/iblock/edc/edcb6e0c894cac0e1ecc1e52f5711641.jpg" class="open rc12">review</a>

					</div>

		<div class="item" id="bx_1914200112_1079">

				<div class="logo">

			<img src="../upload/iblock/b12/b127645eda94fa8c4534b45d28165038.png" width="95" height="88" alt="MTG" title="MTG"/></a>

		</div>

								<a href="../upload/iblock/cab/cabfa3c4172bb2c73dcf35de727b9156.jpg" class="open rc12">review</a>

					</div>

		<div class="item" id="bx_1914200112_673">

				<div class="logo">

			<img src="../upload/iblock/180/18076fe400a2f2f222fee243d004edcb.png" width="187" height="48" alt="СОКК" title="СОКК"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_669">

				<div class="logo">

			<img src="../upload/iblock/8d8/8d8d607f5cb6e3bf9425051d6e558f72.gif" width="89" height="85" alt="Версиво" title="Версиво"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_667">

				<div class="logo">

			<img src="../upload/iblock/50a/50ab2817579e314fb979692f72836427.png" width="156" height="70" alt="NYc woodworking" title="NYc woodworking"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_664">

				<div class="logo">

			<img src="../upload/iblock/07d/07d116d17966861c14e42835ae69e625.png" width="169" height="66" alt="БТА Банк" title="БТА Банк"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_661">

				<div class="logo">

			<img src="../upload/iblock/f62/f62e4af9502f4489d665be092772d3c2.png" width="156" height="26" alt="Евровайн" title="Евровайн"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_660">

				<div class="logo">

			<img src="../upload/iblock/957/957c6bfbdec53218f6fe0fe3ffac0445.png" width="177" height="68" alt="Сады России" title="Сады России"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_658">

				<div class="logo">

			<img src="../upload/iblock/52c/52cd777ff6ae349bbd4627352a1fc1e5.png" width="178" height="55" alt="Resort Real Estate" title="Resort Real Estate"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_657">

				<div class="logo">

			<img src="../upload/iblock/4c3/4c3f89f0dc46c540ad0831963a2d8bf4.png" width="145" height="59" alt="Остек" title="Остек"/></a>

		</div>

								<a href="../upload/iblock/8ec/8eca7c2b7511a97a1a54dc1561ed0e7e.jpg" class="open rc12">review</a>

					</div>

		<div class="item" id="bx_1914200112_656">

				<div class="logo">

			<img src="../upload/iblock/b75/b75427936e2eeed43bcd11758e36e094.png" width="173" height="53" alt="Окна Сок" title="Окна Сок"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_655">

				<div class="logo">

			<img src="../upload/iblock/ee6/ee6e231366f1ee2d7f99ecbfabf1846b.png" width="182" height="53" alt="Нордланд" title="Нордланд"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_653">

				<div class="logo">

			<img src="../upload/iblock/d69/d697b38976e258a0dabb303401825d33.png" width="102" height="100" alt="Млечный путь" title="Млечный путь"/></a>

		</div>

					</div>

		<div class="item" id="bx_1914200112_25">

				<div class="logo">

			<img src="../upload/iblock/47d/47db194bdcf446336c9cfcea1043dfc6.png" width="147" height="85" alt="Беллиген" title="Беллиген"/></a>

		</div>

					</div>

</div>
nikonlay
На сайте с 11.12.2006
Offline
191
nikonlay
#8

мда, запутанный такой код. зачем, например, в цсс прописан класс .before, который в блоке не используется? когда уже есть псевдоэлемент :before?

ну да не суть. как я понял, вам нужно 

.home-layout-clients a:before

{ background:url(../../../../../../../img/front-end/clients-g-line.png) 0 0 no-repeat;}
Мощные фонари и телескоп: https://market.yandex.ru/business/79203856
Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
#9

nikonlay, не помогло. Должна получится такая рамка, а в рамках картинки.

jpg 11111.jpg
Алексей Барыкин
На сайте с 04.02.2008
Offline
272
Алексей Барыкин
#10

Потому что надо перестать заниматься быдлокодерством, внятно сформулировать задачу и выложить исходные данные на http://jsfiddle.net/

12

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