Question

我努力让div文本中的文字显示在图像的顶部。我也试图得到它，以便版权文本转到右上角，footernavmenu到左角。

这是我的HTML代码：

<div id="footer">
  <div id="footerimage">
    <img src="images/footer-waves.jpg" width="980" height="140" alt="waves" />
  </div><!-- footer image --> 
  <div id="footertext"> 
    <div id="footernavmenu">
      <ul id="list-footer-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="design.html">Design</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="kayaking-di">kayaking Disciplines</a></li>
        <li><a href="links.html">Useful links</a></li>
      </ul><!-- ul end list-footer-nav -->
    </div><!-- div end footernavmenu -->
    <div id="copyright">
      <div class="copyrigttext">
        Copyright © 2013 Elliott Davidson, All Rights Reserved.
      </div><!-- end div copyrighttext -->
    </div><!-- end div copyright -->
  </div><!-- end div footertext -->            
</div><!-- end of footer -->

这是CSS代码：

    #footer {
    margin-left:auto;
    margin-right:auto;
    height:175px;
    width:980;
}

#footertext {
    position:relative;
    width:980px;
    height:auto;
}

#footerimage {
    margin-left:auto;
    margin-right:auto;
    width:980px;
    height:140px;
}

#footernavmenu {
    width : 480px;
    right:0px;
    margin-right:0px;
    float:left;
    color:#FFF;
}

ul#list-footer-nav {
    list-style : none;
    padding-right : 3px;
    width:auto;
}

ul#list-footer-nav li {
    display : inline;
    padding-right: 3px;
}

ul#list-footer-nav li a {
    text-decoration : none;
    width:auto;
    float : left;
}

ul#list-footer-nav li a:hover {

}

ul#list-footer-nav li a:active {

}

#copyright {
    width:480px;
    height:auto;
    right:0px;
    float:right;
}

.copyrighttext {

}

Answer 1

HTML：

    <div id="footertext"> 

        <div id="footernavmenu">

            <ul id="list-footer-nav">

                <li><a href="index.html">Home</a></li>

                <li><a href="design.html">Design</a></li>

                <li><a href="about.html">About</a></li>

                <li><a href="kayaking-di">kayaking Disciplines</a></li>

                <li><a href="links.html">Useful links</a></li>

            </ul><!-- ul end list-footer-nav -->

        </div><!-- div end footernavmenu -->

        <div id="copyright">

            <div class="copyrigttext">

                Copyright © 2013 Elliott Davidson, All Rights Reserved.

            </div><!-- end div copyrighttext -->

        </div><!-- end div copyright -->

    </div><!-- end div footertext -->

CSS：

#footertext {
    background: url('images/footer-waves.jpg') fixed top left no-repeat;
    width: 980px;
    height: 140px;
}

要使版权向右移动，footernavmenu向右移动：

#copyright {
    float: right;
    vertical-align: top; // or bottom if you want bottom corner
}

#footernavmenu {
    float: left;
    vertical-align: top; // or bottom if you want bottom corner
}

Answer 2

这是一个更实用的解决方案，你只需要将{strong>＃footer-text 容器及其子容器移到 #footerimage 容器中{{1}之后} tag。

之后，您可以指定相对于页脚文本的位置，然后将绝对位置设置为页脚图像以及其他一些内容。 Please look at my fiddle to experiment我的解决方案。

HTML CODE：

<img>

CSS代码：

<div id="footer">
  <div id="footerimage">
    <img src="images/footer-waves.jpg" width="980" height="140" alt="waves" />
      <div id="footertext"> 
        <div id="footernavmenu">
          <ul id="list-footer-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="design.html">Design</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="kayaking-di">kayaking Disciplines</a></li>
            <li><a href="links.html">Useful links</a></li>
          </ul><!-- ul end list-footer-nav -->
        </div><!-- div end footernavmenu -->
        <div id="copyright">
          <div class="copyrigttext">
            Copyright © 2013 Elliott Davidson, All Rights Reserved.
          </div><!-- end div copyrighttext -->
        </div><!-- end div copyright -->
      </div><!-- end div footertext -->          
  </div><!-- footer image --> 
</div><!-- end of footer -->

Answer 3

在#footertext元素上添加图像作为背景图像：

#footertext {
  background-image: url('images/footer-waves.jpg');
}

Answer 4

<强> CSS

 .ParentDivclassThatContainsFooterimageandFootertext{
    position:relative;
  }

#footerimage{
  position:relative;
}

#footertext {
   position:absolute;
    width:980px;
    top: whateversuits;
    left: whateversuits;
   height:auto;
}

  .copyright {
     float: right;
      width:50%; // adjust according to what you want.
    vertical-align: top; // or bottom if you want bottom corner
  }


 .footernavmenu {
   float: left;
    vertical-align: top; // or bottom if you want bottom corner
    width: 50%;  adjust according to what you want.
 }

在图像上显示文本HTML＆amp; CSS

4 个答案: