ホームページ作成に初めて挑戦している超初心者です。
皆様にいろいろアドバイスを頂いて、下記のようなナビゲーションバーの作成をしました。
現在の状態だと、画面の横幅(狭くなると)によって、ナビゲーションが2行になってしまいます。
できれば2行にしないでスクロールバーを出したいです。
もともと、全体の画面サイズを設定していないのが原因なのでしょうか?
あと、このナビゲーションは全ページに設置しているのですが、その場合はやはりその都度HTMLソースを表記しないとダメなのでしょうか?
よろしくお願いします。
【CSS】
/* フロート解除用css
--------------------------------------------------*/
#menu ul:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#menu ul{
display:inline-table;
min-height:1%;
}
/* Hides from IE-mac \*/
html #menu ul{
height:1%;
}
#menu ul{
display:block;
}
/* End hide from IE-mac */
/* for IE7 */
*html #menu ul{
display:inline-block;
}
/* */
/* フロート解除ここまで
--------------------------------------------------*/
#menu ul{/*ナビゲーション*/
background-color:#999999;
}
#menu ul,#menu li{
font-size:12px;
margin:0;
padding:0;
list-style:none;
}
#menu li{
float:left;
border:1px outset:#FFFFFF;
margin-right:1px;
}
#menu a,#menu a:link,#menu a:visited{
text-decoration:none;
color:#FFFFFF;
background-color:#999999;
width:110px;
height:auto;
text-align:center;
padding:7px 0;
display:block;
border-right:1px outset #FFFFFF;
white-space:nowrap;
position:relative;
}
#menu a:hover{
font-size:12px;
color:#FFFFFF;
background-color:#999999;
}
#home a{
border:none;
}
【HTML】
<div id="menu">
<ul>
<li id="○○"><a href="○○.html">○○</a></li>
<li id="■■"><a href="■■.html">■■</a></li>
<li id="△△"><a href="△△.html">△△</a></li>
</ul>
</div>
No.2ベストアンサー
- 回答日時:
SSIというものを使えば確かできたはずですが、詳しくないのであればHTMLにそのまま書くのが楽なのではないでしょうか。
javascriptで書き出すということも出来ますが、オフにされている環境のことを考えると使えないと思いますし。
メニューの指定については、#menuではなくulにwidthを指定して、#menu ulではなく、#menuにbackground-colorを指定してみてはどうでしょう?
ulの幅がwidthで固定され、親要素の#menuの背景色が端まで伸びてくれるはずです。
で、で、できました!!
本当にありがとうございます。
メニューについては「テンプレート」みたいな感じにやる方法があるのかな?と思っていました。
でも頂いたアドバイスの通り、そのまま都度表記するようにします!
感謝です!!
No.1
- 回答日時:
とりあえず今のところいえるのは#menuにwidthを指定するということでしょうか。
114px × メニューの数 で指定すれば大丈夫だと思います。
ちなみにCSSをhtmlに書かずに外部ファイル化しているのであればhtmlを書き換える必要はありません。
さっそくのアドバイスありがとうございます!
で、試してみました。
希望の表示にする事ができました!...が、
逆に幅を広げた時は、114p×メニューの数の長さにしかなっていないので、途中で切れている感じになってしまいますよね...
更にこれも解決する方法はあるのでしょうか?
また、HTMLのソースについてですが、すみません私の伝え方が悪かったです。
今は新しいページの度にこのメニューのソースを全部表示しているんですが、たとえば外部ファイルみたいな感じにして簡単に表示する事ができるのかな?という事でした。
でも、階層の違いでソースも変わってくるからダメですよね...
知識が薄いくせに贅沢ばかりでお恥ずかしいです。
もしよろしければ引きつづきお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSで菱形の画像サムネイルを表...
-
レスポンシブWebデザインでリン...
-
「CSS」リストの2段組どのよう...
-
css ol liにdisplay:inlineを設...
-
ul li を inlineにすると、右か...
-
IE6でナビ下に隙間ができてしま...
-
Dreamweaverテンプレート内のナ...
-
アコーディオンメニューがかく...
-
HTMLで組織図を作成する方法
-
複数の画像を横並びにし、その...
-
ddの中にulを入れ子にすると上...
-
テーブル内のプルダウンの下に...
-
li.QuadPartの最大値?
-
Webのコーディングについての質...
-
左メニューをCSSで固定したい
-
float:leftで<li>要素を横並び...
-
サイドメニューのロールオーバ...
-
参照中のリンクを強調表示
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
ulタグやliタグの中でbrタグ...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
レスポンシブWebデザインでリン...
-
html <ul></ul>の並びで一行空...
-
display:table;を多段表示させたい
-
HTMLで組織図を作成する方法
-
divタグ内のコンテンツが重なっ...
-
番号付きリスト(<Ol><Li>・・...
-
ulとliで囲った文字の一部を変...
-
htmlの<ol>タグで、数字などを...
-
HTML5のfooterに見出しを付けて...
-
css 横並びのナビゲーションバ...
-
疑似クラス :activeが効きません
-
list-style-type部分だけ大きく...
おすすめ情報