- 締切済み
グローバルナビを固定にしたのですが、表示がおかしい
ixkaitoの回答
- ixkaito
- ベストアンサー率69% (18/26)
jsにすこし問題があります。 元々の#blocknavにはpositionが指定されていない（初期値のstaticになっている）が、スクロールするとjsによって初めてナビにposition: fixed;が指定されるため。positionにabsolute、fixedと指定すると、先祖要素、兄弟要素にその幅と高さが計算されなくなりますので、#mainImgにナビの高さ分のマージンを入れてあげる必要があります。 そもそも、トップにナビを固定するのみでしたら、jsを使う必要がありません。 そのjsを切って、cssに下記を追加すればナビが固定されます。 （#mainImgのトップマージンは適当に変更してください） #blocknav{position:fixed; top:0; left:0; width:100%; background:#fff; z-index:999;} #mainImg{margin-top:160px;} どうしてもjsを使いたい場合は、if (winTop >= navTop) { この間に下記を追加してください。 } 「160」の部分はcss同様ナビに合わせて調整してください。 $('#mainImg').css('margin-top','160px'); このスクリプトを使うメリットとしては、ウィンドウの高さがナビより低い場合、ナビを固定しないことです。 160pxより低いモニターというのもなかなかないと思いますが…
関連するQ&A
- jQueryスライダーをトップページに配置したい
サイトのトップページに、javascriptのスライドショーを配置したいと思っています。 （イメージはこんなスライドです） http://sandbox.scriptiny.com/tinyslider2/ WEBデザインもまだ勉強中でプログラム領域の知識は全くないため、 サンプルコードを公開しているサイトさんでお借りしようと思っています。 例の通りにcssやjsをリンクさせ、スライド自体は上手く行っているのですがレイアウトがうまくいきません。 （中途半端にスライドしたり、画像送りのボタンが表示されなかったり） 問題点として、サンプルのcssの記述と、もともとのサイトのcssがぶつかってしまう（？）ことがあります。 どのサンプルもcssで margin:0;padding:0; がbodyもしくはアスタリスク（*）で全要素に指定されており、 これが元のトップページのcssレイアウトに影響してしまいます。 こういう場合、cssの処理はどうするのが適正でしょうか。 素人のため分かりにくい文章になってしまっておりますが、その際はご指摘いただけましたら幸いです。 宜しくお願いいたします。
- ベストアンサー
- CSS
- 【コーディング】途中から位置が固定するナビ
コーディング初心者です。 以下JINS PCのサイトなんですが、このようにグローバルナビが途中から合流する感じに固定させるにはどんな技術を使えばいいのですか？？ （説明が下手ですみません・・・こんな感じです↓） http://www.jins-jp.com/jins-pc/ javascriptとか使うのでしょうか・・・ HTMLとCSSしか分からない私でもカンタンに設置出来るようでしたら、コードも添えていただけたら泣いて喜びます。
- ベストアンサー
- CSS
- html ヘッダーを固定し
海外サイトのテンプレートを元にホームページを作っています。 出来上がったホームページを改良したいと思っています。 ヘッダーとフッターを固定し、 ヘッダーの中にはcssを使ったhtmlを入れ、 中央部分にリンク先が表示されるようにしたいです。 検索しながら試行錯誤していますが、全然うまくいきません。 素人が手を出す領域ではないかもしれませんが、 お知恵を貸して頂けるとありがたいです。 よろしくお願いします。
- 締切済み
- CSS
- ウェブサイト：グローバルナビのドロップダウンメニュー作成について
ezorisu-web CSSでドロップダウンメニュー http://ezorisu-web.com/web-design/archives/356 のサンプルを使用させていただき、ドロップダウン付グローバルナビゲーションをカスタマイズしていたところ、壁に当たってしまったので質問させてください。 上記サイトのサンプルどおりに作成したメニューはきちんと動きましたが、今回は添付データの画像のように、初期状態で見えている「一段目のメニュー」のみ画像を使用したいのです。 一段目のメニューにマウスオンで画像ロールオーバー＆上記リンク先サンプルのようにドロップダウンメニュー表示、という動作をさせたいと思っています。 一段目用の画像は、形が不定形で背景にも模様が入っているため、透過PNGを使用しております。 文字も画像化して統合してあります。 今回はIE6にも対応する必要があるため、 ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/ にて配布している「DD_belatedPNG.js」を導入しました。 また、CSSを使い、背景をスライドさせて実現させるタイプのロールオーバー処理を施してあります。 http://www.1uphp.com/con2/over/over3.html を参考に、画像は１枚絵にせずメニュー名別に分割してあります。 ここのリスト化とロールオーバーまではきちんと動きました。 ただ、これを組み合わせると挙動がおかしくなります。 一番上のリンク先のサンプルを基に一段目に背景画像を設定すると、二段目に背景画像が継承されてしまい、思うように表示されません。 添付画像のような動きを実現させるには、どのようなソースを書けば良いでしょうか。 分かりにくい点があるかと思いますが、必要事項あれば追記しますので、よろしくお願いいたします。
- ベストアンサー
- CSS
- jqueryのimgpreviewというプラグイン
いつもお世話になってます。 マウスオーバー時に画像を表示できるようにしようと思っています。 （イメージはこんな感じです→http://www.css-lecture.com/template/2009/0407/） これを実装するには「imgPreview.js」というものをダウンロードしなければいけないようなのですが、ダウンロードページに行ってダウンロードファイルをクリックしても「古いものだからこちらへ」みたいなメッセージあり、そこからリンク先へ行ってもimgPreview.jsらしきものがどこにもありません。 「ここにあるよ！」とお教えいただければ即解決なのですが、もしimgPreview.jsが存在しないなら別の方法をご教授願いたいです。ちなみに、初心者ですので専門的なことはわかりません・・・。 やりたいことは、テキストにマウスオーバーで画像を表示させることです。 どなたかお詳しい方、お知恵をお貸しください。よろしくお願い致します。
- ベストアンサー
- JavaScript
- テンプレートに画像を貼り付ける方法
ＤＩＯＮのラヴログで、サンプルテンプレート（トップページ）のタイトル（一番上）に、オリジナルの画像を貼り付ける方法がわかりません、、、ＣＳＳ・ＨＴＭＬどちらで可能でしょうか？何方かご教授をお願いします。
- ベストアンサー
- ブログ
- HTMLをWordPress化 CSSをどこに？
HTMLをWordPress化にするための勉強をしています。 HTML側 CSS ヘッダー内 <link rel="stylesheet" href="css/test.css"> <link rel="stylesheet" href="css/test2.css"> JS ヘッダー内ではなく一番下</body>の前に配置 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="js/test1.js"></script> <script src="js/test2.js"></script> ★これをfunctions.php に記述するにはどうすれば良いのでしょうか？ function sample_scripts() { // CSSの読み込み wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test.css', array(), '1' ); wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test2.css', array(), '1' ); // jqueryの読み込み wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', get_template_directory_uri().'https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array(), '1.10.3', true ); // サイト内のjsの読み込み wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test1.js', array(), '1', true ); wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test2.js', array(), '1', true ); }//ここまで 結果 ヘッダー内にtest.cssのみ記載、test2.cssは記載していない。 jsはどこにも記載していませんでした。 どこが間違っておりますか？ 宜しくお願いします。
- ベストアンサー
- PHP
- CSSでのデザイン崩れ改善方法
表示ファイル http://www.loplopland.com/newfile.html CSSファイル http://www.loplopland.com/sample_l_180_490.css この外部CSSで直したいところは １．フッターの上の部分に余白ができてしまったので消したい。 ２．メイン表示部分が下までバックグラウンドイメージを表示したい。 以上の２点を改善したいんですが、うまくいきません。 どのように直したらいいかご教授下さい。 おねがいします。
- ベストアンサー
- HTML
- CSSのデザインがうまくいきません
表示ファイル http://www.loplopland.com/newfile.html CSSファイル http://www.loplopland.com/sample_l_180_490.css この外部CSSで直したいところは １．フッターの上の部分に余白ができてしまったので消したい。 ２．メイン表示部分が下までバックグラウンドイメージを表示したい。 以上の２点を改善したいんですが、うまくいきません。 どのように直したらいいかご教授下さい。 おねがいします。
- ベストアンサー
- CSS
- Wordpressの固定ページにcssやJS
WPにcssやJSに対応できるプラグインがありますが、固定ページに使用してもセキュリティには何も問題ないのでしょうか？便利なので是非、使ってみたいのですが、知識をお持ちの方がいらっしゃいましたらご教授お願いいたします。
- 締切済み
- HTML