ヘッダ 02

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

title.jpg back.jpg

--- 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="">MENU-1</a>|<a href="">MENU-2</a>|<a href="">MENU-3</a>|
 <a href="">MENU-4</a>|<a href="">MENU-5</a>
 </div>
</div>

--- CSS ---
#header {
 width:800px;
 min-height:80px;
 height:auto !important;
 height:80px;
 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 img {
 float:left;
 border-bottom:1px solid #fff;
}

#header div {
 min-height:16px;
 height:auto !important;
 height:16px;
 padding:5px 0;
 color:#fff;
 background:#336699;
 font-size:80%;
 text-align:left;
 line-height:1.2em;
 clear:both;
}

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

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

#header div a {
 padding:5px 10px;
 color:#fff;
}

#header div a:hover {
 padding:6px 10px;
 color:#fff;
 background:#003366;
}