Question

我的标题文字图片“迈克尔·格雷斯”我想知道如何在每次尝试时将其移动下来移动我的实际标题bg和div框呢？还有我的“查看我的投资组合”链接隐藏在我的标题背后bg不明白为什么？对不起，我刚接触到css和html试图做一些有人请帮忙!!!

标题图片中的标题图片位于h1下方！并且图像在标题div中作为名为portfolio.html的链接

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>{Michael Grace} Portfolio website - {Gracey design}</title>

    <link href="css/styles.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div id="container">      


        <ul id="navigation">
        <li><a href="index.html"><img src="images/images/home_button2.gif" /></a></li>
        <li><a href="about.html"><img src="images/images/about_button1.gif" /></a></li>
        <li>
            <div id="logo" style="padding:16px">
                <img src="images/images/logo.png" />
            </div>
        </li>    
        <li><a href="portfolio.html"><img src="images/images/gallery_button1.gif" /></a></li>
        <li><a href="contact.html"><img src="images/images/contact_button1.gif" /></a></li>
        </ul>

      <div id="header">

          <h1><img src="images/images/michaelgrace_03.png" /></h1>
          <h2>Graphic Designer</h2>
          <p class="btn"><a href="portfolio.html">View my portfolio</a></p>

      </div>

      <div id="line">
      </div>

      <div id="content">

        <h3>ABOUT MICHAEL GRACE</h3>

        <p>A student who is currently in there final year of study in a Diploma of Graphic design at RMIT University. I Have also completed a High school VCE qualification and I have previously studied an Adv Diploma in Multimedia Design at Swinburne University. I have the experience and aptitude for design, and I’m extremely career driven and seek to achieve most in life. I currently work at Fawkner Leisure Centre as a Lifeguard and I have previously worked at Oak park and Pascoevale Leisure centre. I have also conducted myself during studies to undertake some small Design freelance work to better understand the industry and further my knowledge. 
        </p>

        <h3>My latest work</h3>

        <p>I’m forever creating design work for both myself as personal projects and as a student for University. Here’s a few of my most recent works.</p>

        <div class="portfolio-item">
        <a href="#"><img src="images/home/image1.gif" alt="View more info" /></a>
        <p class="btn"><a href="#"><img src="images/images/seemore1.gif" alt="View more info" /></a></p>
        </div>

        <div class="portfolio-item">
        <a href="#"><img src="images/home/imag2.gif" alt="View more info" /></a>
        <p class="btn"><a href="#"><img src="images/images/seemore1.gif"</a></p>
        </div>

        <div class="portfolio-item">
        <a href="#"><img src="images/home/image3.gif" alt="View more info" /></a>
        <p class="btn"><a href="#"><img src="images/images/seemore1.gif" </a></p>
        </div>

        <div class="portfolio-item">
        <a href="#"><img src="images/home/image4.gif" alt="View more info" /></a>
        <p class="btn"><a href="#"><img src="images/images/seemore1.gif" </a></p>
        </div>

      </div>

    </div>

</body>

CSS：

body {
background: url(../images/images/bg_page.gif) center center;
font: 16px Helvetica, Arial, Sans-Serif; 
color: #636363; 
line-height: 24px;
}

#container {
width: 940px;
margin: 0 auto;
margin-top: 100px;
}

    #header {
    height: 281px;
    background: url(../images/home/header.gif) top center;
    padding: 0 0 0 57px;
    position: relative;

    }

            #header h1 {
            margin: 0px 0 20px 0; 
            }

            #header h2 {
            width: 510px; 
            font: 30px Helvetica, Arial, Sans-Serif; 
            color: #f2f0eb; 
            letter-spacing: 2px; 
            margin: 0 0 20px 0;
            text-shadow: 0px 3px 3px #494949;
            }
            #header p.btn a {
            display: block; 
            width: 214px; 
            height: 36px; 
            overflow: hidden;
            text-indent: -9999px;
            background: url(images/home/viewmyportfolio1.png);
            }

    #logo {
    width: 272px;
    height: 214px;
    position: absolute;
    left: 49.5%;
    top: 11%; 
    margin-left: -150px;
    margin-top: -86px;
    z-index: 2;
    }

    #navigation {
    position: relative;
    height: 60px;
    }

        #navigation li {
        display: inline;
        width: 160px; 
        height: 60px; 
        float: left; 
        padding: 13px 0 0 16px;
        }

            #navigation li:nth-child(1) {
            margin: 0 0 0 -57px;
            }
            #navigation li:nth-child(2) {
            margin: 0 0 0 0;
            }
            #navigation li:nth-child(3) {
            margin: 0 0 0 0;
            }
            #navigation li:nth-child(4) {
            margin: 0 0 0 77px;
            }

    #content {
    height: 541px;
    background: url(../images/home/bg_body.png) top center;
    position: relative;
    }

    #line {
    height: 4px;
    background: url(../images/home/line.gif) top center;
    position: relative;
    }

如何从Header DIV中移动我的Header文本图像，为什么我的按钮不显示

0 个答案: