Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Иконка в меню (https://javascript.ru/forum/xhtml-html-css/11626-ikonka-v-menyu.html)

Golovastik 03.09.2010 21:36

Иконка в меню
 
Вложений: 2
Хочу разместить сво иконку ,я создал её, она находиться в папке имг.

Хочу как-то в стилях прописать изображение, а потом подключить в пункты меню эту картинку,чего-то не получаеться правильно сделать это, вот фото которое я хочу получить, и архив в котором пытаюсь это сделать.

Golovastik 03.09.2010 22:32

Говорят,что через списки лучше оформлять это дело, вот поробовал, чего-то не срабатывает.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Видео</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
* {margin:0; padding:0;}
.ikonka ul li{list-style-image:url(img/ikonka.png); }


 body{min-width:770px; overflow:hidden;}
 img {border: none;}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
.bordur {border-collapse:collapse;}
.bordur td {border:1px solid black;}
.block{display:block;}
.d {width:230px;}
.d a{display:block; border-top:1px solid black;
padding:10px 10px 10px 20px;
}


</style>
</head>

<body class="marginpadding">

<!-- ШАПКА -->
<table class="bordur" width="100%">
<tr>
<td colspan="3" class="shapkafon">
<div class="shapka" ></div></td>
</tr>


<!-- СЕРЕДИНА -->
<tr>
<td class="d">
<img class="block" src="img/videoyroki.png"  >
<ul class="ikonka">
<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><a href="#">Пунтк 5</a></li>
</ul>
</td>

<td > С новым годом!</td>

<td class="d"  valign="top">
<img class="block" src="img/videoyroki.png"  >
<ul class="ikonka">
<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><a href="#">Пунтк 5</a></li>
</ul>
</td>
</tr>
</table>

</body>
</html>

monolithed 03.09.2010 23:21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WYSIWYG</title>
<style type="text/css">
dl {
	border: 1px solid #DDDDDD;
	border-bottom: none;
	margin: 0px auto;
	overflow: hidden;
	width: 100px;
	height: auto;
}
		
dt {
	background: url('http://cdn.iconfinder.net/data/icons/splashyIcons/arrow_state_grey_right.png') 0% 50% no-repeat;
	border-bottom: 1px solid #DDDDDD;
	disply: block;
	padding: 5px 15px 5px;
	height: 20px;
}
</style>
</head>
  <body>
	<dl>
		<dt>Text 1</dt>
		<dt>Text 2</dt>
		<dt>Text 3</dt>
	</dl>
  </body>
</html>


Часовой пояс GMT +3, время: 19:16.