2

画像を挿入すると、ウェブサイトのページ全体がわずかに左 (10 ～ 30 ピクセル程度) に移動し、画像を削除すると通常に戻るのはなぜですか。どんな助けでも大歓迎です。

HTML コード -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
    <head>
    <meta name="description" content="Random Text">
    <meta name="keywords" content="Random words">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">

    <title>X</title>
    <link href="menusheet.css" rel="stylesheet" type="text/css">
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="header">
    <div id="logo"><img src="images/bar.png" alt="knives"/></div>
</div>
    <div id="wrapper">  
        <!-- Black Menu -->
        <div id="menu_wrapper" class="black">
        <div class="left"></div>
            <ul id="menu">
        </div>
    </div>  

<div id="content">
<div id="container">
    <div id="adsense">

    </div>

    <div id="stepsbox">
    </div>
</div>

<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
    </div>
            <div id="footer">
        <div id="footerleft">
        <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="sitemap.html">Site Map</a></li>
    </ul>
    </div>
    <div id="footercenter">
        &copy; 2013 x.com
    </div>
</div>


CSS - 

body {
width: 960px;
margin: 0 auto;
font-family: Arial, Verdana, sans-serif;
color: black;
background-image: url(images/bg.jpg) ;
background-repeat: no-repeat;   
background-size: cover;
}   


#wrapper {
width: 960px;
margin: 0 auto;
}

#content {
width: 920px;
height: 100%;
overflow: hidden;
background-color: white;
padding: 0px 20px 0px 20px;
margin: 0px 0px 0px 0px;
}

#container {
width: 300px;
height: 550px;
float: right;
background-color: black;
margin-left: 10px;
}

#adsense {
width: 300px;
height: 250px;
float: right;
background-color: yellow;
}

#stepsbox {
float:right;
width: 250px;
height: 220px;
padding: 15px 15px 15px 15px;
background-color: #E0E0E0;
margin: 10px 0px 5px 10px;
}

#header {
height: 70px;
background: white;
width: 960px;
margin: 0 auto;
}   

#footer { 
height: 60px;
font-size: 80%; 
padding: 5px 5px 5px 5px;
background-color: #333333;
color: white;
}

#footerleft {
width: 300px;
height: 50px;
float: left;
}

#footercenter {
width: 620px;
height: 40px;
float: right;
text-align: right;
padding: 5px 5px;
border-style:solid;
border-width:5px;
}
4

2 に答える 2

0

どのイメージの「ロゴ」かを語る

<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>

工場の端が画像の場合は、後に追加
します

<h4>Factory edges</h4><br />
<img src="images/factoryangle.png" alt="Factory angles"style="float:left; margin:0 20px 0 0; width:175px; height:175px;" />

これもスタイリッシュに追加

#content{margin:0 auto; }

コンテンツ内の他のプロパティと

これでうまくいくと思いますが、そうでない場合は詳細に説明してください.. :)

于 2013-03-14T07:04:56.633 に答える