Give help. Get help.

  • # 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 I would like to have them look similar to this example 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!

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

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

    # 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


    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;


    .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 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.