アクセスありがとうございます。
可変幅のタブ形式メニューをスマートなHTMLで実現したく、CSSで試行錯誤しましたが、どうも成功しません。
アドバイス頂ければと思います。
http://www.pageflakes.com/
こちらのタブメニューの様な物を以下のHTMLで作りたいと思っています。
<ul id="tab">
<li><a href="#">TabName1</a></li>
<li><a href="#">TabName2</a></li>
<li><a href="#">TabName3</a></li>
<li><a href="#">TabName4</a></li>
</ul>
使用する画像は
"tab_corner_left.png"
"tab_corner_right.png"
"tab_background.png"
の3種類で、名前の通りそれぞれ左端・右端・テキスト部の背景となっており、タブの高さは29pxです。
わざわざ画像を3種類に分けるのは、タブ内に何文字でも入力できる可変幅にしたいからです。
また、ul自体も"position: absolute;" "top: x;" "right: y;"で配置位置を直接指定できればと思います。
タブ内のテキストも、上下の余白を近似値にしたいと思います。
描画エンジンは、GeckoとIEの両方に対応したいと思います。
その際のhackはなるべく避けたいです。
HTMLの多少の改変は構いませんが、直接imgタグを使ったりは避けたい所です。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
#tab及び#tab内のリストをfloatさせてます
後にくるboxにclearを付けるのを忘れずに
動作確認
IE win IE6
Gecko win firefox
■CSS
#tab {
position:absolute;
top:100px;
left:200px;
background:url(tab_background.png) repeat-x;
height:29px;
list-style:none;
padding:0;
float:left;
}
#tab li {
margin:0;
padding:0;
float:left;
line-height:29px;
background:url(tab_corner_left.png) top left no-repeat;
}
#tab li a{
display:block;
padding:0 10px;
background:url(tab_corner_right.png) top right no-repeat;
}
■HTML
<!-- 可変を再現するためにリンク文字列を伸ばしてます // -->
<ul id="tab">
<li><a href="#">TabName1</a></li>
<li><a href="#">TabName22</a></li>
<li><a href="#">TabName333</a></li>
<li><a href="#">TabName4444</a></li>
</ul>
成る程、私はliにfloatではなくdisplay: inline;で横並びを実現していた為、上手く行かなかった様ですね…。
floatやline-heightの使い方が大変参考になりました。
ありがとうございました。
(一つ気になる点があったのですが、ulへのfloat:left;にはどんな意味があるのでしょうか)
No.2
- 回答日時:
>(一つ気になる点があったのですが、ulへのfloat:left;にはどんな意味があるのでしょうか)
widthを指定しないblock要素の場合、必然的にwidthは可能な限り上階層の幅に収まろうとします
その際、#tabの背景指定の
background:url(tab_background.png) repeat-x;
でx方向にリピートしているので上階層の幅が広い場合無駄に背景が描画されてしまうのです
今回はposition:absolute;を使用することによって、一種の浮遊配置となり、#tab内のコンテンツ内容によってwidthが決まるので背景はコンテンツ分だけリピートされます
そしてfloatの設定なのですが、こちらも上記同様の効果が得られるのです
今回floatの設定を入れた理由は、今後positionの設定がrelativeもしくは排除された際に背景を無駄にリピートさせない為に、ちょっとしたおまじないのつもりでつけました
今後もずっとposition:absolute;でやっていくのなら、消してしまっても構いません
■背景リピートの変化を確認する方法
position:absolute;を消してから
float:left;
を入れる、入れないで挙動を確認してみて下さい
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS「table-cell」で横並びにし...
-
liタグの中に<p>タグやら<dl>を...
-
CSS質問:大手サイトを見ると何...
-
リセットCSSについて
-
円形の配置にするコーディング...
-
【至急】ul li 行間調整ができ...
-
HPを作成していますが、適切な...
-
ol、liをスタイルシートで中央寄せ
-
ol li の回り込みの避け方について
-
divタグ内のコンテンツが重なっ...
-
親ページ側からインラインフレ...
-
jQueryの導入方法について
-
CSSで、親要素にだけ中央揃えを...
-
画像にリンクを張ると画像がず...
-
「・」(黒い点)を非表示にした...
-
表の文字サイズ変更ボタンにつ...
-
HTMLで組織図を作成する方法
-
文字をテーブルで囲ったような...
-
リストマーカーをボックス内に...
-
リストの左余白の削除方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
ポップアップメニューを表のよ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
<ul><li></li></ul>にするメリ...
-
html/cssの、navを2段にする...
-
divタグ内のコンテンツが重なっ...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
リストを2つに分割して、それぞ...
-
ページを開いているときのリン...
おすすめ情報