CODEWITHSUNDEEP
htmlcss
Zac Paul
Zac Paul

Reputation: 11

<div> backgrounds not showing

I have made two separate sections with two separate backgrounds. Why aren't these two divs showing up.

I am trying to have the Navbar on the top, and then another section not connected to the Navbar below it but it's just not even showing up at all, and I'd like to know why. Thanks guys! 

                                            HTML
    <!DOCTYPE html>
    <html>
    <head>
<title>
    Hair by Michelle
</title>
<link rel="stylesheet" type="text/css" href="home.css">
 </head>
    <body>
    <div class="all">
<div class="navbar">
        <ul> <h1>Hair By Michelle</h1>
            <li class="home"><a href="#">home</a></li>
            <li class="about"><a href="#">about</a></li>
            <li class="availability"><a href="http://hairbymichelle.simplybook.me/sheduler/manage/">appointments</a></li>
            <li class="contact"><a href="#">contact</a></li>
        </ul>
</div>


    <img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>      
<div class="hours">
    <h1>Hours</h1>

    </div>
</div>


                                           CSS

    body {
background: gray;
background-image: url("http://i.jootix.com/r/abstract-hair-design-abstract-hair-design-1920x1080.jpg")
    }
   .navbar {
text-align: center;
background-color: #323232;
position: fixed;
width: 100%;
z-index:100;
   }
    .navbar h1 {
text-align: center;
text-shadow: -2px 1px 13px;
color: white;
    }
   .navbar li {
display: inline;
border-right: 2px solid black;
margin: 10px;
padding-right: 25px;
color: white;
   }
    .navbar li:last-child {
border-right:none;
     }
     .navbar li a{
text-decoration: none;
text-shadow:  2px;


}
   .navbar li a:link {
color: white;
   }
   .navbar li a:visited {
color: white;
 }
  .navbar li a:active {
color: green;
  }
  .navbar li a:hover {
  color: brown;

   }
    .pic1  {
width: 200px;
height: 200px;
border-radius: 100%;
margin-top:5px;
position: absolute;
z-index: 200;

   }
   .hours h1 {
background-color: #323232;
z-index: 300;
 }

Upvotes: 0

Views: 79

Answers (3)

enzoyaaaaa
enzoyaaaaa

Reputation: 60

At First, your have to improve your typesetting, which make yourself figure out nested html easily.

For Example.

<html>
    <head>
    </head>
    <body>
        <div class="all"></div>
        <div class="hours">
            <h1>Hours</h1>
        </div>
    </body>
</html>

you can realize the nested relation with a glance.

After typesetting, we can find the extra , I'm not sure if it is beneath < img > or < h1 >hours< /h1 >

Finally, I think you mean you want to show the hours under navbar. Add things below,

.all {

position: relative;

}

.hours {

position: relative;
top:120px;

}

it may match your requirement.

Upvotes: 0

Little Santi
Little Santi

Reputation: 8793

The position: fixed style of the navbar is preventing the second H1 from appearing, for in this way it lays under the navbar. If you want the navbar always visible independently of the vertical scrolling state of the rest of the page, maybe adding a vertical padding to the hours div would do:

.hours {
    padding-top: 100px;
}

Upvotes: 0

alaney
alaney

Reputation: 623

It's there but it's hidden behind your navbar and picture. You have set the navbar and image to position: fixed and position: absolute so they are removed from the flow of the DOM. The <h1> is sitting at the top because it is IN the flow of the DOM and is basically the first element as far as that's concerned. If you set the padding: "150px" you can at least see it.

You should probably think about restructuring a bit. Check out this for some good info on positioning.

Upvotes: 1

Related Questions