ul/liタグでのリスト表示におけるレイアウト崩れについて

締切済

質問者：armada-compaq
質問日時：2010/02/09 21:20
回答数：1件

ul/liタグでのリスト表示におけるレイアウト崩れについて

現在、タブコントロールの画面を作成しているのですが、
画面のレイアウトが崩れてしまう現象が発生しています。
2日間デバッグしてみたのですが解決しませんでしたので、
現状のHTMLの抜粋をご提示致しますので
お手数ですがご助言して頂けないでしょうか。

■タブコントロール画面について

画面上にタブを新規に作成するボタンがあり、
そのボタンを押下することによりjavascriptで
ul/liのコードを動的に作成しています。
(prototype.jsを使用しています。)

タブは画面上最大5個まで同時に表示できますが
6個以上になった場合は、タブコントロールの両端に
スクロールボタン(「戻る」・「進む」)を表示するようにしています。
また、対象のタブをクリックされた場合には画像で「閉じる」ボタンを
表示するようにして、閉じるボタンを押下した場合はその
タブを消去するようにしています。

なお、タブコントロールの完成イメージとしては以下のサイト
のようなものを目指しています。http://members.ecnavi.jp/
(タブコントロールの下にパネル部分があり選択されたタブ
においては、タブのボトム部分の線が隠れる仕様です。)

■現象の詳細

タブが6個以上になり「戻る」ボタンを表示した際にタブ部分が
「戻る」ボタンの半分程度の高さに浮き上がって表示されてしまいます。
なお、「進む」ボタンに関しても同様です。
※浮き上がってしまっているタブの枠線下部には線は引かれていません。

　□□□□□
□　　　　　
(実際は、上段の□が高さ半分程度下に下がるイメージです。)

#####生成されたHTMLの抜粋#####

<div id="myTab">
<ul class="tabs">
<li class="LRButton" style="width: 18px; height: 27px; background-color: rgb(176, 196, 222);"> < </li>
<li title="6:1f"><div style="width: 89px; height: 27px; overflow: hidden;" class="ItemIdle">
<div style="width: 69px; font-size: 12px; padding: 5px; overflow: hidden; float: left;">6</div>
<div style="float: right; display: none;">
<a href="javascript:void(0);">
<img src="./images/Close.gif" style="width: 14px; height: 14px; border: medium none; margin-right: 2px; margin-top: 2px;" title="close">
</a>
</div>
</div>
</li>
<li class="tab-active" title="6:1fffff">
<div style="width: 89px; height: 27px; overflow: hidden;" class="ItemSelected">
<div style="width: 59px; font-size: 12px; padding: 5px; overflow: hidden; float: left;">6</div>
<div style="float: right; display: block;">
<a href="javascript:void(0);"><img src="./images/Close.gif" style="width: 14px; height: 14px; border: medium none; margin-right: 2px; margin-top: 2px;" title="close">
</a>
</div>
</div>
</li>
</ul>
</div>
<div class="panel">
<table width="825px" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2010/02/12 18:06

回答がないみたいなので…

＞そのボタンを押下することによりjavascriptで
＞ul/liのコードを動的に作成しています。
それだけのものを作れる方ならば、ご提示のソースだけでは情報が不十分なこともおわかりになるはずと思いますが？

HTMLの構成もよくわからない程度の情報しかないので、CSSでのレイアウトやスクリプトでの制御をどのようにしているのかまったくわかりません。
それなので、誰も回答しようがないというのが実情かと…

雰囲気でしかわかりませんが、CSSの指定とstyleによる指定の両方を使っているみたいなので、scriptで変更する際にそのあたりで混乱が生じているのではないでしょうか？
予定外の表示になっている時のソースと、CSSを照合してみれば原因がわかると思いますが…

以下、かなり手抜きですが、classの設定だけでご質問のような表示になる構成の簡単な一例を作ってみましたので、ご参考までに。（手抜きなので、CSSなどは大分いい加減です）
・タブを生成（削除）する場合は<li>要素を生成（削除）する。
　（divをここに入れないほうが楽な気もしますが、ご提示のサンプルがそんな
　　雰囲気なので）
・タブの表示制御は、li要素のclass名にhideまたはactiveを追加（削除）する
　ことで、非表示やアクティブタブの表示となる。
　（スクリプトからはclass名の設定だけで表示の制御が可能）
・矢印のタブ幅を他の半分に設定して、都合6個のタブまで表示可能。
　6個以上の時に、矢印と5個のタブを表示すると同じ幅になるイメージ。
・スクリプト部分は省略。

<html>
<head><title>test</title>
<style type="text/css">
#myTab { position:relative; width:384px; }
ul.tabs { list-style-type:none; }
ul.tabs, ul.tabs * { margin:0; padding:0; }
ul.tabs li.LRbutton, ul.tabs li.tab { float:left; }
ul.tabs li.LRbutton span, ul.tabs li.tab span {
display:block; height:20px; _height:26px; padding:2px;
background-color:#ddd; border:1px solid #aaa;
}
ul.tabs li.LRbutton span { width:26px; _width:30px; }
ul.tabs li.tab span { width:58px; _width:64px; }
ul.tabs div.tab_contents {
width:384px; height:200px; background-color:#eee; overflow:auto;
position:absolute; display:none; left:0px; top:26px;
}
ul.tabs li.active span {
background-color:#eee; border-bottom:1px solid #eee;
color:#a33; font-weight:bold;
}
ul.tabs li.hide { display:none; }
ul.tabs li.active div.tab_contents { display:block; }
</style>
</head>

<body>
<div id="myTab">
<ul class="tabs">
<li class="LRbutton"><span><</span></li>
<li class="tab hide"><span>tab1</span>
<div class="tab_contents">tab1の内容</div>
</li>
<li class="tab"><span>tab2</span>
<div class="tab_contents">tab2の内容</div>
</li>
<li class="tab active"><span>tab3</span>
<div class="tab_contents">tab3の内容</div>
</li>
<li class="tab"><span>tab4</span>
<div class="tab_contents">tab4の内容</div>
</li>
<li class="tab"><span>tab5</span>
<div class="tab_contents">tab5の内容</div>
</li>
<li class="tab"><span>tab6</span>
<div class="tab_contents">tab6の内容</div>
</li>
<li class="tab hide"><span>tab7</span>
<div class="tab_contents">tab7の内容</div>
</li>
<li class="LRbutton"><span>></span></li>
</ul>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

お忙しい中、ご回答して頂きありがとうございました。
ご指摘の通り、ソースは不足しているのは認識していたのですが
仕事の関係もありましてある程度のところまでにしてありました。

この後、自分なりに色々検討してみたのですが、シンプルなtdタグでの実装方法に
変更した結果仕様を満たすことが出来ました。

ご迷惑をおかけして大変申し訳ありませんでした。

通報する

お礼日時：2010/03/04 09:00

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！