Question

我正在为某人工作，我需要在网站的左上角添加一个标题图片。但最新发生的是图像似乎处于固定的位置，因此每当我将网页移动到不同的分辨率时，它似乎都会停留在其他所有移动的位置。最重要的是，我需要对导航进行图像处理，但每当我改变图像的高度时，它只会改变标题本身的高度，这会使导航更远......

The Image I am referring to is in the html <img src="newImage/papaPic.jpg">  with the CSS being #header img{...}

CSS

body {
    background: url(../newImages/headerBackground.jpg) repeat;
    font-family: Arial, Helvetica, sans-serif;
    //font-size: 14px;
    margin: 0;
    padding: 0;    
}
#header {
    background: url(../images/bg-header.png) repeat-x bottom center;
    margin: 0;  
        text-align: center;
        display: block;
}
#header img {
    display: block;     
    margin: 0 auto; 
    width: 230px;
        margin-left:0px;           
        height:250px;     
}

#header ul {
    background: url(../images/menu-border.gif) no-repeat bottom left;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 0 0 1px;
    width: 970px;
        position:relative;
        left:5%;


}

#header ul li {
    background: url(../images/bg-menu.gif) repeat-x bottom center;
    border-top: 2px solid #4f5342;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

HTML

<html>
<head>
    <meta charset="UTF-8">
    <title>Jay Cousins</title>
    <link rel="stylesheet" href="css/site.css" type="text/css">
</head>
<body>
    <div id="header">
            <img src="newImages/papaPic.jpg">
        <ul>
            <li class="selected">
                <a href="index.html">home</a>
            </li>
            <li>
                <a href="about.html">Opportunities</a>
            </li>
            <li>
                <a href="admission.html">Project Management</a>
            </li>
            <li>
                <a href="programs.html">About Jay</a>
            </li>
            <li>
                <a href="calendar.html">Community</a>
            </li>
            <li>
                <a href="blog.html">Contact</a>
            </li>

        </ul>
    </div>

Answer 1

这是你需要的吗？

body {
    background: url(../newImages/headerBackground.jpg) repeat;
    font-family: Arial, Helvetica, sans-serif;
    //font-size: 14px;
    margin: 0;
    padding: 0;    
}
#header {
    background: url(../images/bg-header.png) repeat-x bottom center;
    display: block;
    margin: 0;
    position: relative;
    text-align: center;
}
#header img {
    display: block;
    height:250px;    
    position: absolute;
    width: 230px;          
}

#header ul {
    background: url(../images/menu-border.gif) no-repeat bottom left;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 5px 0 5px;
    position: relative;
    width: 970px;
    z-index: 10;
}

#header ul li {
    background: url(../images/bg-menu.gif) repeat-x bottom center;
    border-top: 2px solid #4f5342;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

最重要的更改是img上的position: absolute，＃header上的position: relative以及ul上的position: relative和z-index

标题图像是固定位置

1 个答案: