Div not showing background color [Archive]

View Full Version : Div not showing background color

gottijay2000

04-07-2015, 08:00 PM

i'm very new to css and i'm still trying to get a hang of things work. what i'm trying to do should be simple, but i don't understand why its not working.

i have a banner div from my code below which i set to have a background color of yellow just so i know its there . i just can't seem to figure out why the div is not displaying. Can anyone please help!!!

thanks

body {
font-family: arial, sans-serif;
background-image: url("dark-canvas.gif");
padding: 0;
margin: 0;
/* max-width: 100%; */
}

#header {
position: fixed;
width: 100%;
background-color: black;
height: 70px;
z-index: 10;
/*overflow: auto; */
}

#icons {
float: right;
padding-right: 10px;
}

#banner {

background-color: yellow;
height: 50px;

}

<html>

<HEAD>

<title>My test script</title>
<link href="./bukotest.css" rel="stylesheet" type="text/css">

</HEAD>

<BODY>


<div id="header">
<div>
<img src="twitter-icon.png">
</div>
<div>
<img src="twitter-icon.png">
</div>
<div>
<img src="twitter-icon.png">
</div>
<div id="icons">
<img src="twitter-icon.png">
</div>

</div> <! end of header ->

<div id="banner">
<img src="twitter-icon.png">
</div>

</BODY>

</html>

Beverleyh

04-07-2015, 08:28 PM

It's hiding behind your black header ;)

The reason for this is that the header has a fixed position, which pulls it out of the normal flow of the document. On its own - right at the top of the markup in the body section - it doesn't make much difference, but as soon as other elements are added, the behaviour becomes more obvious. The next element in your markup - yellow banner - acts like it isn't there, and sits in the flow of the web page, which for it is right at the top of the document. The header has a greater height so it covers it (remove the header's background colours and you'll see the yellow banner peeping through.)

So now you need to decide where to display the yellow banner. If you want it to take up normal flow but have it show under the banner, give it a relative position and place it 70px from the top;

#banner {
background-color: yellow;
height: 50px;
position: relative;
top: 70px;
}
This may or may not be what you want to achieve but I hope it helps explain some of the behaviour and starts you out with learning how positioning works :)

More info http://www.barelyfitz.com/screencast/html-training/css/positioning/

gottijay2000

04-07-2015, 09:26 PM

Thank you very much! that worked a treat! :D....
the short tutorial was very helpful as well