- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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!
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.
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.
Quick demo to get you started using the principles from faking float center. http://codepen.io/jeffpowersd/pen/irKCg
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.
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!
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!