※ ChatGPTを利用し、要約された質問です（原文：<script>記述したらレイアウトに変化が...）
<script>記述したらレイアウトに変化が...
このQ&Aのポイント
現在制作中のサイトにthickboxを使って、大きな画像を表示させたいと考えています。しかし、thickboxを使用するとレイアウト面で若干の変化が生じます。詳細は以下の通りです。
div#headerの<h1>見出し分が10px上に上がる
marginで指定したロゴ画像が15px上に上がる
<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:"ＭＳ Ｐゴシック", 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:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size:12px;
letter-spacing:130%;
line-height:160%;
color:#333;
float:left;
}
お礼
返信ありがとうございます！ ご指摘の通りでした。 これで解決しました。 感謝します！