/    Sign up×
Community /Pin to ProfileBookmark

Fixed Header Content Problem – Some Text Hidden Under Header

Copy linkTweet thisAlerts:
May 12.2015

[CODE]
index.html

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Website</title>
<meta name=”author” content=”WebDev”>
<link href=”example.css” rel=”stylesheet” type=”text/css” />
<style>

</style>
</head>
<body>
<div id=”header”>

<div id=”container”>

<div id=”logo”>
<h1><a href=”#”>Dreamweave</a></h1>
</div>
<div id=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Gallery</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id=”container”>

<nav>
<div id=”content”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec commodo sem, sed gravida metus. Phasellus pretium sed quam non consectetur. Mauris hendrerit nulla id felis malesuada, pulvinar ultrices dui dapibus. Donec libero sapien, tristique eget facilisis eget, fringilla varius enim. Aenean turpis tortor, venenatis quis nunc eu, scelerisque pellentesque arcu. Nam id rutrum metus. Aliquam aliquam augue arcu, eu rhoncus nunc efficitur quis. Duis dignissim purus magna, vel molestie felis dignissim sed. Aliquam ut arcu at mi accumsan semper eu eu massa. Aenean a placerat nunc. Nulla facilisi. Cras interdum quis dui eu viverra. Proin maximus, ipsum ac ultricies imperdiet, dolor nibh sagittis purus, fringilla efficitur dui arcu vitae diam.

Suspendisse molestie condimentum metus sollicitudin consectetur. Nam blandit nibh augue, eu posuere leo auctor sit amet. Aenean lobortis nisl eget lacus ullamcorper, eu semper mi rutrum. Cras dignissim ultricies mauris vitae imperdiet. Praesent vitae ligula vel justo lacinia rutrum. Integer lobortis leo ut libero viverra, non accumsan ipsum suscipit. Sed nec nibh vestibulum, tempor nulla ut, congue ante. Phasellus eget luctus purus, ut finibus mauris. Donec orci nisi, volutpat sit amet mi quis, posuere mattis ipsum.

Suspendisse molestie pulvinar libero at efficitur. Aenean sed sem ac turpis feugiat venenatis non at purus. Praesent vestibulum tempus iaculis. Nunc finibus sagittis dolor, sed tristique turpis posuere non. Donec egestas suscipit malesuada. Integer dictum bibendum ipsum sit amet auctor. Proin iaculis metus fringilla, dapibus est vitae, interdum mi. Aenean dictum quis quam ut tristique. Maecenas quis risus ultricies nisi porttitor euismod convallis sed odio. Donec convallis aliquam magna, sed ultricies nibh dignissim ut.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec commodo sem, sed gravida metus. Phasellus pretium sed quam non consectetur. Mauris hendrerit nulla id felis malesuada, pulvinar ultrices dui dapibus. Donec libero sapien, tristique eget facilisis eget, fringilla varius enim. Aenean turpis tortor, venenatis quis nunc eu, scelerisque pellentesque arcu. Nam id rutrum metus. Aliquam aliquam augue arcu, eu rhoncus nunc efficitur quis. Duis dignissim purus magna, vel molestie felis dignissim sed. Aliquam ut arcu at mi accumsan semper eu eu massa. Aenean a placerat nunc. Nulla facilisi. Cras interdum quis dui eu viverra. Proin maximus, ipsum ac ultricies imperdiet, dolor nibh sagittis purus, fringilla efficitur dui arcu vitae diam.

Suspendisse molestie condimentum metus sollicitudin consectetur. Nam blandit nibh augue, eu posuere leo auctor sit amet. Aenean lobortis nisl eget lacus ullamcorper, eu semper mi rutrum. Cras dignissim ultricies mauris vitae imperdiet. Praesent vitae ligula vel justo lacinia rutrum. Integer lobortis leo ut libero viverra, non accumsan ipsum suscipit. Sed nec nibh vestibulum, tempor nulla ut, congue ante. Phasellus eget luctus purus, ut finibus mauris. Donec orci nisi, volutpat sit amet mi quis, posuere mattis ipsum.

Suspendisse molestie pulvinar libero at efficitur. Aenean sed sem ac turpis feugiat venenatis non at purus. Praesent vestibulum tempus iaculis. Nunc finibus sagittis dolor, sed tristique turpis posuere non. Donec egestas suscipit malesuada. Integer dictum bibendum ipsum sit amet auctor. Proin iaculis metus fringilla, dapibus est vitae, interdum mi. Aenean dictum quis quam ut tristique. Maecenas quis risus ultricies nisi porttitor euismod convallis sed odio. Donec convallis aliquam magna, sed ultricies nibh dignissim ut.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec commodo sem, sed gravida metus. Phasellus pretium sed quam non consectetur. Mauris hendrerit nulla id felis malesuada, pulvinar ultrices dui dapibus. Donec libero sapien, tristique eget facilisis eget, fringilla varius enim. Aenean turpis tortor, venenatis quis nunc eu, scelerisque pellentesque arcu. Nam id rutrum metus. Aliquam aliquam augue arcu, eu rhoncus nunc efficitur quis. Duis dignissim purus magna, vel molestie felis dignissim sed. Aliquam ut arcu at mi accumsan semper eu eu massa. Aenean a placerat nunc. Nulla facilisi. Cras interdum quis dui eu viverra. Proin maximus, ipsum ac ultricies imperdiet, dolor nibh sagittis purus, fringilla efficitur dui arcu vitae diam.

Suspendisse molestie condimentum metus sollicitudin consectetur. Nam blandit nibh augue, eu posuere leo auctor sit amet. Aenean lobortis nisl eget lacus ullamcorper, eu semper mi rutrum. Cras dignissim ultricies mauris vitae imperdiet. Praesent vitae ligula vel justo lacinia rutrum. Integer lobortis leo ut libero viverra, non accumsan ipsum suscipit. Sed nec nibh vestibulum, tempor nulla ut, congue ante. Phasellus eget luctus purus, ut finibus mauris. Donec orci nisi, volutpat sit amet mi quis, posuere mattis ipsum.

Suspendisse molestie pulvinar libero at efficitur. Aenean sed sem ac turpis feugiat venenatis non at purus. Praesent vestibulum tempus iaculis. Nunc finibus sagittis dolor, sed tristique turpis posuere non. Donec egestas suscipit malesuada. Integer dictum bibendum ipsum sit amet auctor. Proin iaculis metus fringilla, dapibus est vitae, interdum mi. Aenean dictum quis quam ut tristique. Maecenas quis risus ultricies nisi porttitor euismod convallis sed odio. Donec convallis aliquam magna, sed ultricies nibh dignissim ut.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec commodo sem, sed gravida metus. Phasellus pretium sed quam non consectetur. Mauris hendrerit nulla id felis malesuada, pulvinar ultrices dui dapibus. Donec libero sapien, tristique eget facilisis eget, fringilla varius enim. Aenean turpis tortor, venenatis quis nunc eu, scelerisque pellentesque arcu. Nam id rutrum metus. Aliquam aliquam augue arcu, eu rhoncus nunc efficitur quis. Duis dignissim purus magna, vel molestie felis dignissim sed. Aliquam ut arcu at mi accumsan semper eu eu massa. Aenean a placerat nunc. Nulla facilisi. Cras interdum quis dui eu viverra. Proin maximus, ipsum ac ultricies imperdiet, dolor nibh sagittis purus, fringilla efficitur dui arcu vitae diam.

Suspendisse molestie condimentum metus sollicitudin consectetur. Nam blandit nibh augue, eu posuere leo auctor sit amet. Aenean lobortis nisl eget lacus ullamcorper, eu semper mi rutrum. Cras dignissim ultricies mauris vitae imperdiet. Praesent vitae ligula vel justo lacinia rutrum. Integer lobortis leo ut libero viverra, non accumsan ipsum suscipit. Sed nec nibh vestibulum, tempor nulla ut, congue ante. Phasellus eget luctus purus, ut finibus mauris. Donec orci nisi, volutpat sit amet mi quis, posuere mattis ipsum.

Suspendisse molestie pulvinar libero at efficitur. Aenean sed sem ac turpis feugiat venenatis non at purus. Praesent vestibulum tempus iaculis. Nunc finibus sagittis dolor, sed tristique turpis posuere non. Donec egestas suscipit malesuada. Integer dictum bibendum ipsum sit amet auctor. Proin iaculis metus fringilla, dapibus est vitae, interdum mi. Aenean dictum quis quam ut tristique. Maecenas quis risus ultricies nisi porttitor euismod convallis sed odio. Donec convallis aliquam magna, sed ultricies nibh dignissim ut.</p>
</div>
</div>
</body>
</html>
[/CODE]

[CODE]
example.css

body {
width: 100%;
margin: auto;
}

#container {
width: 960px;
margin: 0 auto;
}

#header {
background: #6390bc;
width: 100%;
top: 0;
position: fixed;
}

#logo {
float: left;
font-family: helvetica, arial, sans-serif;
font-size: 15px;
}

a {
text-decoration: none;
color: white;
}

li {
list-style-type: none;
float: left;
margin-left: 15px;
padding-top: 15px;
}

li a:hover {
color: blue;
}

#nav {
float: right;
}
[/CODE]

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2May 12.2015 — First, validate your HTML. If you would have done so you would have found that you've broken a cardinal rule: You CANNOT use an ID more than once on a page. Your code has <div id="container"> twice.

Second, you declare a HTML5 DOCTYPE. Use all that modern markup to your advantage! Your HTML is polluted with HTML4.01 nested <div>s. For example, <div id="header"> can be <header>. You use <div>s to style block level elements when you could actually apply that style directly to the element and get rid of the containing <div>. Example:
[code=html]<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>[/code]
could be:
[code=html]
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>[/code]
It's exactly the same!

Third, you have a decidedly mobile-unfriendly design. A fixed header and a fixed width don't cut it in the mobile world.

Fourth, did you realize that this line makes a link disappear in your content?
a {
text-decoration: none;
color: white;
}
Why? Because it applies to [b]all[/b] <a> tags not just the ones in your <div id="header">. Try it in your original code and see.

With all that in mind, consider the following. Oh, your question about overlapping is answered. Hint: look at the padding for <main>
[code=html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Website</title>
<link href="example.css" rel="stylesheet">
</head>
<body>
<header>

<div>

<h1><a href="#">Dreamweave</a></h1>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>

</div>
</header>

<main>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec commodo sem, sed gravida metus. Phasellus pretium sed quam non consectetur. Mauris hendrerit nulla id felis malesuada, pulvinar ultrices dui dapibus. Donec libero sapien, tristique eget facilisis eget, fringilla varius enim. Aenean turpis tortor, venenatis quis nunc eu, scelerisque pellentesque arcu. Nam id rutrum metus. Aliquam aliquam augue arcu, eu rhoncus nunc efficitur quis. Duis dignissim purus magna, vel molestie felis dignissim sed. Aliquam ut arcu at mi accumsan semper eu eu massa. Aenean a placerat nunc. Nulla facilisi. Cras interdum quis dui eu viverra. Proin maximus, ipsum ac ultricies imperdiet, dolor nibh sagittis purus, fringilla efficitur dui arcu vitae diam.</p>

<p>Suspendisse molestie condimentum metus sollicitudin consectetur. Nam blandit nibh augue, eu posuere leo auctor sit amet. Aenean lobortis nisl eget lacus ullamcorper, eu semper mi rutrum. Cras dignissim ultricies mauris vitae imperdiet. Praesent vitae ligula vel justo lacinia rutrum. Integer lobortis leo ut libero viverra, non accumsan ipsum suscipit. Sed nec nibh vestibulum, tempor nulla ut, congue ante. Phasellus eget luctus purus, ut finibus mauris. Donec orci nisi, volutpat sit amet mi quis, posuere mattis ipsum.</p>

<p>Suspendisse molestie pulvinar libero at efficitur. Aenean sed sem ac turpis feugiat venenatis non at purus. Praesent vestibulum tempus iaculis. Nunc finibus sagittis dolor, sed tristique turpis posuere non. Donec egestas suscipit malesuada. Integer dictum bibendum ipsum sit amet auctor. Proin iaculis metus fringilla, dapibus est vitae, interdum mi. Aenean dictum quis quam ut tristique. Maecenas quis risus ultricies nisi porttitor euismod convallis sed odio. Donec convallis aliquam magna, sed ultricies nibh dignissim ut.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec commodo sem, sed gravida metus. Phasellus pretium sed quam non consectetur. Mauris hendrerit nulla id felis malesuada, pulvinar ultrices dui dapibus. Donec libero sapien, tristique eget facilisis eget, fringilla varius enim. Aenean turpis tortor, venenatis quis nunc eu, scelerisque pellentesque arcu. Nam id rutrum metus. Aliquam aliquam augue arcu, eu rhoncus nunc efficitur quis. Duis dignissim purus magna, vel molestie felis dignissim sed. Aliquam ut arcu at mi accumsan semper eu eu massa. Aenean a placerat nunc. Nulla facilisi. Cras interdum quis dui eu viverra. Proin maximus, ipsum ac ultricies imperdiet, dolor nibh sagittis purus, fringilla efficitur dui arcu vitae diam.</p>

<p>Suspendisse molestie condimentum metus sollicitudin consectetur. Nam blandit nibh augue, eu posuere leo auctor sit amet. Aenean lobortis nisl eget lacus ullamcorper, eu semper mi rutrum. Cras dignissim ultricies mauris vitae imperdiet. Praesent vitae ligula vel justo lacinia rutrum. Integer lobortis leo ut libero viverra, non accumsan ipsum suscipit. Sed nec nibh vestibulum, tempor nulla ut, congue ante. Phasellus eget luctus purus, ut finibus mauris. Donec orci nisi, volutpat sit amet mi quis, posuere mattis ipsum.</p>

<p>Suspendisse molestie pulvinar libero at efficitur. Aenean sed sem ac turpis feugiat venenatis non at purus. Praesent vestibulum tempus iaculis. Nunc finibus sagittis dolor, sed tristique turpis posuere non. Donec egestas suscipit malesuada. Integer dictum bibendum ipsum sit amet auctor. Proin iaculis metus fringilla, dapibus est vitae, interdum mi. Aenean dictum quis quam ut tristique. Maecenas quis risus ultricies nisi porttitor euismod convallis sed odio. Donec convallis aliquam magna, sed ultricies nibh dignissim ut.</p>

</main>
</body>
</html>[/code]
CSS:
body {
margin: 0;
padding: 0;
}

header div, main {
max-width: 960px;
margin: 0 auto;
padding: 0 1em 0 1em;
}

header {
background: #6390bc;
width: 100%;
top: 0;
position: fixed;
}

header h1 {
float: left;
font-family: helvetica, arial, sans-serif;
}

main {
padding: 5em 1em 1em 1em;
}

header a {
text-decoration: none;
color: white;
}

header li {
display: inline-block;
margin-right: 1em;
}

header li a:hover {
color: blue;
}

header ul {
float: right;
list-style-type: none;
padding-top: 1em;
}

@media only screen and (max-width: 520px) {
header { text-align: center; position: relative; }
main { padding: 1em; }
header h1 { float: none; margin: 0; }
header ul { float: none; margin: auto;}
}
Copy linkTweet thisAlerts:
@practiceauthorMay 13.2015 — Very informative, and will follow your way. Thanks for the help, it worked great.
Copy linkTweet thisAlerts:
@ramarjunMay 15.2015 — give the padding value on header{

padding 5px;

margin 0 auto;
×

Success!

Help @practice 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.17,
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,
)...