Making text display on top of an image HTML & CSS

Question

Im struggling to get the text in the div footertext to display on top of the image. Im also trying to get it so that the copyrighttext goes to the right corner and the footernavmenu goes to the left corner.

Here is my HTML code:

<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 -->

Here is the CSS code:

    #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 {

}

@Danko would this mean wrapping the text and an image in the same div? — Elliott Davidson
– Elliott Davidson, Commented Dec 5, 2013 at 20:27
nop just change the order the full div for image at the bottom after the foorter text — DaniP
– DaniP, Commented Dec 5, 2013 at 20:28

C. S. · Accepted Answer · 2013-12-05 20:55:02Z

Here is a more practical solution, you just have to shift the #footer-text container and its children within the #footerimage container, after the <img> tag.

After that you assign a position relative to the footer-text, and then position absolute to the footerimage, and a few other things. Please look at my fiddle to experiment with my solution.

HTML CODE:

<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 -->

CSS CODE:

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

#footertext {
    position:absolute;
    width:980px;
    height:auto;
    bottom: 0
}

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

#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:0;
    position: absolute;
    bottom: 0;
    margin: 1em;
    text-align: right;
}

.copyrighttext {

}

mayabelle · Accepted Answer · 2013-12-05 20:30:02Z

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;
}

To make the copyright go to the right and footernavmenu go to the left:

#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
}

answered Dec 5, 2013 at 20:30

mayabelle

10.1k10 gold badges40 silver badges59 bronze badges

2 Comments

Elliott Davidson Over a year ago

for some reason the image isnt being displayed using your code?

mayabelle Over a year ago

The url in the css is the path relative to your stylesheet. You may need to adjust the path if the image is not in the images folder relative to your stylesheet.

essmahr · Accepted Answer · 2013-12-05 20:29:53Z

0

Add the image as a background-image on the #footertext element:

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

answered Dec 5, 2013 at 20:29

essmahr

6764 silver badges15 bronze badges

3 Comments

Elliott Davidson Over a year ago

@loop-duplicate for some reason the image isn't being displayed

Ani Over a year ago

Add Width & height to the background image

essmahr Over a year ago

Make sure your image path is correct and relative to your stylesheet (help can be found here).

Ani · Accepted Answer · 2013-12-05 20:37:52Z

0

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.
 }

answered Dec 5, 2013 at 20:37

Ani

4,5434 gold badges28 silver badges32 bronze badges

Collectives™ on Stack Overflow

Making text display on top of an image HTML & CSS

4 Answers 4

Comments

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related