Page Layout Improvements

[goalieman34]

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/

[goalieman34]

@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/

[goalieman34]

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/

[Atelierbram]

You could may be try this :

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

[hotpink]

@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;
}

[goalieman34]

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

[Author]

Posts