- This topic is empty.
-
AuthorPosts
-
January 8, 2013 at 11:44 pm #41862goalieman34Member
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!
January 9, 2013 at 3:01 pm #120427goalieman34Member@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 #120527goalieman34MemberCan 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 #120531AtelierbramParticipantYou could may be try this :
.journal-entry {
margin-bottom: 0;
}January 10, 2013 at 11:36 am #120535hotpinkMemberTo 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 #120572goalieman34Member@hotpink Thank you so much! The job listings look so much better now.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.