5 replies [Last post]
tjroberts086
tjroberts086's picture
Offline
Enthusiast
Last seen: 4 years 19 weeks ago
Timezone: GMT-5
Joined: 2010-01-08
Posts: 138
Points: 177

Don't know why there is a black space at the top of my new CSS document. I tried putting margin and padding to none on all selectors, but no change! This has to be simple and I'am not seeing it here? Thanks in advance my friends.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
 
<style>
html,body {background:black;margin:0 auto;height:100%;width:100%;color:white;}
.header {background:blue;position:fixed;width:100%;}
.navigation li {display:inline-block;}
.home {height:100%;background:yellow;}
 
</style>
 
</head>
 
<body>
<header class="header">
  <nav class="navigation" role="navigation">
    <ul>
      <li>home</li>
      <li>about</li>
      <li>services</li>
      <li>portfolio</li>
      <li>blog</li>
      <li>contact</li>
    </ul>
  </nav>
</header>
<section class="home">
  <h1>this is the home section</h1>
  <p>this is a home paragraph</p>
</section>
<section class="about">
  <h1>this is the about section</h1>
  <p>this is a about paragraph</p>
</section>
 
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 52 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

.header { background: none

.header {
  background: none repeat scroll 0 0 #0000FF;
  position: fixed;
  top: 0;
  width: 100%;
  }
 
.home {
  background: none repeat scroll 0 0 #FFFF00;
  color: #000000;
  height: 100%;
  margin-top: 3em;
  overflow: hidden;
  }

.header needs {top:0;}, else it tries to lie below either .home's margin or .home h1's margin.

.home needs margin-top to get below the .header. It needs overflow to contain h1's margin.

If you specify either a color or background-color, you should specify the other. White (inherited) on yellow, e.g., is unreadable.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

tjroberts086
tjroberts086's picture
Offline
Enthusiast
Last seen: 4 years 19 weeks ago
Timezone: GMT-5
Joined: 2010-01-08
Posts: 138
Points: 177

Very cool lesson. Surprised I

Very cool lesson. Surprised I didn't specify a position, wish I didn't make mistakes like that soo much. Now I'm wondering since header is fixed thus taking it out of normal document flow.. Can I clear the home div below header, so I do not have to use a specific margin on top of home?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 52 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Nope

Clear doesn't work against positioned elements. Were it me, I'd lose the fixed header. Let it scroll (in the flow). You are simply using expensive space for no good purpose.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

tjroberts086
tjroberts086's picture
Offline
Enthusiast
Last seen: 4 years 19 weeks ago
Timezone: GMT-5
Joined: 2010-01-08
Posts: 138
Points: 177

Always interested in what you

Always interested in what you have to say Gary. You left me in mystery, what do you mean by letting it scroll in the flow? I need the menu on the page at all times, and this will be just one long page. I'm really just experimenting to learn, so I'm definitely looking forward to any advice.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 52 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

No, you don't

There are two things all users know; 1) how to use the back button and 2) how to scroll.

Believe me, there is no benefit to fixing the header/nav nor a footer. Doing so only takes up expensive space in the browser's viewport. If the page is so long that scrolling up to the top is onerous, maybe the page should be broken up.

You could put links to the top at points down the page, too.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.