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

解決済みの質問

<script>記述したらレイアウトに変化が...

お世話になります。どうしても分からないので、また質問させてください。
現在制作中のサイトにthickboxを使って、大きな画像を表示させたいと考えています。
それで、当たり前ですが、thickboxをダウンロードして<head>内に下記のように記述しました。
<link href="css/thickbox.css" rel="stylesheet" type="text/css" media="all"/>
<script language="JavaScript" type="text/JavaScript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>

thickbox自体は特に問題なく作動するのですが、ところがおかしなことにレイアウト面で若干変化が生じました。具体的に言うと、
1:div#headerの<h1>見出し分が10pxほど上へ上がった(ウインドウの最上部に表示されるようになった)
2:marginでピクセル指定して配置していたロゴ画像がやはり15pxくらい上へ上がって表示されるようになった。(そもそもロゴ画像がどのブラウザで見ても同じところに表示するように方法が分からなかったので、このように記述したのですが、これは根本的に問題ありかもしれません。)
3:thickboxを使用しているdiv#rightmenuの下に全ページ共通で表示させているdiv#adress-areaという店舗情報を記述する部分があるのですが、そこのmargin-bottom:10px;が適用されていない。他のCSS記述はそのまま生きている。

ちなみにthickboxを使用しているページ以外はこのような現象は見られません。
これはどうしてでしょうか。もしよければアドバイスください。

THML:
<body>
<div id="header">
<h1>見出し文</h1>
<a href="index.html"><img src="images/logo.gif" alt="ロゴマーク" border="0"></a>
</div>
<div id="contens">

<div id="leftmenu">
省略
</div>

<div id="rightmenu">
<div id="rightbox-inside">
<ul id="resultList">
<li><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li>
<li><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li>
<li><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li>
<li><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li>
<li class="mustright"><a href="images/001.jpg" class="thickbox" title="タイトル"><img src="images/01.jpg" alt="代替テキスト"/></a></li>
</ul>
</div>
<div style="clear:both; "></div>
<div id="rightbox-buttom">
<img src="images/rightbox-buttom.jpg" alt="代替テキスト">
</div>
</div>

<div id="adress-area">
<p class="adress-txt">店舗情報いろいろ</p>
</div>
<div style="clear:both;"></div>
</div>

<div id="footer">
省略
</div>
</body>

CSS>>
body {
background-image:url(../images/body.jpg);
background-position:top center;
background-repeat:no-repeat;
background-color:rgb(237,232,195);
margin:0px;
}
/* Header部分CSS */
div#header {
width:800px;
height:150px;
margin-left:auto;
margin-right:auto;
}
#header h1 {
color:#666666;
font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size:x-small;
}
#header img {
margin:77px 0px 0px 10px;
}
/* Contens部分CSS */
div#contens {
border-bottom:1px dotted #333333;
width:800px;
min-height:700px;
margin-left:auto;
margin-right:auto;
padding-bottom:10px;
}
/* Leftmenu部分CSS */
div#leftmenu {
width:155px;
float:left;
}
/* rightmenu部分CSS */
#rightmenu {
width:645px;
float:right;
padding-top:20px;
background:url(../images/rightbox-top.png) no-repeat;
}
html#rightmenu{
height: auto !important;
height: 800px;
}
#rightbox-inside {
background:url(../images/rightbox-inside.png) repeat-y;
}
#rightbox-buttom {
clear:both;
}
/* thickboxを使用した表部分CSS */
#resultList {
overflow:hidden;
margin:0 25px 0 30px;
padding:0;
list-style-type:none;
}
#resultList li {
float:left;
display:inline;
width:120px;
text-align:center;
}
#resultList li.mustright {
float:right;
width:110px;
padding-right:none;
}
#resultList li a {
display:block;
}
#resultList li a img {
border:none;
}
/*店舗情報部分CSS */
div#adress-area {
width:620px;
float:right;
margin:5px 10px 5px 10px;
background-color:#E6E6E6;
}
#adress-area p.adress-txt {
width:300px;
padding:0 0 0 20px;
font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size:12px;
letter-spacing:130%;
line-height:160%;
color:#333;
float:left;
}

投稿日時 - 2011-05-16 19:16:52

QNo.6742286

すぐに回答ほしいです

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

thickbox.cssの最初の方に
 *{ padding:0; margin:0; }
のような記述があると思いますが、その影響では?

(↑)の記述でデフォルトのpaddingやmarginがキャンセルされますので、その分だけ表示位置が変わる可能性がありそう。
なので、CSSのベースを同じようにデフォルトをキャンセルする形にあわせてあげればよろしいかと。

投稿日時 - 2011-05-17 10:48:01

お礼

返信ありがとうございます!
ご指摘の通りでした。
これで解決しました。
感謝します!

投稿日時 - 2011-05-17 14:47:32

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

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

回答(1)

あなたにオススメの質問