- ベストアンサー
外部スタイルシートは同じなのですが…
こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div> ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright © 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ひょっとして、スクロールバーの有無でずれるのではないでしょうか？
その他の回答 (3)
- goldfox
- ベストアンサー率49% (123/249)
<div align="center"><img src="map.jpg" width="500"></div> としても、ずれますか？
補足
何度もご回答ありがとうございます。 試したのですが、駄目でした…。 ブラウザの問題なのでしょうか？ マックなのでIEではなくFirefox、オペラ、ネスケでの確認になっているのですが…
- goldfox
- ベストアンサー率49% (123/249)
画像の大きさが、横幅750px以上あるのではありませんか？ その場合、boxの大きさが画像の横幅に合わせて広がりますから、結果左右マージンの幅も変わり、ずれたような印象になります。
補足
画像の横幅は500pxなんです…。 サイズは何回か小さくしたりして試したのですが…。 ご回答、ありがとうございます。
的外れなアドバイスでしたら申し訳ありません。 .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } の中の「position: relative;」の部分を削除してみてはどうでしょうか。 「position: relative;」は『相対位置への配置』となるためです。
補足
ご回答ありがとうございます！ ご指摘の箇所を削除してみたのですが、駄目でした…。 レイアウトが崩れてしまうわけではなく、全体が左へずれてしまうのです。 もう少しコードと戦ってみます。
お礼
ご指摘通りでした。 お恥ずかしい限りです。 何度ものご回答、本当にありがとうございました。