サイドメニューの位置が移動してしまった問題の解決方法を教えてください!

このQ&Aのポイント
  • MTでブログを作成し、画像を使ってサイドメニューのコンテンツを角丸の枠で囲んでいたところ、意図せずにサイドメニューが右に移動してしまいました。
  • サイドメニューコンテンツのヘッダーに使用していた画像のサイズは適切に設定していたため、角丸画像がサイズオーバーしているわけではありません。
  • CSSの修正方法がわからず、自分でいくつか試してみましたが、一向に動かずに困っています。どなたか、サイドメニュー自体が動かすための修正箇所を教えていただけると助かります。
回答を見る
  • ベストアンサー

サイドメニューがめりこみました

MTでブログを作り・・画像を使い、サイドメニューの コンテンツを角丸の枠で囲って整理しようとしたら、 何故か勝手に右に移動したらしく、▼こうなってしまいました。 http://10hoho.com/test/test1.jpg CSSの何処を修正すれば、位置の調整がきくのか 教えてもらえませんか?自分でも色々やってみたものの、 ピクリとも動かず困りはててます。 今までサイドメニューコンテンツのヘッダーに使ってた 画像からサイズを割り出してるため、角丸画像がサイズ オーバーしてるハズは無いのですが・・ どなたか、(何処をいじればサイドメニューそのものが 動くのか)分かる方が居りましたら、ご教授ください!

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

  • ベストアンサー
  • Muller3
  • ベストアンサー率81% (800/979)
回答No.1

めり込むって、画像の右側が少し切れてしまう、ということでしょうか? #beta-innerのpaddingを padding: 10px 10px 0 5px; とかにしてみては。(左paddingを減らす) そしたらサイド全体が左に動きます。 それによって今度はメインとサイドのアキが少ないと感じたら、今度はメイン(alpha)の幅を小さくして、alphaの右marginを増やします。

関連するQ&A

  • MTでサイドメニュー内部の位置を調整したい

    こちらの掲示板のおかげで悩みが1つ消えたと思ったら、 後から後に出て来て困ってしまいます・・ http://10hoho.com/test/image/test2.jpg まずは▲こちらを見てください サイドメニューを画像を使った枠で整理した所・・・ その図の矢印部分(サイドメニューのヘッダー)にある 文字がかなり左寄りになり、更には 図の赤丸部分に今まで無かった空白が出来てしまいました・・。 この2つの位置を調整し、バランスを整えたいのですが… いかんせん(CSSの)直すべき場所が分からず途方にくれています。 どなたか助けてください、お願いします

  • MTのサイドに有るリストの「・」を変えたい

    MTでブログを作った時に出来るサイドメニューの中に有るリスト・・ そのリストの、▼この部分を変更したいのです。(画像参照) http://10hoho.com/test/image/test003.gif この「・」部分の色を変えたり、場合によっては 画像に変更したいと思ってるのですが、何処をいじれば 良いのでしょうか?詳しい方の助けを待ってます・・

  • ヘッダーの高さを広げたが、コンテンツ部がずれない

    アメブロの無料テンプレートを入手しました。 ヘッダー画像の高さを広げましたので、その分、コンテンツ部を下にずらしたいのです。 しかし、コンテンツ部の位置がなぜかずれません。 ヘッダー メニュー(ナビゲーション) コンテンツ という構成です。 ヘッダーとメニュー(ナビゲーション)に position:absolute; が使われており、ヘッダーとメニューは自由にずらすことができます。 cssはある程度わかりますので、cssのサンプル等あると助かります。

    • ベストアンサー
    • CSS
  • フッターがウインドウの一番下にいきません。

    Dreamweaver CC2014を使ってWebサイトを作っています。 レイアウトを決めるために画像を作り、これを基に、フッターを常にウインドウの一番下にきてほしいのですが、ヘッダーの下にきてコンテンツの上に浮いてしまったり、もしくはサイドメニューの下に沿って表示してしまったりと、どうしても思うようにレイアウトできません。 どのようにHTMLとCSSの設定をすれば、この画像のようにレイアウトできるのでしょうか?

    • ベストアンサー
    • CSS
  • メニューのロールオーバーについて

    メニューボタンをロールオーバーさせようと思った時 現在の主流テクニックはどのような方法なのでしょう? 一時期cssで背景画像を変える方法が流行りましたが、 text-indent; -9999pxを使って文字を消すようなやり方は もう古い(意味がない)でしょうか。 素直に画像を埋め込んで使おうかなーとも思っています。 そうすると、Javascriptを使うやり方が無難でしょうか? cssを使うなら、ロールオーバーで、透明画像をかぶせるのもいいかな?とか考えていますが。 ご意見お聞かせくださいませ。

    • 締切済み
    • CSS
  • CSSで各ページのメニューボタンをアクティブにしておく方法

    http://www.family.co.jp/index.htmlのヘッダーメニュー部分のように 各ページのメニューがアクティブなままになるものをCSSでやりたいのですが どのように作ったらよろしいでしょうか。 メニューはアクティブ/非アクティブの物2つの画像でやろうと考えています。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 詳しいかた、教えてください

    この画像と全く同じものを作りたいのですが、cssがうまく出来ません。 ヘッダー、ナビゲーションメニュー、コンテンツのH1の下の余白の設定、 フッターがうまくいきません。 特にナビゲーションメニューのボタンが中央に寄らない、フッターの背景や配置の設定、 どのようなcssにしたらいいでしょうか!?

    • 締切済み
    • CSS
  • ドロップダウンメニューに関する質問。超初心者です。

    ドロップダウンメニュー(親メニューだけgif画像で子メニューはcssで表示)を作りたいと思っています。 javascript又はCSS+htmlを使ってドロップダウンメニューを作りたいと良いサンプルを探しております。 親メニューは画像で、子メニューはcssで表示させたいと思います。 サイドメニューとして、縦並びに配置して、オンマウスで右側に子メニューのリストが展開するように。 ネット上でサンプルを探しているのですが、全部cssで展開だったり、全部画像で展開だったりして、 親メニューだけ画像で、子メニューはcssで表示というのがなかなかみつかりません。。 超超初心者の私にどなたかご教授願えないでしょうか。 よろしくお願い致します。m(_ _)m  

  • ロールオーバーを使ったメニュー画像のサイズ変更

    こんにちは。 http://d.hatena.ne.jp/KAZUMiX/20071017/rollover2 こちらのページにある、クロスフェードするロールオーバーのサンプルを、 私のサイトに使わせていただきたいと考えています。 適当なテスト用画像を用意し、動作テストしてみたら、ちゃんとクロスフェードしたので、本番用の画像を作り、それに入れ替えたんですが、画像自体はちゃんと反映されたものの、画像のサイズがテストした画像サイズになってしまいました。 他のPCで同じページを開くと、ちゃんと正しいサイズで全く問題なく表示できる事から、PC自体が持っている情報に間違い無いと思いますので、JAVAまたはスタイルシートによって、どこかにテストした時の画像サイズ情報が格納されているとしか思えないのですが、それがどこにあって、どうすればいいのかわからず困っています。 どなたか、お知恵をお貸しください。 <参考情報> ・メニューは他にもありますが、テストしたメニューだけロールアウト後の画像サイズがおかしくなっているだけで、テストしてないメニューは正しいサイズでクロスフェード表示されます。 ・OSは windowsXP proで、IE8です。 ・IEのインターネットオプションで、キャッシュ関係を全部消しましたがダメでした。 ・パソコンを再起動してもだめでした。 ・わたしはJAVAについてあまり詳しくありません。 以上、何卒よろしくお願い致します。

  • 左サイドのメニュー(画像)をCSSでonmouseで画像が変わる様にし

    左サイドのメニュー(画像)をCSSでonmouseで画像が変わる様にしているのですが、例えばaboutのページを開いてる時はaboutのメニューがonmouseの状態で表示されるように出来ますか?説明が下手ですみません。 http://apanyan.client.jp/に仮に作った今の状態のものをアップしました。この状態から、どこのタグをどう直したらNEWSのページを見ている時はNEWSの画像(色)が濃い状態になるか、アドバイスして頂けたら幸いです。当方、dreamweaverCS4を使用しています。よろしくお願いします。