Grow your CSS skills. Land your dream job.

Sharing my progress

  • # September 21, 2011 at 3:53 pm

    @WolfCry911 @TheDoc @ChristopherBurton

    Just wanted to share my progress with you guys. Doc, in working my way along this design I’m very quickly seeing the benefit that plugin will have for me – I appreciate you recommending it. Not everything is done, however I’m probably only one day away from converting the site to xhtml/php and I’ll start coding it for WordPress on Monday. I reckon I’ll be talking to you guys a lot through that process.

    Index: http://how-do-i-find-peace.com/sole/
    Full Width: http://how-do-i-find-peace.com/sole/full-width.html
    Specs Page: http://how-do-i-find-peace.com/sole/specs-page.html

    Still have a products page and blog page to create, but those should come relatively easy. I’m particularly proud of the specs page.

    Any and all feedback is welcomed. I’m actually really interested in figuring out how to get that footer to fill the entire bottom of the page in the event that there is a very short amount of content in the content area (full-width.html is an example of that).

    -Tanner

    # September 21, 2011 at 4:05 pm

    I’m not entirely sure I remember following this. Either way, I’m happy to contribute. I think the footer issue would be resolved with using a sticky footer. I think you should also be on the wagon with HTML5 and not developing in xhtml.

    # September 21, 2011 at 4:10 pm

    Specs page looks good. Let me know if you need any help implementing ACF.

    # September 21, 2011 at 4:32 pm

    @ChristopherBurton … to be honest I haven’t read much about HTML5 and I have no idea how to use it. Plus, this is a “business website” (as my client puts it) and he’s SUPER concerned about it working in IE6 because “Business people don’t update their browsers”. Is HTML5 backwards compatible?

    Also: Sticky Footer? What’s that?

    # September 21, 2011 at 4:46 pm

    A sticky footer allows you to stick your footer at the bottom of the page no matter the height of your main content.

    Technically you can use the HTML5 doctype without using the new elements. This will render in IE perfectly fine.

    < !Doctype html>
    # September 21, 2011 at 4:48 pm

    haha @ChristopherBurton, I got the general idea of a sticky footer, I meant to ask: how does one accomplish it?

    # September 21, 2011 at 4:58 pm

    http://ryanfait.com/sticky-footer/

    # September 21, 2011 at 7:56 pm

    @tannercampbell An easy fix for the footer is to give the root (html element) the same color background as the footer, then give the content wrapper the background image (or alternate color).

    Here is a quick example: http://jsfiddle.net/sl1dr/RJSa5/

    # September 21, 2011 at 8:31 pm

    @joshuanhibbert – you know, I did that little trick on a site many moons ago, but never thought to do it for the footer like that. I dig it.

    # September 21, 2011 at 8:31 pm

    @TheDoc Thanks! I have used it a few times, it can come in very handy!

    # September 21, 2011 at 10:03 pm

    @tannercampbell just one thing I saw that should be changed from a user experience aspect would be when a user clicks on the image the two options are to hit escape or click out. I think you should position a x on the image so a user can click on it to exit off it.

    Also have you considered making it responsive to the browser width? I’m sure the owner of the company would love to know that is easily viewable on a mobile device.

    # October 4, 2011 at 9:18 am

    @Adman I will make a note of that thanks!

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

You must be logged in to reply to this topic.

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