• ベストアンサー

グローバルナビゲーションの位置について

添付画像のように、h1ロゴの横にグローバルナビを配置したいのですがうまくいきません。 (ヘッダーの画像の下にナビがついてしまいます) どのような記述をすればヘッダー内にナビを置くことができるのでしょうか? 回答よろしくお願いします。

noname#135128
noname#135128

質問者が選んだベストアンサー

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

HTML,CSSなんてケースバイケースで、 色々な書き方があるから数学の様に答えは出せません。 ただ、横に並べたいなら、(数値は設計環境によって微調整する事) <h1><img width="100" /></h1> <ul><li><a href="#">home</a></li><li><a href="#">カテ1</a></li></ul> h1,ul,li{margin:0; padding:0;} h1 { float:left; width:100px;} ul { float:left; width:400px;} li { display:inline; list-style:none;} li a{ padding: 0 .5em;}

noname#135128
質問者

お礼

回答ありがとうございます。 自己解決しましたm(__)m

関連するQ&A

  • ページヘッダー部分のHTML/CSS

    独学で勉強中の学生です。 どうしてもできなくて…よろしくお願いします! ページヘッダー部分1~5(グローバルナビより上)を画像でHTML入れました。 CSSで 全体を inline 1をfloat: 2をmargin-left; 5をfloat: right; 3,4の高さを合わせることができません。 添付画像のような配置にするにはどうしたらよいのでしょうか。 使っているのはDreamweaverです。 よろしくお願いします。

  • cssでのナビゲーションのレイアウトについて

    ナビゲーション用のロゴとメニュー用ボタンをflashで作り、cssでレイアウトを試みているのですが、希望の通りにできません。 希望のレイアウトは、 ※ヘッダー(サイズ:760×59.8PX)の左端にロゴマーク(126×59.8PX)、その右側にメニュー用のボタンを配置。 ※メニューボタンは全部で3つあり、A(サイズ:80×36PX)、B(75×34.2PX)、C(75×36.3PX)で、ロゴの右側になるべく等間隔で配置したい。 というものです。 これまでに試したのは、 1、<header>内に、ロゴとメニューのボタンを全てリスト化して配置し、一つずつmarginのサイズ調整。結果、IEではヘッダーのサイズが上下に広がり、ロゴの下側にメニューが3つ並びます。 FireFoxでは、ヘッダーのサイズは指定のままですが、メニューがヘッダーの下側に並んでしまいます。 2、次に、ロゴとメニューを左右にfloatで振り分けようとしたところ、IEでは全てのボタンがヘッダー内の左上に固まってしまい、FFでは、メニューボタンが本文にかぶさってしまいました。 長い質問になってしまって申し訳ありませんが、改善点をご指摘いただけないでしょうか?よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • html css imgの横にh1を改行して表示

    お世話になります。 ヘッダーにロゴとサイト名を入れたいと考えています。 サイト名はテキストで入れたいです。また、長いので一度改行したいです。 h1をインライン要素にして並べたのですが、サイト名の一段目はロゴの横にきますが、二段目はロゴの下に回り込んでしまいます。 どうしたらよいでしょうか? (スマホからなので詳しく記述できません) よろしくお願いします。 〈img〉〈h1〉サイト名〈br〉サイト名二段目〈/h1〉

  • CSS使用時のDIVにおける背景指定について

    現在ホームページの作成でCSSをメインに練習を行なっております。 テーブル配置を最小限にと思い、CSSにて制作を試みておりますが、 ヘッダー部分だけがどうしても上手くいかずつまずいてます。 色々なCSSに関するページも検索しましたが、いまいちピンと来るものもなく、もしかしたら出来ないのかな?とも考え始めております。 でも、大手のサイトなどを拝見する限り見栄え的にも出来ている様なので自分にCSSに対する理解が低いのかとも思いますが、どうかご教授 をお願いいたします。 先ず構想図から… ---------------------- |      DIV id="h-top"        | ---------------------- |      DIV id="h-cate"       | ---------------------- |     |               | |     |               | |DIV    |  DIV            | |id="index"|    id="main"       | |     |               | |     |               | |     |               | ---------------------- |      DIV id="footer"       | ---------------------- 上記のようなありがちなレイアウトのHPを考えています。 DIV id="h-top",id="H-cate"においては通常のヘッダーとしています。 質問は、上記のDIV内容の記述についてなのですが、 ●DIV id="h-top"は、 横100%に対し、横20PX、縦100PXの背景画像を並べ、中央に横740PX、 縦100PXのメイン画像画像を入れたいと思っております。 ●DIV id="h-cate"には、 横100%に同じく背景画像として横20PX、縦43PXの画像を並べ、中には 横740PXに合わせたナビボタン(w123*h40)を6つ配置したいと考えています。 共に画像とナビボタンは配置可能なのですが、背景画像が表示できなく 困っております。 現状でのHTML文では以下の通りとなっております。 <body> <DIV id="header"> <DIV id="h-top"> <img src="hoge" width"740" height"100" alt""> </DIV> <DIV id="h-cate"> <ul class="h-navi"> <li class="h-navi01"> <A href="index.html"> <span class="span1">トップページ </span></A> </li> <li class="h-navi02"> <A href="web/index.html"> <span class="span1">取扱商品一覧 </span></A> </li>      ・      ・      ・ </ul> </DIV> </DIV> </body> CSSも書こうと思いましたが、色々とやりくりして今では表示も 配置もおかしくなってしまいましたので、控えさせて頂きました。 また説明文が下手で分かりづらいかと思いますが、どうぞ宜しくお願いします。

    • ベストアンサー
    • CSS
  • marginとナビゲーションの位置がずれる

    質問初投稿で、現在webデザインを勉強中の者です。 あまり慣れていないので文章の拙さはご容赦ください。 現在自主制作中のWebサイトがあるのですが、 ナビゲーションをposition:fixedで固定に画面の下に配置するように設定しています。 そのまま上部に画像を配置しようと、margin-left;などで調節していたのですが、 ナビゲーションの位置がズレてしまい不自然な空白や、ナビゲーションそのものが消えるという状態になってしまいました。 margin-leftを1pxでも入れると右端から消えてしまいます。 paddingやposition:absoluteなどの別の方法も試してみましたがmarginと同じ状態になってしまいます。 もしかしたら別の画像を上に配置しているので、それが原因かもしれません。 どうしても自分では解決できないので、解決方法を教えていただきたいです。 画像はmargin-leftに数値を入力した時のものです。 #footer { margin: 0px; padding: 0px; position: fixed; left: 0%; bottom: 20px; width: 100%; height:44px; } #item{ margin-left:34px; margin-right:34px; margin-top:34px; } #fruits{ margin-left:34px; }

    • 締切済み
    • CSS
  • ナビゲーションのインジケート

    JavaScriptでナビゲーションを記述したhtmlファイルを読み込んでいます。ナビゲーションは画像で7つ配置しているます、ナビゲーションにインジケートを付けたいのですが、可能でしょうか? javascriptの事があまりわからないので、ご教示いただけないでしょうか?

  • 横ナビのスライドナビゲーションの名称について

    横ナビでマウスオーバーするとナビゲーションがスッと出てくるjQueryのプラグインを探しています。 下記サイトの左のナビゲーションです。 http://www.livesense.co.jp/company/logo.htm こちらの名称はなんというのでしょうか。 / / / / / / / / / / / / / / / / 横ナビ アコーディオンや 横ナビ プルダウンのように色々と検索したのですが、ヒットしませんでした。 スマホみたいなメニューひとつで横スライドするナビではありません。 例 http://git.blivesta.com/drawer/

    • ベストアンサー
    • CSS
  • CSSを使った全体の配置

    サイト全体の配置指定を外部スタイルシートを使い、 ホームページ作成をしております。 CSS初心者なので、変な質問になるかもしれませんが宜しくお願いします。 全体のぺージの構造は上にヘッダー、下にフッター 真中は3つに分け、3カラムの状態で配置しております。 今回、ヘッダー部分を2つに分けたいと思っております。 今のヘッダー部分は、最初にh1(テキスト)を左配置に表示し、その右側にテキストで「サイトマップ」のテキストリンクを配置。 その下に width="850" height="200" の大きめな画像を置き、 画像の下に右配置でh2(テキスト) 上記のような配置になっているので、外部スタイルシートコードは・・・ /* ヘッダーコンテンツ */ .header { text-align:left; padding-bottom:0.5em;  width:830px; float:left;} .header h1{ font-size:12px; padding:0; float:left;} .header h2{ font-size:12px; float:right;} /* ヘッダーサイトマップ */ .headersite{ float:right;} ・・・としています。 HTMLタグの方は・・・ <!-- ヘッダー開始 --> <div class="header"> <h1>h1題名</h1> <div class="headersite"><a href="sitemap.html">サイトマップ</a></div> <a href="index.html"><img src="%/logo.jpg" width="850" height="200" border="0"/></a> <h2>h2題名</h2></div> <!-- ヘッダー終了 --> 画像部分を真中から分け、左に画像を置き右はテキストにし回り込ませたいと思っておりますが、なかなか上手くいきません(汗) 画像を2つにわけるCSSコードを .header left .header right とするならば、 HTMLタグ部分は・・・ <!-- ヘッダー開始 --> <div class="header"> <h1>h1題名テキスト</h1> <div class="headersite"><a href="sitemap.html">サイトマップ</a></div> <div class="header left"><a href="index.html"><img src="%/logo.jpg" width="300" height="200" border="0"/></a> <div class="header right">テキストテキストテキスト <h2>h2テキスト</h2></div> <!-- ヘッダー終了 --> にしたいのですが、CSSコードはどのように指定したら良いでしょうか? 自分なりにCSSコードを筆記したのですが、 回り込みがうまくいかないのか、真ん中から分けた左画像の右にテキストが並んでくれなくて下に配置されてしまいます。 ちなみに全体横幅は850pxにしております。

  • スクロール途中から定位置になるjs

    ナビがスクロールの途中から定位置になるようにしたいのですが、 簡単に設置できるjsはありますでしょうか。 下記サイトのグローバルナビのようなものをイメージしております。 http://alife-mag.jp/ ご回答よろしくお願いいたします。m(__)m

  • スタイルシートを使用して任意の位置に画像を移動

    お世話になります。 HTMLにてページを作成しておりますが、w480×h10pxの大きさの画像を 任意の位置に入れなくてはならなくなりました。その場所にはすでに 画像が入っております。w120×h40が4つ横に並列にならんでおります。 その4つの画像の上と少し重なるように、w480×h10pxの画像をCSSを使用して重なるように上に配置することは可能なのでしょうか? よろしくお願いいたします。

    • 締切済み
    • CSS

専門家に質問してみよう