ホームページ制作会社、サイト制作、その他各種システムの構築、CGI、PHP等のWEBアプリ開発

ホームページ制作・システム構築・DB設計ホームページ制作・システム構築・DB設計
ホームページ制作とWEBシステムの構築、カスタマイズから運用サポートまで。
スペーサー

カテゴリーメニューのリスト化


に関連する記事です。

01.gif

カテゴリーメニューのリスト化について、いろいろと調べてみたのだけれど、どうにも意図したように上手く動いてくれない。

デザインを構築する上で、トップレベルカテゴリをH3タグに、
その下のカテゴリをリストタグで括ろうかと思ったのだが、
MTのコンテナタグはそのように動くことを想定していないようだ。
▼こんな感じ▼
<h3>Aかてごり<h3>
<ul>
<li>Aかてごりのサブカテ1</li>
<li>Aかてごりのサブカテ2</li>
</ul>
といった具合に動くことを予定したCSSを組んでいた。

でもダメなんですね。
確かによくよく解析してみると、そんな風に動かないことが分かった。

で、他のサイトを模倣するようにコンテナタグに従い、CSSを書き直した。
<div id="sidebar2">
<ul>
<li>Aかてごり
<ul>
<li>Aかてごりのサブカテ1</li>
<li>Aかてごりのサブカテ2</li>
</ul>
</li>
</ul>
</div>
といった具合だ。


それでCSSの方は以下の感じ。
#sidebar2 ul{
margin: 0;
margin-top:10px;
}
/*
IE7だけ表示がおかしかったのでハックしました。
*/
*:first-child+html #sidebar2 ul {
ハックの内容
}

#sidebar2 ul li{
display: inline;
}

#sidebar2 ul ul{
margin: 0;
}

#sidebar2 ul ul li{
display: inline;
}
要素についてはご自由に・・・

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-2105
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+



Valid XHTML 1.0 Transitional スペーサー 正当なCSSです!