HTML/CSS banner not working

Question

I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this

I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #banner {
        background-color: #333FF;
        font-family: Arial;
        position: absolute;
        left: 0;
        right: 0;
        padding:15px;
        height:800px;
        background-size:100%;
      }
    </style>

    <title>Random Password Generator</title>
  </head>

  <body>
    <div id="banner"><h1>fdsfdsfdsfds</h1></div>
  </body>
</html>

I also tried linking to an external CSS file but that isn't working either.

How can I make a simple, solid color banner at the top of the page, on every page?

Your hex code `#333FF` is not valid, they need to be 6 characters (e.g. `#3333FF` or `#333FFF`). Try changing that. Its likely your div is working like you want it, you just can't see it because it has an invalid background color. If not, please replicate the issue in a standalone JSFiddle so we can troubleshoot more easily. — Ennui, Mar 04 '14 at 19:18
That worked for the color. There is a small whitespace above my banner where the page is at the top, I'd like to fill that entire area up. How can I do this? — user35698, Mar 04 '14 at 19:23
add `html, body { margin: 0; padding: 0; }` to your CSS, or include a [CSS Reset](http://meyerweb.com/eric/tools/css/reset/) — Ennui, Mar 04 '14 at 19:24
Wow thank you for that. What exactly does that do? Should I not include padding in the #banner area of my CSS since the body padding is 0? — user35698, Mar 04 '14 at 19:27
If you want your banner to just run across the top of your site, then why the huge `height:800px;` value? — TylerH, Mar 04 '14 at 19:30
That was just a random value I put in at first. I fixed it to be 40px — user35698, Mar 04 '14 at 19:31
@user35698 it removes default margin/padding from the `html` and `body` elements (which varies from browser to browser). It's not really relevant to whether your banner has padding or not. Think of padding as "spacing inside the box between its edge and its content" and margin as "spacing outside the box between its edge and the next box or element". — Ennui, Mar 04 '14 at 20:41

Tim Nguyen · Answer 1 · 2014-03-04T19:31:32.743

3

#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).

Working example : http://jsfiddle.net/ntim/SKnxP/

position:absolute; also doesn't seem necessary in your case.

edited Mar 04 '14 at 19:31

answered Mar 04 '14 at 19:21

Tim Nguyen

1,163
10
21

1

While we're at it, `background-size:100%;` probably isn't necessary, either. Divs automatically expand to fill as much width as possible by default, unless instructed otherwise by CSS. – TylerH Mar 04 '14 at 19:33
1

Yep, background-size:100% is only necessary if the user adds a background-image. And even background-size:cover is better in that case. – Tim Nguyen Mar 04 '14 at 19:39

score 1 · Answer 2 · edited Mar 04 '14 at 19:29

1

You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:

<style>
#banner {
    background-color: #333FFF;      
    font-family: Arial;
    padding:15px;
    height:800px;
    background-size:100% 100%;
}
</style>

edited Mar 04 '14 at 19:29

Choudhury A. M.

5,152
3
21
21

answered Mar 04 '14 at 19:25

Luke Whitehouse

33
1
5

New problem... how do I align text or links within a certain part of the banner or div? Vertically I mean. It's like halfway "off" of the bottom when I adjust the px height of the div. Not sure if any of that made sense but yeah. – user35698 Mar 04 '14 at 19:47

score 0 · Answer 3 · edited May 23 '17 at 10:34

here is something based on a template I use:

<!DOCTYPE html>
<html>
<head>
   <title>Title</title>
   <link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
      <style type="text/css">
      body
      {
        background-color: #E7E7E7;
        text-align: center;
        font-family: Arial, Helvetica;
        font-size: 15px;
        color: #000000;
        border-spacing: 0;
        border-collapse:collapse;
        padding: 0;
        margin: 0;
      }

      #Banner {
        background-color: #333FFF;
        top: 0; /* Probably not necessary... */
        height: 40px;
        width: 100%; /* Also probably not necessary */
      }

      #ContentMain
      { 
        background-color: #FFFFFF;
        height: 100%;
      }
      </style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here

</div>
</body>
</html>

should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...

Jsfiddle here

Why link to the stylesheet externally and internally use the style tag? — user35698, Mar 04 '14 at 19:50
Oh... that is because the original template I used had an external style sheet... you could use it as an example of how to link to a stylesheet? — Wilf, Mar 04 '14 at 19:52

HTML/CSS banner not working

3 Answers3