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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
border-style:solidで文字がずれる
-
widthやheightの数値に単位(px...
-
インラインフレーム内の表示位...
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
Media Queries 4 で 非推奨とな...
-
CSS テキストフィールドの文字...
-
余分な縦スクロールバーが出て...
-
div要素の左寄せ、中央寄せ、右...
-
スタイルシートで背景の繰り返...
-
safariだけ、cssが効きません!
-
CSS3で角丸写真にシャドーを付...
-
CSSで3分割した背景画像を配置...
-
マウスオーバー時に画像と一緒...
-
初心者html・CSS ウィンドウを...
-
スクロールボックスを中央に配...
-
ライトボックスでスクロールバー
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報