Contact Page Mock-Up

[mintertweed]

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!

[theacefes]

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.

[wolfcry911]

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.

[jeffPowers]

Quick demo to get you started using the principles from faking float center. http://codepen.io/jeffpowersd/pen/irKCg

[benhanley]

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.

Ben.

[jeffPowers]

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!

[jeffPowers]

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!

[Author]

Posts