Forums

  • # 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:50 pm

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

    # 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:37 pm

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

    # July 14, 2013 at 3:54 pm

    It’s this image

    Just remove it for now.

    # July 14, 2013 at 3:58 pm

    remove this image and then remove center tag from heading and set left margin for the heading

    edit codes in the next comment

    # July 14, 2013 at 4:07 pm

    remove this

    edit heading area with this

    Software for Students

    Edit : better add the style part in css

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag