CODEWITHSUNDEEP
htmlcss
user3533643
user3533643

Reputation: 3

How do I add a background color to a text div without it coloring everything?

I have a navigation div anchored at the top of my page. The div is entirely text, and works fine, however when scrolling over an image or text, it cannot be seen clearly. I tried to remedy this by adding a background color to the div tag, but for some reason, the background color changes the color of the entire page, covering everything.

Is this due to the div being anchored to the top? Is there a way to clear it?

Apologies for lack of code before. Here is a essentially what I am doing:

<html>
<head>
<title>stack overflow</title>
<style type="text/css">
    #nav {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #0000FF;
}
</style>
<link href="yotb.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="nav"><center>HEADER</center></div>
<div id="container">
<div id="content">
PAGE CONTENT
</div>
</div>
</div>

EDIT: Karim's answer fixed it. Thank you for your help, everyone.

Upvotes: 0

Views: 283

Answers (3)

Karim AG
Karim AG

Reputation: 2193

What you've done here is that you set position:fixed; to the element and you declare it's boundaries to top:0 bottom:0 so it's gonna spread from top to bottom, AND left:0 right:0 so it's gonna spread from left to right, simply remove right and bottom (you really don't need those bro).

Check out this FIDDLE.

Upvotes: 1

KM123
KM123

Reputation: 1377

It is quite hard to provide a question without seeing what you have already, but I would recommend firstly the below. (Firstly let me apologies if you are already familiar with HTML)

  1. Check that the div has been closed
  2. Set a width and height to the div
  3. Make sure you are only changing the background-color of that div and not another element

I hope this helps!

Upvotes: 0

Ryan Mann
Ryan Mann

Reputation: 5357

<style type="text/css">
    .anchored-top
    {
        float:left;
        position:relative; /* Highlight only text in the div by wrapping objects in a span */
    }
    .anchored-top span
    {
        background-color: blue;
    }
    .clear
    {
        clear:both; /* use an empty div with a class of clear to clear the floats */
    }
</style>
<div class="anchored-top">
   <span>Stuff in Here</span>   
</div>
<div class="clear" />

Upvotes: 0

Related Questions