webサイトにアイコンつきリスト作成
#16 アイコン付きリストを作ろう
http://dotinstall.com/lessons/website_html/9016
を参考に
アイコンつきリストを作成
<div id="sidebar">
の中に
<ul class="submenu"> <li><a href="">menu 1</a></li> <li><a href="">menu 2</a></li> <li><a href="">menu 3</a></li> </ul>
を追加する
これをCSSで設定する
<ul class="submenu">
なので
ul.submenu > li{
}
で設定していく
background:url('dotinstall.png');
というように、url(ファイル名);
とすればアイコンで表示される
ただし、このままだとアイコンが繰り返し連続表示なので
background:url('dotinstall.png')no-repeat;
というように
no-repeat をつければ繰り返し表示されなくなる
これだけだと、アイコンとリンクの文字がかぶるため
padding: 0 0 5px 20px;
というように
上０ 右０ 下5px 左20px の余白を設定
これで、アイコンとリンクがかぶらなくなる