www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to make Header go off page?

  1. #1
    Join Date
    Aug 2012
    Posts
    4

    How to make Header go off page?

    All right, So I want to make my header go off page, there's a white space between the top and left of the page.

    here is the code.
    HTML Code:
    <html>
    
    <head>
    <link rel="stylesheet" type="text/css" href="theme.css" />
    
    </head>
    
    <body>
    
    <div id="header">
    </div>
    
    </body>
    
    
    </html>


    Code:
    body {
    width:100%;
    overflow-x: hidden;
    background:white;
    }
    
    
    #header {
    width:100%;
    height:15%;
    background:3399cc;
    }
    Thank you!

  2. #2
    Join Date
    Oct 2009
    Posts
    41
    Looks like you need to remove all margins from the body tag (assuming you don't want to see the white on any sides:

    Code:
    body {margin:0}
    ginger

  3. #3
    Join Date
    Aug 2012
    Posts
    4
    Thanks, I'm pretty new to HTMl & CSS.

  4. #4
    Join Date
    Oct 2009
    Posts
    41
    No problem. I have a ways to go myself.

  5. #5
    Join Date
    Mar 2012
    Posts
    922
    Quote Originally Posted by JakeTheEmerican View Post
    All right, So I want to make my header go off page, there's a white space between the top and left of the page.
    Not sure if this is relevant, but if you want the header to default to scrolling off the top out of view (on smaller screens) when the page is displayed, just link to an element below it. E.g.

    The link:

    HTML Code:
    <a href="mypage.html#rest">my page</a>
    The page:

    HTML Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="theme.css" />
    
    </head>
    <body>
    
    <div id="header">
    </div>
    <div id="rest">
    </div>
    </body>
    
    </html>
    As I said, this may not be relevant, but it's a technique I use to make pages more suitable for small-screen mobiles as well as conventional PCs. The header is still there, but does not occupy valuable screen space (on smaller screens) unless you want it to. You can use media-specific code to actually suppress the header, if desired, but this is simpler.
    Last edited by jedaisoul; 08-23-2012 at 11:18 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles