SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    *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.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Mellony. Welcome to SitePoint!

    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Member
    Join Date
    May 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    body .navbar {
      height: 30px;
      margin: 0;
      padding: 0;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Member
    Join Date
    May 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I removed it but still plenty of space.

    Quote Originally Posted by ralph.m View Post
    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:

    Code:
    body .navbar {
      height: 30px;
      margin: 0;
      padding: 0;
    }

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hm, that line is still there. Anyhow, another thing you could do is change the line in red:

    Code:
    .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);
      margin: 30px auto;
    }
    to this

    Code:
    margin: 0 auto 30px;
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Member
    Join Date
    May 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hm, that line is still there. Anyhow, another thing you could do is change the line in red:

    Code:
    .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);
      margin: 30px auto;
    }
    to this

    Code:
    margin: 0 auto 30px;
    Thanks a lot it works! The space is smaller now.
    Last question: still a little space, may I remove it?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Mellony View Post
    still a little space, may I remove it?
    Yes, that first line I suggested you remove is still there, but removing it would close the gap completely:

    Code:
    body .navbar {
      height: 30px;
    }
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Member
    Join Date
    May 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, that first line I suggested you remove is still there, but removing it would close the gap completely:

    Code:
    body .navbar {
      height: 30px;
    }
    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.
    I've checked the template very carefully, no such a line (height: 30px).

  11. #11
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The CSS with the 30px height on body .navbar is hosted at blogger.com:

    http://www.blogger.com/static/v1/widgets/4132898751-widget_css_2_bundle.css

  12. #12
    SitePoint Member
    Join Date
    May 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Victorinox View Post
    The CSS with the 30px height on body .navbar is hosted at blogger.com:

    http://www.blogger.com/static/v1/widgets/4132898751-widget_css_2_bundle.css
    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. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Mellony View Post
    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?
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Member
    Join Date
    May 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    Sorry, but didn't find it.
    I expand widget template but no such a value.

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mellony View Post
    Sorry, but didn't find it.
    I expand widget template but no such a value.
    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).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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! What's happened?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  17. #17
    SitePoint Member
    Join Date
    May 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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! What's happened?
    It's a blogger template and I'm trying to edit its HTML section.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Weird, the site is back now, but when I clicked your link before I got a completely different site, all black and so on. :/

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

    Either enter this anywhere in your style sheets:

    Code:
    body .navbar {
      height: 0 !important;
    }
    or this

    Code:
    body #navbar {
      height: 0;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  19. #19
    SitePoint Member
    Join Date
    May 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Weird, the site is back now, but when I clicked your link before I got a completely different site, all black and so on. :/

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

    Either enter this anywhere in your style sheets:

    Code:
    body .navbar {
      height: 0 !important;
    }
    or this

    Code:
    body #navbar {
      height: 0;
    }

    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. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. See you later!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •