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>
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
回答がないみたいなので…
>そのボタンを押下することにより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>
お忙しい中、ご回答して頂きありがとうございました。
ご指摘の通り、ソースは不足しているのは認識していたのですが
仕事の関係もありましてある程度のところまでにしてありました。
この後、自分なりに色々検討してみたのですが、シンプルなtdタグでの実装方法に
変更した結果仕様を満たすことが出来ました。
ご迷惑をおかけして大変申し訳ありませんでした。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSで背景画像を一番下にもって...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSS、width100%でもできる余白
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
safariでの横並びリスト(List...
-
画像と一緒にスライドするリン...
-
widthやheightの数値に単位(px...
-
hpビルダー 複数の表の罫線を...
-
<div>と<div>の間の10px程の...
-
ディスプレイのサイズに合わせ...
-
html5 2段組で行頭を揃える方法
-
divで囲まれたpaddingの指定を...
-
cssで投稿した画像を中央に表示...
-
embed タグを用いると表示が遅い
-
IE6にてliタグに対してposition...
-
横スクロールサイトの中央寄せ
-
CSSで指定した背景画像にリンク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報