/    Sign up×
Community /Pin to ProfileBookmark

How to make Header go off page?

Copy linkTweet thisAlerts:
Aug 23.2012

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.

[code=html]<html>

<head>
<link rel=”stylesheet” type=”text/css” href=”theme.css” />

</head>

<body>

<div id=”header”>
</div>

</body>

</html>[/code]

[CODE]body {
width:100%;
overflow-x: hidden;
background:white;
}

#header {
width:100%;
height:15%;
background:3399cc;
}

[/CODE]

Thank you!

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ginger23Aug 23.2012 — Looks like you need to remove all margins from the body tag (assuming you don't want to see the white on any sides:

<i>
</i>body {margin:0}


ginger
Copy linkTweet thisAlerts:
@JakeTheEmericanauthorAug 23.2012 — Thanks, I'm pretty new to HTMl & CSS.
Copy linkTweet thisAlerts:
@ginger23Aug 23.2012 — No problem. I have a ways to go myself. ?
Copy linkTweet thisAlerts:
@jedaisoulAug 23.2012 — 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.
[/QUOTE]
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:

[code=html]
<a href="mypage.html#rest">my page</a>[/code]

The page:

[code=html]<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />

</head>
<body>

<div id="header">
</div>
<div id="rest">
</div>
</body>

</html>[/code]

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.
×

Success!

Help @JakeTheEmerican spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...