How to decrease the space above my header and top of the page?

HTML & CSS
1

Hi!
I’d like to decrease the space above my header and top of the page.I know that is possible with CSS .I am using blogger template.Probably I have to go to template designer - advanced - and then- add CSS . I guess I have to put something like that:

outer - wrapper

padding top -…px.

But what value?! And the exact code?

2

pulls out a crystal ball… Why do you need us? You already solved your own problem. Now you just need to put it into practice. Unless you absolutely need your hand held though out the entire process…Cannot help you with that. Maybe some more willing to hold your hand will come by.

Trial and Error. Making mistakes is the besy way to learn.

3

Hi Mellony. Welcome to SitePoint! :slight_smile:

Yes, this should be easy with CSS, as long as you can access the style sheet (I’m not familiar with Blogger). To know exactly what CSS you need to use, we’d need to see the site in question, though. Feel free to post a link, and we can confirm what code you need to use. :slight_smile:

4

Sorry, but I’m not familiar with CSS and still don’t know how to wrap the whole code…
Here it is the site.

5

OK, if you can access your CSS page (style sheet), an easy way to remove some space at the top would be to get rid of the line in red below:


body .navbar {
  [COLOR="#FF0000"]height: 30px;[/COLOR]
  margin: 0;
  padding: 0;
}
6

I removed it but still plenty of space.

7

Hm, that line is still there. Anyhow, another thing you could do is change the line in red:


.content-outer {
  background: url("http://www.blogblog.com/1kt/transparent/white80.png") repeat scroll left top transparent;
  border-radius: 15px 15px 15px 15px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  [COLOR="#FF0000"]margin: 30px auto;[/COLOR]
}

to this

margin: 0 auto 30px;
8

Thanks a lot it works! The space is smaller now.
Last question: still a little space, may I remove it?

9

Yes, that first line I suggested you remove is still there, but removing it would close the gap completely:

body .navbar {
  [COLOR="#FF0000"]height: 30px;[/COLOR]
}

That line still exists at line 1 of one of your style sheets (I think widget_css_2_bundle.css). Perhaps it was in there twice.

10

I’ve checked the template very carefully, no such a line (height: 30px).

11

The CSS with the 30px height on body .navbar is hosted at blogger.com:
[URL=“http://www.blogger.com/static/v1/widgets/4132898751-widget_css_2_bundle.css”]
http://www.blogger.com/static/v1/widgets/4132898751-widget_css_2_bundle.css

12

Yes, 30 px height is there , but when I click on the link you gave me , I can’t delete it…how exactly to proceed to?

13

Pretty much the same way you edited the other CSS. In your admin area (if that’s how you access your CSS) find that style sheet and edit it.

14

Sorry, but didn’t find it.
I expand widget template but no such a value.

15

Are you sure you are opening up the correct file?

Make a change, or addition to that stylesheet and see upon save if it does anything (if the style is there).

16

An alternative is to put a more specific rule anywhere else in your style sheets. I wa going to suggest something, but now the site is completely different! :eek: What’s happened?

17

It’s a blogger template and I’m trying to edit its HTML section.

18

Weird, the site is back now, but when I clicked your link before I got a completely different site, all black and so on. :confused:

Anyhow, here are two ways you could remove the top space:

Either enter this anywhere in your style sheets:


body .navbar {
  height: 0 !important;
}

or this


body #navbar {
  height: 0;
}
19

The best forum ever! Thanks to all of you!
I’ve put this code in CSS part and it works like a charm:

body .navbar {
height: 0 !important;
}

I’d like to say thank you to all of you, fellows!

20

You’re welcome. See you later! :slight_smile: