标题不是全宽 - HTML / CSS

Question

我的网页标题是图片。唯一的问题是它不是页面的整个宽度，而是延伸到页面右侧的末尾而不是左侧。 我的问题是如何使其适合整个页面宽度？我做了一些搜索但没有找到任何内容。我试过没有运气就改变了所有的css元素。不知道为什么会这样。

这是css：

header{
   position: absoulute;
   top: 0;
   width: 100%;
   margin: 0;
   background: url(images/logo2.png) no-repeat;
   height:100px;
   left: 0px;
   margin-left: 0;   
}

html：

<img src="Images/logo2.png" width="1459" height="372" /></a>
<div id="header"></a></div>

让我再一次总结一下我的问题。我希望标题图像是屏幕的全宽。

你可以看到整个页面 here

Answer 1

您需要做的只是修复您的ID选择器。通过在其前面加上哈希字符来选择ID。在您的情况下，代码将是：

#header{
   position: absolute;
   top: 0;
   width: 100%;
   margin: 0;
   background: url(images/logo2.png) no-repeat;
   height:100px;
   left: 0px;
   margin-left: 0;   
}

请注意#之前的header。我们还将您的position: absoulute更正为position: absolute。

Answer 2

为身体设置0px页边距和填充。

CSS：

body{    
    margin: 0px;
    padding: 0px;
}

我希望它能解决你的问题。

Answer 3

查看此处。

http://jsfiddle.net/SinisterSystems/j5BNC/

最好的办法是让你的 #header image 2200px +并减少，否则它会像素化。

编辑：

  

<强> @apples 即可。任何模板系统（开发工具，如 Dreamweaver 或首页）都非常危险。它适用于各种风格和诸如此类的东西，使你的页面非常脏而不是   交叉兼容。即使它有效，也可能不在其他浏览器上，   决议等。

    

#header {
    position:relative;
}

#header img {
    position:absolute;
    max-width:100%;
}