こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

IEでは指定の位置に配置してくれません

添付図のようにしたいのですが、
IEでは右に空白ができてしまい配置したいところに配置できません。
図のFireFox確認時の方が配置したい位置に配置できている正です。

タグ
<div id="header">
<h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1>
<div id="gNavi">
<ul>
<li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li>
<li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li>
<li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li>
<li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li>
</ul>
</div><!-- /gNavi -->
</div>

CSS
/* レイアウト設定ここから */

#pageBody {
width: 740px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
}

#header {
width: 740px;
height: 50px;
margin: 0px;
padding: 0px;
}

#topFlContens {
width: 740px;
height: 320px;
margin: 0px;
padding: 0px;
}

#box {
width: 740px;
height: 550px;
margin-top: 20px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding: 0px;
}

/* レイアウト設定ここまで */

#header h1 {
width: 180px;
height: 50px;
margin-top: 0px;
margin-right: px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
float: left;
position: absolute;
}



#gNavi {
list-style-type: none;
width: 560px;
height: 50px;
margin-top: 0px;
margin-right: 0px;
margin-left: 220px;
margin-bottom: 0px;
float: right;
position: absolute;
}

#gNavi ul {
margin: 0px;
}

#gNavi li {
list-style-type: none;
margin: 0px;
padding: 0px;
float: left;
}

Web初心者のため、アドバイス頂けると幸いです。

大変申し訳ございませんが、この投稿に添付された画像や動画などは、「BIGLOBEなんでも相談室」ではご覧いただくことができません。 OKWAVEよりご覧ください。

マルチメディア機能とは?

投稿日時 - 2011-03-01 16:59:33

QNo.6559668

困ってます

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

positionは何の為?

#gNavi {
width: 560px;
margin-left: 220px;

この幅は、780pxだけど・・・


#gNavi ul {
margin: 0px;
}
デフォルトpaddingが効いている。

とりあえず、#gNaviの幅と#gNavi ulの幅と#gNavi liの隙間と、
#gNavi ulのpadding:0;の相互関係で元々の設計が出来ていないのでしょう・・・
応急処置として、
#gNavi ul に、以下を設定。
padding:0 0 0 ○px; ← の ○px に値を入れて微調整。

というより、根本から全体設計の見直しを。

投稿日時 - 2011-03-01 21:02:55

補足

>positionは何の為?
  positionはflota設定時に必要なのかと思っていたためです・・・汗
  アドバイスを見る限り必要なさそうですね^^;

応急処置やってみました!
○pxを40pxに設定してみると設置したいところにいってくれました^^

>この幅は、780pxだけど・・・
自分の設計では
《header》740px内に《h1画像》幅180pxと《gNavi》幅560pxを設置、
《h1画像》と《gNavi》の間にスペース80pxを作りたいために《gNavi》をfloat:rightに
設定したのですが、IEではうまくいかなかったという流れです。。。;_;
《h1画像》と《gNavi》を分けた理由はスペースを作成するためには
分けてfloat:leftとrightにそれぞれ設定することによって、
両サイドにつめてくれて、スペースができると考えてみたためです。
それも個人的にはやり方があっているのか間違っているのかがわからず、
《h1画像(添付図左側のロゴ)》と《gNavi》を図のように横並びにするには
他の方法をとったほうがよいのでしょうか?

分析しにくい質問に丁寧なアドバイス有難うございました^^
アドバイス大変助かりました。
有難うございます。

投稿日時 - 2011-03-01 23:43:33

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問