вставка картинки как маркера списка

[Ксения :)]

Я создаю меню на своем сайте. Для того, чтобы сделать его красивым, попробовала вставить маркированный список, маркером сделала картинку - теннисный мячик.

Но возникла проблема, мячик по отношению к кнопке меню находится выше, а мне хотелось бы чтобы и маркер и кнопка находились на одном уровне. Как это сделать.

Как получается меню:

[PacMan]

через background

[ARA]

Странно, а блок синий, это тег я так понимаю?

покажи код!

[Evgeny]

Картинку с мячеком можно переделать так чтоб над мячеком был кусок прозрачного фона

а вообще конечно удобней через background делать как советует PacMan, там и позиционирование можно задать какое захоччешь ...

[Ксения :)]

body {
 margin: 0;
 padding: 0;
 background: #E5E5E5;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 13px;
 color: #666666;
}

blockquote {
 font-style: italic;
}

a {
 color: #135293;
}

a:hover {
 text-decoration: none;
}

.title1 {
 margin: 0;
 padding: 10px 0;
 background: url(images/img07.gif) repeat-x left bottom;
 font-weight: normal;
 font-size: 129%;
 color: #FFFFFF;
}

.title2 {
 margin: 0;
 padding: 10px 0;
 background: url(images/img09.gif) repeat-x left bottom;
 font-size: 227%;
 font-weight: normal;
 color: #135293;
}

.title3 {
 margin: 0;
 padding: 10px 0;
 background: url(images/img11.gif) repeat-x left bottom;
 font-size: 129%;
 font-weight: normal;
 color: #FFFFFF;
}

.boxed {
 padding: 5px 30px 20px 30px;
}

.boxed p, .boxed ul, .boxed ol {
 line-height: 180%;
}

.orange {
 margin: 20px 30px;
 background: #FF9523 url(images/img10.gif) repeat-x;
 color: #FFFFFF;
}

.orange a {
 color: #FFFFFF;
}

.col-one {
 float: left;
 width: 300px;
}

.col-two {
 float: right;
 width: 300px;
}

/* Page */

#page {
 width: 980px;
 margin: 0 auto;
 background: #FFFFFF;
}

/* Sidebar */

#sidebar {
 float: left;
 width: 240px;
}

/* Logo */

#logo {
 height: 70px;
 background: #FFFFFF url(images/img02.gif) repeat-y right top;
}

#logo h1, #logo h2 {
 margin: 0;
 text-transform: lowercase;
 text-align: center;
 font-weight: normal;
 font-style: italic;
 color: #9C9C9C;
}

#logo h1 {
 padding: 190px 0 0 0;
 background: url(images/img03.gif) no-repeat center center;
 font-size: 36px;
}

#logo h2 {
 font-size: 14px;
}

#logo a {
 color: #9C9C9C;
 text-decoration: none;
}


#menu {
 padding: 20px;
 background: white;
 border-bottom:white;

}


#menu ul {
 margin: 20;
 padding: 40;
 list-style:none;
}

#menu li {
 padding:30px 0;
 background: white;
}

#menu li.first {
 color: #000;
 background: #FFFFFF;
 border-bottom: 1px solid #FFFFFF; 
list-style: url(images/tennis_ball.gif);



}

#menu a {
 color: white;
 padding: 20px 40px;

 border: 1px solid #0F3974;
 border-bottom: none;
 background: #006EBD;
 text-decoration: none;
}

#menu a:hover {
 color: #FFFFFF;
 background: #28166F;
 border-color: #0F3974;

}


#links {
 float: left;
 width: 220px;
 height: 45px;
 padding: 35px 0 0 20px;
 background: url(images/img13.gif) repeat-x;
}

#links a {
 color: #FFFFFF;
}

а вот index.htm часть где меню:

 <div id="menu">
 <ul>
 <li class="first"><a href="#">Главная </a></li>
 <li><a href="#">Новости </a></li>
 <li><a href="#">Тренеры</a></li>
 <li><a href="#"> Галерея </a></li>
 <li><a href="#">Рейтинги</a></li>

 </ul>
 </div>

А как изменить background?

[Evgeny]

#menu li.first {
 color: #000;
 background: #FFFFFF;
 border-bottom: 1px solid #FFFFFF; 
list-style: none;
background-image: url(images/tennis_ball.gif);
background-position: 0px 0px;
background-repeat: no-repeat;
padding-left: 20px;
}

В право в лево вверх низ регулируем вот эти параметры: background-position: 0px 0px; padding-left: 20px;

[Ксения :)]

  Evgeny said:

#menu li.first {
 color: #000;
 background: #FFFFFF;
 border-bottom: 1px solid #FFFFFF; 
list-style: none;
background-image: url(images/tennis_ball.gif);
background-position: 0px 0px;
background-repeat: no-repeat;
padding-left: 20px;
}

В право в лево вверх низ регулируем вот эти параметры: background-position: 0px 0px; padding-left: 20px;

спасиб большое)