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!
I like that mockup. Here is how I would do it. Float left two equal with divs. AP the image in place and give it a 10px green border. And give the right float a left border. Here is a css3 tooltip I just made. Best one on the web http://www.visibilityinherit.com/code/pure-css3-animated-tooltip-cross-browser.php
> Float left two equal with divs. AP the image in place and give it a 10px green border.
Do you mean float two divs of equal size (480px each) to the left? And also, this is the first time I have encountered the term “AP.” I did a simple Google search and found information on AP divs, but I could not find anything delving into the concept. Could you explain further about “AP?” Thank you in advance.
Edit: Also, does using an AP div allow the text to flow around a chosen image?
Yeah float both left equal width. Ap is absolute position. So just ap the image there. Give the outer container position relative. And your right the text wouldn’t flow around the image. So float a div left before the text in the right div and give it a width half that of the image. Then the text will flow around it. There may be other ways but that is easy. Easy is how I usually do it.
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.
No offense taken, @wolfcry911. I already felt like the design was a bit off balance because the right is so much heavier than the left. I thought an image being placed in the center would bring some equilibrium, but now that I look at it, it looks even more off balanced than it did before. Hrm.
Thank you, @jeffPowers. I have one question though. Is it possible to truly justify the text when using this method? Technically, you are floating to the opposite side and using text-align:justify seems to have no effect.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".