WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Align Header to top of page (9 posts)

  1. JCKnoell
    Member
    Posted 1 year ago #

    For some reason, my header has a space above it. The space is filled with the background image, so I know it's not a browser issue...

    The CSS shows no borders, margins, or anything I can think of. How can I make my header align to the top AND stretch all the way across the page?

    The website is thinkinkutah.com/whyrefill

    Here's my code:

    <div id="the_box">
    	<div class="box_header">
    		<h1 style="font-size:275%;">Why Refill?</h1>
    	</div>
    	<div class="socialicons">
    		<a href="https://www.facebook.com/pages/Think-Ink/117686411624871"><img width="48" height="48" alt="Think Ink Utah Facebook" src="http://www.thinkinkutah.com/wp-content/uploads/2013/07/facebook.gif"></a>
    		<a href="http://www.youtube.com/channel/UCEzOQf-sVfAFyNHqsYXNiZg?feature=watch"><img width="48" height="48" alt="Think Ink Utah Youtube" src="http://www.thinkinkutah.com/wp-content/uploads/2013/07/youtube_icon1.png"></a>
    	</div>
    </div>

    and my CSS:

    body {
       background-image:url('http://www.thinkinkutah.com/wp-content/uploads/2013/07/FullBackgroundGrade.png');
       background-size:100% 100%;
       background-repeat:no-repeat;
    }
    #the_box {
      background-color: yellow;
      width: full;
    }
    .box_header {
      font-weight: 600;
      color: #000000;
      background-color: yellow;
      text-align: center;
      margin: auto;
      height: 30px;
    }
    .box_text {
      text-align: left;
    }
    #socialicons {
       float: right;
       align: right;

    I also can't get my social media icons to jump to the right side of the header, and sit above the quotes below (not al the way to the edge)

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    That IS the background image:

    body {
        background-image: url("http://www.thinkinkutah.com/wp-content/uploads/2013/07/FullBackgroundGrade.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

  4. JCKnoell
    Member
    Posted 1 year ago #

    Well, considering I hand-coded it, that doesn't surprise me. :)

    Yeah, there's a background image, but I want my header to align to the top of the page. you can see parts of the bg image behind and above and on the sides of my header... how do I fix that?

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Looks like you're also getting cached pages - turn that off while you're working on a site - you'll go nuts :).

    I'd clear up those errors first...a negative margin will do it, but probably less than ideal:

    #the_box {
        background-color: yellow;
        margin-top: -30px;
    }
  6. JCKnoell
    Member
    Posted 1 year ago #

    How do I turn off cached pages, I know what you mean and it is driving me nuts...

    Also, that totally worked for aligning it to the top, but the sides still show... any thoughts there?

    Thanks!

  7. JCKnoell
    Member
    Posted 1 year ago #

    The same problem is happening with the footer I just added.

  8. CrouchingBruin
    Member
    Posted 1 year ago #

    Most sites include a set of "reset" CSS rules that sets all margins and padding to zero by default. That's what you need to do for the body element:

    body {
       padding: 0px;
       margin: 0px;
    }

    I'm not sure why you set the margin-top for #the_box to -30px; try taking out that rule.

  9. JCKnoell
    Member
    Posted 8 months ago #

    This was fixed a whikle ago.

Topic Closed

This topic has been closed to new replies.

About this Topic