html - 我该如何解决这个奇怪的图像移动

标签 html css

我有一个在我的网站上使用的包含 header 。主页上的内容与内部页面上的内容完全相同,但由于某种原因,内部页面上的图像内容发生了变化。图像右侧的文本(它是图像的一部分)距主页右侧约 57 像素,距内页右侧约 40 像素……它们是同一图像!!我完全困惑了。非常感谢任何帮助!

这是网址,点击关于和主页,您就会明白我的意思:

http://goo.gl/6xdjRu

<style>
.center {
    width:1080px;
    margin:0 auto;
    position:relative;
}
</style>

 <div class="center">
 <img src="/images/header_home.jpg" width="1080" height="233" usemap="#Map" style="display:block;" id="header" />

    <div style="position:absolute; z-index:7; width:120px; display:none; left:434px; top:70px;" id="sub_about">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td><a href="/history.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_history','','/images/but_history-over.png',1);mopen('sub_about');"><img src="/images/but_history.png" alt="History" width="120" height="39" id="but_history" style="display:block;"></a></td>
            </tr>
            <tr>
                <td><a href="/mission.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_mission','','/images/but_mission-over.png',1);mopen('sub_about');"><img src="/images/but_mission.png" alt="Mission" width="120" height="37" id="but_mission" style="display:block;"></a></td>
            </tr>
            <tr>
              <td><a href="/associations.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_associations','','/images/but_associations-over.png',1);mopen('sub_about');"><img src="/images/but_associations.png" alt="Associations" width="120" height="35" id="but_associations" style="display:block;"></a></td>
            </tr>
            <tr>
              <td><a href="/careers.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_careers','','/images/but_careers-over.png',1);mopen('sub_about');"><img src="/images/but_careers.png" alt="Careers" width="120" height="40" id="but_careers" style="display:block;"></a></td>
            </tr>
        </table>

        </div>

    <div style="position:absolute; z-index:7; width:120px; display:none; left:542px; top:70px;" id="sub_services">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td><a href="/electrical.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_electrical','','/images/but_electrical-over.png',1);mopen('sub_services');"><img src="/images/but_electrical.png" alt="Electrical" width="120" height="39" id="but_electrical" style="display:block;"></a></td>
            </tr>
            <tr>
                <td><a href="/technology.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_technology','','/images/but_technology-over.png',1);mopen('sub_services');"><img src="/images/but_technology.png" alt="Technology" width="120" height="37" id="but_technology" style="display:block;"></a></td>
            </tr>
            <tr>
              <td><a href="/security.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_security','','/images/but_security-over.png',1);mopen('sub_services');"><img src="/images/but_security.png" alt="Security" width="120" height="37" id="but_security" style="display:block;"></a></td>
            </tr>
        </table>

        </div>

</div>

最佳答案

“主页”和“关于”页面似乎使用了两个具有不同布局的不同图像:

首页:
http://www.gordonlseaman.com/images/header_home.jpg

HOME

关于:
http://www.gordonlseaman.com/images/header_about.jpg

ABOUT

关于html - 我该如何解决这个奇怪的图像移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19280498/

相关文章:

html - Servlet返回“HTTP状态404请求的资源(/Servlet)不可用”

css - 在其上加载 png 图像时,背景图像有时会消失

html - Google 字体无法在 Chrome 中正确加载

html - "Absolute Positioned"元素垂直移动布局

css - 如何更改 Bootstrap Datatable 标题列的宽度

javascript - 在 CodeMirror Textarea 的插入符号处插入文本

javascript - 一些帮助使用 Laravel 设置 Zurb Foundation 5

javascript - 具有更新内容的 AngularJS 固定列表

html - 如何使十六进制代码中的颜色不透明度变暗

javascript - 无法使用 AngularJS (JavaScript) 设置边距