いつも大変お世話になっております。
logical_jp_baserというテーマを使っています。
さて、使っているテーマのメニューバーが、画面の横端まで伸びています。
この部分を切り取りたいのです。
それで、使っているテーマの css>base.css ファイル中の#globalnaviに、width:○○px;と打ち込んだら、いいサイズにはなったのですが、メニューバーが左端によってしまったのです。
調べたら中央揃えを直接指定する事は出来ないらしく、positionとfloatを融合させて、左50%をしていてからまた50%を折り返す手法で攻めてもうまくゆかず。
どうか、手を貸してくださると助かります。
cssファイルは以下の通り。
#globalNav {
background: #FFF;
border-style: solid;
border-width: 2px 0;
border-radius: 6px;
border-color: #EEE transparent #FFF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#FFFFFF));
background-image: -webkit-linear-gradient(top, #EEEEEE, #FFFFFF);
background-image: -moz-linear-gradient(top, #EEEEEE, #FFFFFF);
background-image: -ms-linear-gradient(top, #EEEEEE, #FFFFFF);
background-image: -o-linear-gradient(top, #EEEEEE, #FFFFFF);
background-image: linear-gradient(top, #EEEEEE, #FFFFFF);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#EEEEEE, endcolorstr=#FFFFFF));
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#EEEEEE, endcolorstr=#FFFFFF))";
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.2);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.2);
-ms-box-shadow: 0 3px 6px rgba(0,0,0,.2);
-o-box-shadow: 0 3px 6px rgba(0,0,0,.2);
box-shadow: 0 3px 6px rgba(0,0,0,.2);
}
#globalNav ul {
width: 960px;
height: 32px;
margin: 0 auto;
border-style: solid;
border-width: 0 0 0 1px;
border-radius: 5px;
border-color: #CCC;
zoom: 1;
}
#globalNav ul:after {
content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0;
}
#globalNav ul li {
position: relative;
float: left;
width: 14.285%;
}
#globalNav ul.gnav5 li { width: 20%; }
#globalNav ul.gnav6 li { width: 16.66%; }
#globalNav ul.gnav8 li { width: 12.5%; }
#globalNav ul li a {
overflow: hidden;
display: block;
color: #333;
font-size: 160%;
height: 32px;
line-height: 32px;
border-style: solid;
border-width: 0 1px 0 0;
border-color: #CCC;
text-decoration: none;
text-align: center;
text-shadow: 0 0 .3em rgba(0,0,0,.2);
}
#globalNav ul li a:hover,
#globalNav ul li a:focus,
#globalNav ul li.stay a:link,
#globalNav ul li.stay a:visited {
background-color: #EEE;
background-image: -webkit-gradient(linear, left top, left bottom, from(#DDDDDD), to(#F3F3F3));
background-image: -webkit-linear-gradient(top, #DDDDDD, #F3F3F3);
background-image: -moz-linear-gradient(top, #DDDDDD, #F3F3F3);
background-image: -ms-linear-gradient(top, #DDDDDD, #F3F3F3);
background-image: -o-linear-gradient(top, #DDDDDD, #F3F3F3);
background-image: linear-gradient(top, #DDDDDD, #F3F3F3);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#DDDDDD, endcolorstr=#F3F3F3));
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#DDDDDD, endcolorstr=#F3F3F3))";
}
#globalNav ul li ul {
display: none;
position: absolute;
top: 32px;
left: 0;
width: 130%;
height: auto;
padding: 3px;
z-index: 98;
background: #FFF;
border-style: solid;
border-width: 1px;
border-color: #CCC;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.3);
-moz-box-shadow: 0 2px 4px rgba(0,0,0,.3);
-ms-box-shadow: 0 2px 4px rgba(0,0,0,.3);
-o-box-shadow: 0 2px 4px rgba(0,0,0,.3);
box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
#globalNav ul.gnav5 li ul { width: 110%; }
#globalNav ul.gnav6 li ul { width: 120%; }
#globalNav ul.gnav8 li ul { width: 150%; }
#globalNav ul li ul li {
float: none;
display: block;
width: auto !important;
}
#globalNav ul li ul li a {
color: #333;
font-size: 120%;
height: 2.8em;
line-height: 2.8em;
padding: 0 1em;
background: #FFF;
border-style: solid;
border-width: 1px 0 0;
border-color: #CCC;
text-shadow: none;
text-align: left;
}
#globalNav ul li ul li:first-child a {
border-width: 0;
}
#globalNav ul li ul li a:hover {
color: #333;
background: #F3F3F3;
}
メニューバーそのもののhtmlはこうです。
<nav id="globalNav" role="navigation">
<ul class="global-menu clearfix">
<li class="menu01 first current">
<a href="/">ホーム</a> </li>
<li class="menu02">
<a href="/about">概要</a> </li>
<li class="menu03">
<a href="/kikaku">企画</a> </li>
<li class="menu04">
<a href="/access">案内</a> </li>
<li class="menu05">
<a href="/link">リンク</a> </li>
<li class="menu06 last">
<a href="◯◯">ブログ</a> </li>
</ul>
<!--/#globalNav --></nav>
毎回面倒な質問で恐縮です。どうぞよろしくお願い致します。
