おしえて

CSSで画像のずれを起こさないようにしたい

締切済

質問者：oesky
質問日時：2017/08/24 20:38
回答数：2件

ＣＳＳ初心者（３日目）です。
本とネットをかじりながら勉強中です。
２カラムのＨＰを作りたくて、ＣＳＳで取り組んでいるのですが、

＝＝＝＝＝＝＝＝＝＝＝＝＝header===================
AAAAAAA■
AAAAAAA■
AAAAAAA■
AAAAAAA■
AAAAAAA■
AAAAAAA■　　　　　　　　　画像（id=top 大きい画像）
AAAAAAA■
AAAAAAA■
AAAAAAA■
AAAAAAA■
AAAAAAA■
AAAAAAA■

完成したＨＴＭＬをＩＥやクロームで開いて、縮小していくと
画像だけ右の方にずれていってしまします。

＝＝＝＝＝header=========
AAA■
AAA■
AAA■ 　　　　　　　　　　　　画像
AAA■　　　　　　　　　　（id=top 小さくなりながら相対的に右にずれていく）
AAA■
AAA■
AAA■
AAA■
AAA■
AAA■

ＣＳＳです

body{width: 80%; margin: 0 auto;}

div.cover {display: table; margin: 0px; padding: 0px; width: 100%;}

div.cover div.box1 { display: table-cell; width: 15%;}
div.cover div.box2 { display: table-cell; width: 70%; vertical-align: top; margin-right: 80%; }

#top{padding-left: 0%; padding-right:100%; padding: 0px;}

#menu{list-style: none; padding: 0px;}
li{list-style: none; margin: 0px; padding: 0px;}

topの画像がずれてしまいます
id=top、この画像はbox2の中にあります。

この画像を、ブラウザ上で縮小していっても、
ずれないようにすればどうすればよいでしょうか。

初心者的な質問で申し訳ありませんが、教えてください。

<link rel="stylesheet" href="style.css">

<header>
<body background="blue_p8b.gif"><img src="ttlb.jpg" width="1291" height="251"> </header>

<div align="center"></div>

<div class="cover">
<div class="box1">
<ul id="menu">
<li> 10個ほどメニュー項目</li>
</ul>
</div>

<div class="box2">
<img id="top" src="top.jpg" >
</div>
</div>

</body>

って感じです。

補足日時：2017/08/24 22:16
通報する