Grow your CSS skills. Land your dream job.

How to fix the white space at the top issue?

  • # July 14, 2013 at 10:45 am

    Hi,

    I’m a CSS newbie, my following page has an issue of the white space at the top,

    http://www.knowledgenotebook.com/index2.html

    How do we fix it?

    Thanks.

    # July 14, 2013 at 10:56 am

    It’s actually in the background image of the header

    http://www.knowledgenotebook.com/images/header.repeat_s3.jpg

    # July 14, 2013 at 12:00 pm

    Thank you, Paulie, would I be able to remove the white space at the top of this image with the Paint program in Windows? Or Paint probably won’t be able to cut it and compromise the image quality?

    # July 14, 2013 at 12:30 pm

    With Paint?

    No…probably not. I don’t think it supports transparency to start with.

    You’d need something a little more advanced. I hesitate to say Photoshop as it’s a big ask but there are similar products available for less.

    Frankly, the image is so simple that you could eliminate it and do the whole thing with CSS (border-radius and a gradient).

    # July 14, 2013 at 12:32 pm

    If your looking for a relatively better free photo editor for windows use [Paint.NET](http://www.getpaint.net/ “Paint.net”)

    # July 14, 2013 at 1:21 pm

    Paulie, with regard to “do the whole thing with CSS (border-radius and a gradient)”, do you have to think about it for my case or it’s really no brainer for you?

    Many thanks.

    # July 14, 2013 at 1:46 pm

    No thinking…dead easy.

    http://codepen.io/Paulie-D/pen/recka

    Now you would have to change the colors and perhaps add a color stop and add any required vendor prefixes but those are pretty minor.

    # July 14, 2013 at 2:21 pm

    Ok, Paulie,

    Probably for the following:
    header {
    min-height:150px;
    border-radius: 25px 25px 0 0 ;
    background:linear-gradient(blue, lightblue);
    }

    my color is #BCD3FF
    how do I apply your “blue, lightblue” to mine?

    Thanks.

    # July 14, 2013 at 2:22 pm

    @georgearnall, i’ll keep it in mind for future project, thanks.

    # July 14, 2013 at 2:50 pm

    You have a start colour and an end colour. Just swap those in.

    # July 14, 2013 at 3:03 pm

    Paulie, I knew what you meant (forgive me for being so lazy), now, implemented your suggestion, now, we’re getting closer except two minor problems,
    http://www.knowledgenotebook.com/index4.html

    Many thanks.

    # July 14, 2013 at 3:12 pm

    Ok…now remove the bg image from .wrap/

    # July 14, 2013 at 3:12 pm

    Remove
    .wrap {
    background: url('../images/header.repeat_s3.jpg') #FFF repeat-x top;
    }

    this line in .wrap class

    # July 14, 2013 at 3:36 pm

    Paulie and Rohithzr, I did, please see,
    http://www.knowledgenotebook.com/index4.html

    So, it takes like somehow we need the wrap otherwise it’s ugly. Would the style2.css mess up?

    Thanks

    # July 14, 2013 at 3:37 pm

    No…don’t remove the wrap…remove the background image from the wrap

Viewing 15 posts - 1 through 15 (of 26 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".