Grow your CSS skills. Land your dream job.

Contact Page Mock-Up

  • # 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 9:22 pm

    Could you possibly mock-up a CodePen to show me how to do it? I have no experience with jQuery or JavaScript. I actually just gave that same exact response on my other thread that is currently roaming around. I also need to somehow update my jQuery for my website, which I have no idea on how to do.

    # February 2, 2013 at 9:38 pm

    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

    # February 2, 2013 at 9:49 pm

    Thank you for such directness with the “tooltip.” I will have to play with it some. I much prefer doing my code strictly with HTML and CSS, but I am currently learning JavaScript, which will then lead into jQuery. Concerning the formatting of my page, when you say:

    > 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?

    # February 2, 2013 at 9:58 pm

    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.

    # 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. http://codepen.io/jeffpowersd/pen/irKCg

    # 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.

    Ben.

    # February 3, 2013 at 12:52 pm

    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.

    # February 3, 2013 at 2:12 pm

    About one billion other sites have a balanced page. Don’t be afraid to stand out. I think it looks good.

    # 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 3:24 pm

    Okay, this is my progress thus far, here. I can’t seem to get the right half to sidle up next to the image. Hrm. Help!

    # 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!

    # February 3, 2013 at 6:22 pm

    Here is the nearly finished product, here. Thank you so much everyone. Once I finish the entire website, I will post another thread on here so everyone can critique it, but I am sure I will have more issues as I continue to design my website. Cheers!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".