CODEWITHSUNDEEP
htmlcss
Devoted
Devoted

Reputation: 111

Putting a div under text

My HTML code:

<div id="backgroundH"></div>

<div id="header">
    <h2> Premium Store </h2>
</div>

My CSS code:

#backgroundH {
    width: 100%;
    height: 50px;
    background-color: #dddddd;
}

#header {
    top:-50px;
    color:black;   
    font-family:Courier New;
}

body {
    background-color:#cccccc;
}

So why isn't it working? I tried everything. Can somebody show me how to put that text over my div which I am using as a background in this case?

It should look like a gray background underneath a text which says "premium store".

Upvotes: 3

Views: 2571

Answers (2)

man
man

Reputation: 229

You've got the order of your divs wrong it should be like this:

http://jsfiddle.net/mCGt8/

html:

<div id="backgroundH">        
    <div id="header">
        <h2> Premium Store </h2>
    </div>        
</div>

css:

#backgroundH {
  width: 100%;
  height: 50px;
  background-color: #dddddd;       
}

#header {    
  top:-50px;
  color:black;   
  font-family:Courier New;
}

body {
  background-color:#cccccc;
}

Upvotes: 2

Andre Figueiredo
Andre Figueiredo

Reputation: 13425

In text-div you are using top: -50px, so I believe you want text-div sibling to background-div and you missed position: relative.

#header {
    position: relative;
    top: -50px;
    color: black;   
    font-family: Courier New;
}

The problem with position: relative is that the space that div would fill before top: -50px stills there.

So, you have 2 ways:

  1. CSS: use margin-top: -50px;

  2. HTML: nest text-div to background-div if it's possible. (preferred)

Upvotes: 0

Related Questions