はじめに
新CSSデザインリスト型の２カラム右のレイアウトで試していてサイドバーが移動してメニューが崩れていました。サイドバーを固定してずれないようにしました。そのメモです。
フリースペース編集
フリースペース欄に以下のよううなHTMLを入力します。見やすく改行をいれていますが，実際は改行を取り除いて入力してください。なおフリースペースの表示位置はトップになるように配置しています。
<div id="topmenu">
<ul>
<li><a href="URLアドレス">menu1</a></li>
<li><a href="URLアドレス">menu2</a></li>
<li><a href="URLアドレス">menu3</a></li>
<li><a href="URLアドレス">menu4</a></li>
<li><a href="URLアドレス">menu5</a></li>
<li><a href="URLアドレス">menu6</a></li>
</ul>
</div>
ちなみに私の使っているHTMLです。参考に
<div id="topmenu"><ul><li><a href="http://ameblo.jp/qelab">ホーム</a></li><li><a href="http://profile.ameba.jp/qelab/" target="_blank" >プロフィール</a></li><li><a href="http://ameblo.jp/qelab/entrylist.html" >記事一覧</a></li><li><a href="http://ameblo.jp/qelab/theme-10095087485.html" >CSSデザイン</a></li><li><a href="http://ameblo.jp/qelab/entry-12142452037.html" >リンクと免責</a></li></ul></div>
CSS
/*--------------------------------------------------
* ヘッダ部分のナビゲーションメニュー
*--------------------------------------------------*/
/* サイドバーを固定しメニューが崩れないように調整 */
#subAInner{
position:static!important;
margin-top: 10px!important;
}
/* メニュー部分*/
#topmenu {
margin:0;
padding:0;
width:1120px;
position:absolute;
top: 0px;
z-index: 100;
margin: -150px 0 10px -770px; /* 位置調整*/
}
#topmenu ul {
border:0;
margin:0;
padding:0;
list-style-type:none;
}
#topmenu ul li {
display:block;
float:left; /*横に回り込ませる*/
border:0;
margin:0;
text-align:center;
}
#topmenu ul li a {
width:224px; /*1120px / 5 = 224 px*/
display:block;
height:30px;
line-height:30px;
background-color:#000000;
color:#ffffff;
text-decoration:none;
}
ポイント
サイドバーが動的に書き換えられているようでした。スクロールするとスタイルが書き換えられるようだったので， !important で強制的に指定しています。
さいごに
これで新CSSもいろいろと対応が可能になりそうです。あともう少し。