ｱﾒﾌﾞﾛのﾚｲｱｳﾄやｶｽﾀﾏｲｽﾞに詳しい方に質問です｡ http://firestorage.jp/download/1abbac18f231ae20e45765d07d7547602cc347f0 に､私のﾌﾞﾛｸﾞのﾘﾝｸが記載さ…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

ｱﾒﾌﾞﾛのﾚｲｱｳﾄやｶｽﾀﾏｲｽﾞに詳しい方に質問です｡

http://firestorage.jp/download/1abbac18f231ae20e45765d07d7547602cc347f0

に､私のﾌﾞﾛｸﾞのﾘﾝｸが記載されているﾃｷｽﾄﾌｧｲﾙがあります｡このﾌｧｲﾙに記載されているﾌﾞﾛｸﾞについて､質問があります｡
私のﾌﾞﾛｸﾞでは､ﾌﾞﾗｳｻﾞのｳｲﾝﾄﾞｳを最大化すると､ﾒﾆｭｰﾊﾞｰは問題なく表示されるのですが､最大化ではなく幾ばくか縮小すると､それに連動して､ﾒﾆｭｰﾊﾞｰの縦位置が､ﾍｯﾀﾞ画像とずれてしまうのです｡
この状態を解消するにはどのような対処をすればよいのか､どのようなCSSを書けばよいのか､お教えいただければ幸いです｡
よろしくお願いします｡

※現状､ﾍｯﾀﾞ画像とﾒﾆｭｰﾊﾞｰは重なっていますが､重なっているのは問題ありません｡ﾒﾆｭｰﾊﾞｰの縦位置とﾍｯﾀﾞ画像の縦位置が､ｳｲﾝﾄﾞｳが最大の時は一致しているのに､ｳｲﾝﾄﾞｳを縮小すると位置がずれるのを解消したいのです｡

●質問者: moon-fondu
●ｶﾃｺﾞﾘ:ｺﾝﾋﾟｭｰﾀｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

▽1 ● kodairabase
●10ﾎﾟｲﾝﾄ

Firefox,GoogleChrome,IE9ではﾒﾆｭｰﾊﾞｰの位置はずれないのですが､どのようなﾌﾞﾗｳｻﾞで問題が発生しているのでしょうか？

moon-fonduさんのｺﾒﾝﾄ
すみません､私の質問が不十分でした｡ http://f.hatena.ne.jp/moon-fondu/20120108013831 をご覧いただきたいのですが､ﾒﾆｭｰﾊﾞｰとは､私自身が作成したもののことです｡上記画像では､ﾒﾆｭｰﾊﾞｰがﾍｯﾀﾞ画像から飛び出てることが伺えるかと思います｡ Firefox､Chrome､IE8のすべてで発生しています｡ﾌﾞﾗｳｻﾞの大きさに依存せず､縦位置(x座標)をﾍｯﾀﾞ画像と同じ位置に固定しておきたいのですが･･･

▽2 ● きゃづみぃ
●10ﾎﾟｲﾝﾄ

ﾒﾆｭｰﾊﾞｰの位置を違うところにしたらいいのではないでしょうか？

たとえばﾌﾟﾛﾌｨｰﾙの上とか下とかに

moon-fonduさんのｺﾒﾝﾄ
すみません､ﾒﾆｭｰﾊﾞｰとは､私が自作したﾊﾞｰのことで､ｱﾒﾌﾞﾛのﾒﾆｭｰﾊﾞｰではありません､説明が不十分ですみません(>_<) http://f.hatena.ne.jp/moon-fondu/20120108013831

きゃづみぃさんのｺﾒﾝﾄ
だからﾚｲｱｳﾄの変更がいいのではないのかと思った次第です｡

▽3 ● Cherenkov
●300ﾎﾟｲﾝﾄ

ﾍﾞｽﾄｱﾝｻｰ

ul#gnavi {
 left: 302px;
 position: absolute;
 top: 460px;
 width: 980px;
}

この部分を以下のように変えて

ul#gnavi {
 left: 0px;
 position: absolute;
 top: 0px;
 width: 980px;
}

さらに以下を追加してみてください｡

.skinContentsArea {
 position: relative;
}

.skinContentsArea2 {
 margin-top: 75px;
}

基点となるposition: relativeをどこに打つかがﾐｿです｡

参考：ｱﾒﾌﾞﾛの上のﾍﾟﾀ広告でCSSﾒﾆｭｰがずれない方法･備忘録｜格安ﾎｰﾑﾍﾟｰｼﾞﾘﾆｭｰｱﾙ職人の失敗しないWebﾘﾌｫｰﾑ術

Cherenkovさんのｺﾒﾝﾄ
あれ…また質問を独自解釈してﾋﾟﾝﾄがずれた回答してるかも…｡ >重なっているのは問題ありません読んでませんでした…｡縦位置がずれる問題が観測できないので､使用しているﾌﾞﾗｳｻﾞとｽｸﾘｰﾝｼｮｯﾄと説明書きがあると回答がつきやすいと思います｡

moon-fonduさんのｺﾒﾝﾄ
すごいです､うまくいきました！縦位置がずれる問題は､ http://f.hatena.ne.jp/moon-fondu/20120108013831 のようにあったのですが､Cherenkovさんのおかげで解消できました！しかも､ﾍｯﾀﾞ画像の大きさも980px×460pxで大きすぎてﾒﾆｭｰﾊﾞｰと重なっていたので､それはﾒﾆｭｰﾊﾞｰの縦位置のずれを解消してから取り組もうと思っていたのですが､同時に解消してくださるなんて！ありがとうございます(^_^;) もしよろしければ､理由も教えていただけないでしょうか？ skinContentsArea2というのが何のために必要なのかも気になりまして｡

Cherenkovさんのｺﾒﾝﾄ
FirebugでHTMLﾀﾌﾞを開きながら説明します｡ CSSの適用は毎回ﾌｧｲﾙを書き換えるのではなく､Stylishを使いながら試していくと更新しなくても適用されるので楽です｡まず､#gnaviのposition: absoluteに対応する基点(position: relative)をどこに打つのか決めます｡基点は#gnaviの直系の先祖ではないと効果がありません｡ #gnaviはﾍｯﾀﾞｰ画像と同じ幅でそのまますっぽり下の位置にくるようにしたい｡実際の#gnaviからDOMの親から親へ辿っていくと､ .layoutContentsA, .skinContentsArea2, .skinContentsAreaあたりを基点にするとよさそうです｡なぜならX座標が自動的にﾍｯﾀﾞｰ画像と同じだからです｡ .skinContentsFrame まで上がってしまうと､X座標はｳｨﾝﾄﾞｳの端まで伸びてしまいます｡ (.skinHeaderArea を基点にすればよさそうに見えますが､.skinHeaderFrame と .skinContentsFrameで枝分かれしており､.skinHeaderAreaは #gnavi直系の先祖ではないので基点にすることができない｡) .skinContentsAreaの方が筋がよさそうにみえたので基点に決めます｡するとﾌﾞﾛｸﾞ記事と#gnaviの基点が同じなので､記事とﾒﾆｭｰが重なってしまいます｡次にﾒﾆｭｰとかぶっている部分を格納している.skinContentsArea2のmargin-topに間を与えて､#gnaviと重ならないように調整します｡これで完了｡別解： ul#gnavi { left: 0px; position: absolute; top: -75px; width: 980px; } .skinContentsArea2 { margin-top: 75px; position: relative; }