Text below a image using a tag (6 posts)

  1. spiritfarms
    Posted 3 years ago #


    I was wondering how I can add text below each individual icon?

    I have looked in to the solution but now I am wondering if a li tag will be good for this or not.

    The next step is how to get rid of the bullet points just on this page.

    Thanks for your help!


    Here is the CSS

    #icons {
    #icons ul {
    #icons ul li {
    display:inline !important;
    list-style-type: none;

    and HTML

    <div id="icons"></div>
    <div id="icons">
    <li><a href="http://www.spiritfarms.com/"><img src="http://www.spiritfarms.com/wp-content/uploads/2012/09/Com-Icon.png" alt="" width="100" height="100" /></a></li>
    <li><a href="http://www.spiritfarms.com/"><img src="http://www.spiritfarms.com/wp-content/uploads/2012/09/Display.png" alt="" width="100" height="100" /></a></li>
    <li><a href="http://www.spiritfarms.com/wp-content/uploads/2012/09/Chart.png"><img title="Chart" src="http://www.spiritfarms.com/wp-content/uploads/2012/09/Chart-150x150.png" alt="" width="100" height="100" /></a></li>
    <li><a href="http://www.spiritfarms.com/wp-content/uploads/2012/09/Wrench.png"><img title="Chart" src="http://www.spiritfarms.com/wp-content/uploads/2012/09/Wrench.png" alt="" width="100" height="100" /></a></li>

    MOD NOTE: Please follow the guidelines when posting code. As it is, your code may have been eaten by the forum parser - I can't be sure!

  2. spiritfarms
    Posted 3 years ago #

    Any one have any ideas?


  3. Max
    Posted 3 years ago #

    You can get rid of the bullets by fixing the typo in your stylesheet on line 632:

    #icons ul li {
    display: inline !important;
    list-style: none
    padding: 25px;
    padding-left: 100px;

    You are missing a semi-colon behind list-style: none. There is also no float of "center", check out the correct use of the float property.

    Sure you can add text below the images in the li's although setting them to display: inline is probably not a good way to do, rather float them left in the ul and set the li widths to make them line up properly.

    PS. and take out the following:

    #icons ul {
    position: absolute;

    That removes the entire un-ordered list from normal flow - so nothing will work properly as you expect unless you position it manually.

  4. Good Guy
    Posted 3 years ago #

    Another way is to do something like this:

    1) create 4 divs to house your 4 icons
    2) create a css for the icons, p and the div itself.

    See this code:


    hope this gives you an idea.

  5. Max
    Posted 3 years ago #

    @mytaxsite.co.uk you can style li's exactly the same as div's as they are both block level elements, so your same code could be used on li's :-)

    It's debatable which is better, my thinking is that using the ul is slightly better when you are using it to markup something such as navigation which is really a list, so the HTML has a some semantic meaning... but I guess in the end it comes down to personal preference.

  6. spiritfarms
    Posted 3 years ago #

    Thanks for the answers. Creating the DIVs worked well. In the morning I am going to spend some more time on this. Also, Max thanks for the response. I am interested in floating as well.

Topic Closed

This topic has been closed to new replies.

About this Topic