ヘッダ 03

このテンプレートで使っている画像です。

title.jpg back.jpg menu.gif menu_r.gif

--- HTML ---
<div id="header">
 <h1><img src="img/title.jpg" alt=""></h1>
 <ul>
 <li><a href="">link-a</a>|<a href="">link-b</a></li>
 </ul>
 <div>
 <a href=""><img src="img/menu.gif" alt="MENU1"></a>
 <a href=""><img src="img/menu.gif" alt="MENU2"></a>
 <a href=""><img src="img/menu.gif" alt="MENU3"></a>
 <a href=""><img src="img/menu.gif" alt="MENU4"></a>
 <a href=""><img src="img/menu_r.gif" alt="MENU5"></a>
 </div>
</div>

--- CSS ---
#header {
 width:800px;
 min-height:110px;
 height:auto !important;
 height:110px;
 background:url(img/back.jpg) top right no-repeat;
}

#header h1 {
 margin:0;
}

#header ul {
 margin:0;
 padding:8px 10px 3px 10px;
 font-size:70%;
 text-align:right;
}

#header li {
 margin:0 0 5px 0;
 line-height:1.32em;
}

#header div {
 clear:both;
}

#header div img {
 border-top:1px solid #fff;
}

#header img {
 float:left;
}

#header a {
 color:#3366cc;
 text-decoration:none;
}

#header a:hover {
 color:#cc0000;
}