• # February 2, 2013 at 7:06 pm

    I have an image mock-up of what I would like to do with my contact page. What do you think the best way would be to achieve this look? I was reading some of the articles on CSS-Tricks, including this one about faking float:center. But I have to say, I do not fully understand it. So, I came to the forums to see if you guys/gals could help me out. Thank you in advance!

    Edit: Also, I would like for a little pop-up to appear below the social network buttons telling you the site it is for on rollover and I have no clue how to achieve this with CSS. Thanks again!

    # February 2, 2013 at 7:45 pm

    For the last part (the tooltips), I usually end using a jQuery solution in combination with anchor tag titles. It saves me on markup and it’s better supported across browsers.

    # February 2, 2013 at 10:06 pm

    Don’t take offense, but I don’t care for the mockup. The centered image simply looks out of place. I think it would work better on the right side of either column.

    # February 2, 2013 at 10:50 pm

    Quick demo to get you started using the principles from faking float center.

    # February 3, 2013 at 3:00 am

    I think jeffPowers’ version is along the right lines; which ever way you decide on, APing the image, and then pulling it away from the text a certain amount of pixels is going to be the way forward. May I ask how you’re defining the size of your site (%, px)? Although defining in per cent offers some degree of flexibility, I have found that using px gives you more precise control over your designs.


    # February 3, 2013 at 2:18 pm

    It’s working for me check the pen now. I added text-align justify to the paragraphs. I personally don’t use that often though, I’m not a fan of the uneven spacing between words. Hopes this helps!

    # February 3, 2013 at 4:07 pm

    Take the img out of the p tag and remove clear: left on the biography h2. Then you should be good to go my friend!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.