向下移动页面以允许标题图形

时间:2014-02-17 18:30:18

标签: html css header internet-explorer-7 position

我正在使用一个允许我在单元格中添加内容的程序。但是,允许所有类型的内容,所以我添加了一个样式表的引用,允许我重新编写应用程序。

应用程序通过我们组织内部的Web浏览器访问,主要使用IE8和IE10,以及使用IE7模式的应用程序界面。因此,它必须与各种屏幕分辨率的所有浏览器模式兼容。

我想要完成的是将标题图形添加到一个从未有过的页面。布局就是这样

<table width="60%">
    <tbody>
        <tr>
            <td>
                Here is my content
            </td>
        </tr>
    </tbody>
</table>
Rest of page content here

我想要一个标题图片覆盖浏览器的顶部,所以我插入了一个图像

在HTML中我输入

<img src="/pathtoimage.png" class="newhead">

CSS

.newhead
{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
}

由于图形已从文档流中删除,因此页面内容的其余部分想要从图形后面开始。

由于图形将根据浏览器大小(按比例调整宽度)改变高度,因此内容需要向下移动相同的数量。

如何最好地完成此任务,我们对此表示赞赏。我一直在努力学习如何做到这一点,并让它与IE7模式一起工作(我知道,我知道)

我一直在尝试使用一个60%宽度的标题图形(相同高度)的透明图像 - 这样它可以与标题图形按比例调整大小)但是让它正确填充表格,或者保持60%,或根据计划做任何事情都证明不起作用。

再次感谢您的帮助

1 个答案:

答案 0 :(得分:1)

为什么要让位置绝对?您可以更改标题的一侧,并将其向下推至您希望的任何大小。

.newhead
{
    width: 100%;
    display: block;
}

如果你想摆脱默认的填充:

body
{
    margin: 0;
    padding: 0;
}