SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    aligning images with text

    On my site I have a load of icons ( .icon )
    there is text wrapping around them and I want the images to line up nicely. They are all 85x85px - however the first 3 line up ok but the other 4 don't.
    How do I get over this problem without seting them individually

    see them on my homepage - - - http://organicwebdesigns.co.uk

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I looked at your bottom 4 icon/text combinations with Firebug. They are set up a little unusual...

    Experiment with putting each icon/text combo in it's own div and setting first the <img> as vertical-align:top; - if that don't work, try the same setting on <p>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    They all look the same to me*. They all have a 20px margin all the way around, so play with that if you want them aligned with the text at the top:

    Code:
    .icon {
    float: left;
    height: 85px;
    width: 85px;
    background: url(images/wp_icon_s1.png) no-repeat;
    webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    border: 2px white;
    margin: 20px;
    }
    * Some have empty space in them, like the ebay one, so even if they align at the top, it may not look like they do, so be aware of that.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    hantaah,

    A couple or three recommendations:

    (1) On your html page, you are missing some <p> and </p> tags in the "Additional Services" section. Once those are filled in, the page will validate and all of the icons will be uniformly out of place. Uniformly is important.

    (2) Make one change to your css in the area suggested by Ralph:

    style-Smooth-Blue.css Line 313:
    Code:
    .icon {
        background: url("images/wp_icon_s1.png") no-repeat scroll 0 0 transparent;
        border: 2px none white;
        border-radius: 20px 20px 20px 20px;
        float: left;
        height: 85px;
        margin: 7px 20px 20px;    /* was:  margin:20px */
        width: 85px;
    }
    (3) On your html page, you have used <p>&nbsp;</p> several times in the "Additional Services" section to provide vertical spacing between the icons and their text. Therefore, you might consider deleting one of the "rows" of <p>&nbsp;</p> used in the "Additional Services" section to make the vertical of spacing about the same as in the "WordPress & Management" section. Tested in FF.


    PS: I'm sure you realize that throwing in <p> tags as vertical spacers isn't a very strong technique. Margins and/or padding applied to their containers would give you more control over positioning independently of paragraph properties.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •