アクセスありがとうございます。
可変幅のタブ形式メニューをスマートな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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
htmlの<ol>タグで、数字などを...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
<ul><li></li></ul>にするメリ...
-
<ul>~</ul>が二つ続くと間に改...
-
CSSでの<ul><li>を使った改行設定
-
リストの数字のフォントサイズ...
-
ローカルナビゲーションのマー...
-
float:leftで<li>要素を横並び...
-
html css マークアップについて
-
<table>の高さ固定。情報増加時...
-
ドロップダウンメニューが隠れ...
-
HTML5のfooterに見出しを付けて...
-
URLにアクセスした際に指定した...
-
divタグ内のコンテンツが重なっ...
-
テーブル内のプルダウンの下に...
-
文法チェックの<A>と</A>の間が...
-
円形の配置にするコーディング...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
divタグ内のコンテンツが重なっ...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
テーブル内のプルダウンの下に...
-
【至急】ul li 行間調整ができ...
おすすめ情報