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!
#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.
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.
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.
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/
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
And for the hover
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.
To do alternating,
obviously this applies just the bg color, you will have to figure out paddings/margins, possibly move some things around.
@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/
Can someone help me solve this little issue I am having.
http://www.jobspark.ca/job-listings/
You could may be try this :
@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
To
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...
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.
@hotpink Thank you so much! The job listings look so much better now.