Grow your CSS skills. Land your dream job.

Page Layout Improvements

  • # January 8, 2013 at 11:44 pm

    Hello everyone, hope you had a good holidays.

    I have created a job search website that is doing pretty well so far. Still have a few things I would like to fix.

    One thing I am not happy with is how the job postings look. Here is the page currently http://www.jobspark.ca/job-listings/ I would like to have them look similar to this example http://www.authenticjobs.com/ I like how the shading is alternated and the top and bottom borders highlight things. I plan on keeping the hanging dates so just trying to spruce things up. If anyone could me with this it would be greatly appreciated!

    http://www.jobspark.ca/

    # January 9, 2013 at 3:30 am

    You would have to change the markup of your site to have a link wrap all the other elements.

    You don’t have to do it that way, but very few things are more annoying then things that invoke a hover state and look like a link, but aren’t.

    As far as how to do it, it is super simple CSS

    For alternating CSS, just a background on nth child

    #listings li:nth-child(2n) { background-color: #F5F5F5; }

    And for the hover

    #listings li > a:hover, #listings li > a:focus { background-color: #FFFDEB; }

    This is what is in their CSS file, but like I said, the way yours is setup differently and adding the alternating color is doable, but the hover would be lame without a link wrapping it all.

    # January 9, 2013 at 3:35 am

    To do alternating,

    .list-journal-entry-wrapper > div:nth-child(2n) { background: #F5F5F5; }

    obviously this applies just the bg color, you will have to figure out paddings/margins, possibly move some things around.

    # January 9, 2013 at 3:01 pm

    @scottnix Thanks! I totally agree with you with the hover. I plan on leaving that out so it does not confuse the users.

    Do u have any other recommendations to improving the look.

    http://www.jobspark.ca/job-listings/

    # January 10, 2013 at 10:37 am

    Can someone help me solve this little issue I am having.

    - I have added in a bottom border to my entries. I am trying to get the border to move up so that it is flush with the bottom of the box that displays the date. I am needed to do this while leaving the spacing between the date boxes the same.

    http://www.jobspark.ca/job-listings/

    # January 10, 2013 at 11:23 am

    You could may be try this :

    .journal-entry {
    margin-bottom: 0;
    }

    # January 10, 2013 at 11:36 am

    @goalieman34

    To remove the unwanted space between entries, you need to remove the 18px bottom margin on the .journal-entry element. To preserve the spacing between the dates, you need to preserve that same 18px in some way.

    One way is to set a top-padding of 18px. Use padding rather than margin, because you want the background of the .journal-entry to be shown.

    Change this

    .journal-entry {
    margin-bottom: 18px;
    }

    To

    .journal-entry {
    margin-bottom: 0;
    padding-top: 18px;
    }

    The above code will give you a layout with the bottom-border flush against the date, while preserving the spacing.

    However, I think it looks better if you split the spacing between the top and bottom, like so…

    .journal-entry {
    margin-bottom: 0;
    padding-top: 9px;
    padding-bottom: 9px;
    }

    Also I think “.journal-entry .title” could use a few pixels of adjustment. It’s a very minor change but I think it makes a big difference in quality.

    .journal-entry .title {
    padding-top: 2px;
    }

    # January 10, 2013 at 2:57 pm

    @hotpink Thank you so much! The job listings look so much better now.

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

You must be logged in to reply to this topic.

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