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

Своя картинка для li

Pasha199
На сайте с 17.02.2009
Offline
167
Pasha199
1444

Есть блок ссылок, он сделан на li

Нужно добавить картинку к "Ссылка 1, 2, 3, 4" к "Еще ссылка" картинка не нужна. Помогите это сделать пожалуйста.

HTML 

<div class="service"> 

<ul> 

  <li><a href="#">Ссылка 1</a></li> 

  <li><a href="#">Ссылка 2</a></li> 

  <li><a href="#">Ссылка 3</a></li> 

  <li><a href="#">Ссылка 4</a></li> 

  <li><div class="all"><a href="#">Еще ссылка</a></div></li> 

</ul> 

</div>

CSS 

.service 

{ 

   float: left; 

   background-color: #FFFFFF; 

   font-family: Verdana; 

   width: 210px; 

   border-radius: 6px; 

   -moz-border-radius: 6px; 

   box-shadow: 0 3px 10px #e1e5e8, 0 0 10px #F6F5F5 inset; 

   line-height:25px; 

   margin-top: -5px;

} 

.service ul li a 

{ 

   color: #2e83c6; 

   font-size: 11px; 

   text-decoration: none; 

   border-bottom: 1px dotted; 

   font-weight: bold; 

} 

.service ul li a:hover 

{ 

   color: #ff8400; 

   font-size: 11px; 

   font-weight: bold; 

}  



.service ul 

{ 

    text-decoration: none; 

    font-weight: bold;

    list-style-type: none;

	margin: 15px 15px 35px -25px;



}

.service ul .all 

{ 

    float: right;  

} 



.service ul .all a 

{ 

     color: #ff843b; 

     font-size: 11px; 

} 

.service ul .all a:hover 

{ 

     color: #2e83c6; 

     font-size: 11px; 

     border-bottom: 0 dotted; 

}
DP
На сайте с 24.04.2012
Offline
16
developer_php
#1

Не понял. Картинку фона? Общая на всех? Если так, то добавьте ко всем li где нужна ссылка какой-нибудь класс, например withimage, и в css пропишите 


.service ul li.withimage{

    background:url(путь к картинке);

}
FernandoDiaz
На сайте с 23.01.2012
Offline
13
FernandoDiaz
#2 

.service  

{  

   float: left;  

   background-color: #FFFFFF;  

   font-family: Verdana;  

   width: 210px;  

   border-radius: 6px;  

   -moz-border-radius: 6px;  

   box-shadow: 0 3px 10px #e1e5e8, 0 0 10px #F6F5F5 inset;  

   line-height:25px;  

   margin-top: -5px; 

}  

.service ul li a  

{  

   color: #2e83c6;  

   font-size: 11px;  

   text-decoration: none;  

   border-bottom: 1px dotted;  

   font-weight: bold;  

}  

.service ul li a:hover  

{  

   color: #ff8400;  

   font-size: 11px;  

   font-weight: bold;  

}   



.service ul  

{  

    text-decoration: none;  

    font-weight: bold; 

    list-style-type: none; 

    margin: 15px 15px 35px -25px; 



} 

.service ul .all  

{  

    float: right;   

}  



.service ul .all a  

{  

     color: #ff843b;  

     font-size: 11px;  

}  

.service ul .all a:hover  

{  

     color: #2e83c6;  

     font-size: 11px;  

     border-bottom: 0 dotted;  

}



.service li:nth-child(1) {

background-image: url(images/edit.png);

background-repeat:no-repeat;

background-position: 0px 7px;

padding-left: 20px;



}



.service li:nth-child(2) {

background-image: url(images/comment.png);

background-repeat:no-repeat;

background-position: 0px 7px;

padding-left: 20px;



}



.service li:nth-child(3) {

background-image: url(images/folder.png);

background-repeat:no-repeat;

background-position: 0px 7px;

padding-left: 20px;



}



.service li:nth-child(4) {

background-image: url(images/edit.png);

background-repeat:no-repeat;

background-position: 0px 7px;

padding-left: 20px;



}

Так?

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

FernandoDiaz, да, спасибо. Можно еще HTML?

FernandoDiaz
На сайте с 23.01.2012
Offline
13
FernandoDiaz
#4
Pasha199:
FernandoDiaz, да, спасибо. Можно еще HTML?

HTML без изменений ;-)

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

FernandoDiaz, А как сделать 1 картинку для всех пунктов? т.е. будет не 4 разных картинки, а 1 картинка.

P.S. тоже iMac? :)

sigor
На сайте с 02.05.2011
Offline
15
sigor
#6

БАЯН получился :)

FernandoDiaz
На сайте с 23.01.2012
Offline
13
FernandoDiaz
#7 

.service li {
background-image: url(images/edit.png);
background-repeat:no-repeat;
background-position: 0px 7px;
padding-left: 20px;

}
Pasha199:
P.S. тоже iMac?

Macbook =)

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

FernandoDiaz, спасибо большое, получилось :)

FernandoDiaz
На сайте с 23.01.2012
Offline
13
FernandoDiaz
#9
Pasha199:
FernandoDiaz, спасибо большое, получилось :)

Да не за что)

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

HTML 

<div class="item-list">

<p><strong>Пакет «1»</strong></p>

<ul>

	<li>Ссылка <strong>1</strong>;</li>

</ul>

</div>

CSS 

.item-list{

background-color: #FFFFFF;

border-radius: 6px;

-moz-border-radius: 6px;

box-shadow: 0 3px 10px #e1e5e8, 0 0 10px #F6F5F5 inset;

padding:23px 25px;

line-height:15px;

margin: 0 0 40px 30px;

}

.item-list li {

background:url(../images/bul.gif) no-repeat;

background-position: 0px 0px;

padding-left: 20px;

font-size: 12px;

}

.item-list:after {

	content:"";

	clear:both;

	display:block;

}

.item-list ul {

	margin:0 -45px -20px 0;

	padding:0;

	list-style:none;

	float:left;

	position:relative;

}

.item-list ul li {

	width:500px;

	margin:0px 0 5px 0px;

}

В этом же классе "item-list" идет таблица из 4 картинок как их правильно вставить? 

<table>

	<tr>

		<td><a title=""><img src="images/uga_m.png" alt=""/></a></td>

		<td><a title=""><img src="images/rosdorstroy_m.png" alt=""/></a></td>

		<td>

			<a title=""><img src="images/normotos_m.png" alt=""/></a>

		</td>

		<td>

			<a title=""><img src="images/duohem_m.png" alt=""/></a>

		</td>

	</tr>



</table>

Если их вставить сразу под ul то картинки вставляются рядом, а нужно внизу под списком. Как лучше картинки сделать? Таблицей или на дивах?

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