;

しんみゆ.com

群馬県高崎市在住の夫婦で日記というか、つぶやきブログしてます:しんみゆ.com

【仕事メモ】グローバルナビの位置固定でul liの高さ中央にテキスト配置

【サンプル】

サンプルページはこちら>>

【html】

<navi>
<div class="bg-navi">
<ul class="global-navi">
<li><a href="#page">ロゴ</a></li>
<li><a href="#" class="navi-blue">テキスト1<br>
<span class="text-70">(テクニカルファーム)</span></a></li>
<li><a href="#" class="navi-blue">テキスト2</a></li>
<li><a href="#" class="navi-blue">テキスト3</a></li>
<li><a href="#" class="navi-orange">テキスト4</a></li>
</ul>
</div>
</navi>

【css】

.bg-navi {
position: fixed !important;
position: absolute;
top: 0;
left: 0;
background: #CCC;
clear: both;
height: 75px;
width: 100%;
}
.global-navi {
width: 900px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
}
.global-navi li {
padding-right: 5px;
padding-left: 5px;
font-size: 16px;
line-height: 1em;
width: 170px;
float: left;
}
.global-navi li a {
height: 56px;
width: 170px;
color:#FFF;
background: #FFF;
text-align: center;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
display: table-cell;
vertical-align: middle;
margin: 0;
}
.global-navi li a.navi-orange {
background: #FF9900;
}
.global-navi li a.navi-blue {
background: #205EA7;
}
.global-navi li a:hover {
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
/*for IE6 */
* html ul.global-navi li a{
display: inline;
zoom: 1;
}/*for IE7 */
*:first-child+html ul.global-navi li a{
display: inline;
zoom: 1;
}
.text-70 {
font-size: 70%;
}

%d人のブロガーが「いいね」をつけました。

ページトップ