WordPress.org

Ready to get started?Download WordPress

Forums

Text below a image using a tag (6 posts)

  1. spiritfarms
    Member
    Posted 1 year ago #

    Hi,

    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!

    http://www.spiritfarms.com/landing-page/

    Here is the CSS

    #icons {
    position:relative;
    left:100px;
    
    }
    #icons ul {
    position:absolute;
    
    }
    #icons ul li {
    display:inline !important;
    list-style-type: none;
    float:left;
    padding-right:100px;
    }

    and HTML

    <div id="icons"></div>
    <div id="icons">
    
    <ul>
    <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>
    </ul>
    </div>

    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
    Member
    Posted 1 year ago #

    Any one have any ideas?

    Thanks!

  3. Max
    Member
    Posted 1 year 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
     float:center;
    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
    Member
    Posted 1 year 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:

    http://pastebin.com/rD8QV16H

    hope this gives you an idea.

  5. Max
    Member
    Posted 1 year 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
    Member
    Posted 1 year 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