2013-03-14 2 views
2

Привет, ребята У меня есть вопрос, поэтому вся страница моего сайта перемещается немного влево (10-30 пикселей или около того), когда я вставляю изображение и возвращаюсь назад когда я его удаляю. Любая помощь вообще оценивается.Почему вставка изображения перемещает страницу влево

Html code-

<!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; 
} 
+0

создать скрипку http://jsfiddle.net/ –

ответ

0

Не можете видеть изображения ...: D, но в ваших местах вставить в CSS этот код

img{ 
margin: 0px; 
padding: 0px; 
border: 0px; 
} 

Это удаляет любые пробелы в теге изображений ... попробуйте и с нетерпением ждем ... Это, было бы плохо е если вставить ссылку на изображение ... :) Исли понять

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; } 

с другими свойства в содержании

Я думаю, что это будет делать, если нет, пожалуйста, объясните подробно .. :)

Смежные вопросы