Иконка в меню
Вложений: 2
Хочу разместить сво иконку ,я создал её, она находиться в папке имг.
Хочу как-то в стилях прописать изображение, а потом подключить в пункты меню эту картинку,чего-то не получаеться правильно сделать это, вот фото которое я хочу получить, и архив в котором пытаюсь это сделать. |
Говорят,что через списки лучше оформлять это дело, вот поробовал, чего-то не срабатывает.
<!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> |
<!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. |