Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Job Search Website Critique

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #41437
    goalieman34
    Member

    Hey everyone, hope everything is going well. Just launched a new project of mine last week and am looking for ways to take the website to the next level. If anyone had any suggestions to improve the website it would be appreciated. Thanks

    http://www.jobspark.ca/

    #118024
    Andy Howells
    Participant

    It’s looking good, I remember when you posted before and I thought it looked great at the time.

    It’s nice and clean, simple to use and understand, nice simple call to action on the homepage, good spacing between sidebar elements.

    EDIT: Naughty! I just spotted you’re using an image on the job listings page at the top for those tick marks. Naughty cheater! Code that bad boy up with a header, ul > li combo!

    The main addition/edit that I would make it maybe to look at using some trendier/nicer typography for the content.

    You’ve got a nice, almost slab serif, logo and you could pull off a rounded body font too. Note that I am a slut for nice fonts though, I basically spend my life drooling over Typekit.

    Other tweaks could include a hover/active/focus effect for links, just to jazz it up a bit and make it uber clear they’re links. The more visual clues you give visitors the better so they feel and ease and totally understand what everything does.

    #118063
    Watson90
    Member

    @andy_unleash – the way you spotted that was an image haha.


    @goalieman34
    – yeah I have to agree with Andy over the image thing. Although that can be a gradual change not something right now. But it is easily done and the quality will be a lot better :) I like the website. Nice work :)

    #118149
    goalieman34
    Member

    @andy_unleash @Watson90 Thanks you guys for the feedback.

    – I will fix those links so they have a hover.

    haha now i feel really stupid about that image. I was having troubles with the code so just quickly made an image in Photoshop. If you have a minute today to show me how you would code it that would help me out a lot. In the mean while I will try myself to get it. Thanks!

    http://www.jobspark.ca

    #118150
    Andy Howells
    Participant

    @goalieman34 – Just bashed this out in a couple of minutes;

    http://codepen.io/andyunleashed/pen/yfbaC

    I grabbed the character for the check mark from CopyPasteCharacter, it’s worth testing it in a few browsers just to make sure it works okay.

    I haven’t added anything custom to jazz it up or anything un-needed so copy pasting in should be easy if you want to use it directly and it should inherit your styles.

    #118155
    goalieman34
    Member

    @andy_unleash Awesome! The checkmarks are not working so can you change it so that i can just upload an image for the check mark?

    #118157
    Andy Howells
    Participant

    @goalieman34 – Depends how you want to approach it. You could put in an image as the background for the :before and then size it with width/height.

    Or you could use Fontello and grab a light icon font instead. To be honest thought as your site is fixed width, there’s nothing wrong with using an image!

    EDIT: Just checked your stylesheet though, did you copy the content:””; line?

    #118159
    goalieman34
    Member

    ok check it out now. Content line it shows up as a question mark. I think I should just use an image then?

    #118160
    Andy Howells
    Participant

    Hmm, yeah definitely not working. I’d probably say to use an image for your original tick then.

    You can set a pixel width & height on the before element and then just use background: url();

    Make sure to no-repeat it.

    #118162
    goalieman34
    Member

    @andy_unleash Can i replace the content with the background image or is this wrong?

    ul.tick-list {
    list-style: none;
    margin-left: 0;
    padding-left: 25px;
    }

    ul.tick-list li {
    display: inline-block;
    width: 45%;
    }

    ul.tick-list li:before {
    background-image: url(‘/storage/checkmark.jpg’);
    background-repeat: no-repeat;
    }

    .h2-list {
    padding-left:25px;
    padding-top:15px;
    font-size:24px;}

    #118165
    Andy Howells
    Participant

    Before/After elements require real or fake “content” to work properly.

    Then everything else you have is fine.

    So put in

    :before { content: “”; }

    #118179
    goalieman34
    Member

    hmmm still not showing up the image. Sorry man this is turning out to be a pain for ya.

    ul.tick-list li:before {
    content: “”;
    background-image: url(/storage/checkmark.jpg);
    background-repeat: no-repeat;}

    It should be working. I cant see the problem

    #118191
    Andy Howells
    Participant

    Here you go mate, updated the codepen.

    http://codepen.io/andyunleashed/pen/yfbaC

    Only bit to change (if you want) is to make the background-image url relative, rather than absolute.

    Basically, when dealing with before it has to have a content: “”; line otherwise it won’t load.

    By default with content: “”; it’s empty so will collapse into nothing. So you need to add height/width to it to make it work as well as a display parameter.

    You can do custom images in lists using list-style-image instead, but I find using :before easier on my brain as it’s like a mini element, rather than having to tear your hair out trying to get padding, line height and margins all perfect. So using :before it’s in it’s own little area in your style sheet instead.

    #118192
    TheDoc
    Member

    To make sure it doesn’t collapse, I like doing:

    content: ‘020’;

    …but I’m not sure if it’s always necessary.

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.