CODEWITHSUNDEEP
htmlcssbackground-color
MikeB
MikeB

Reputation: 13

Why isn't one background color for a div not showing

I can't seem to figure out why the background color for the class menuBar isn't showing. All the "Hello"s are just placeholders so i can see where each thing is. I've scoured the interwebs and have yet to prevail. As you can see I am a little bit of a beginner in programming, but that's why I came here, so I could learn from the best. ;)

Here's the CSS and html

* {
  padding: 0;
  margin: 0;
  border: 0;
}
body {
  background-image: url(' 3D Mike.jpg ');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% auto;
}
.blended_grid {
  display: block;
  width: 1200px;
  overflow: auto;
  margin: 60px auto 0 auto;
}
.header {
  float: left;
  clear: none;
  min-width: 100px;
  min-height: 35px;
}
.topBanner {
  background-image: url(' topBanner.png ');
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  clear: none;
  height: 200px;
  width: 1200px;
}
.menuBar {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 35px;
  width: 1200px;
}
.leftColumn {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}
.feedHost {
  float: left;
  clear: none;
  min-width: 80px;
  min-height: 80px;
}
.feed_00 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_01 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_02 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_03 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_04 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_05 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.rightColumn {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}
<html>

<head>
  <title>
    Welcome!
  </title>

  <link rel="stylesheet" type="text/css" href="Styles.css">
</head>

<body>
  <div class="blended_grid">
    <div class="header">
      <div class="topBanner">

      </div>

      <div class "menuBar">
        <p>Hello</p>
      </div>
    </div>
    <div class="leftColumn">
      <p>Hello</p>
    </div>

    <div class="feedHost">
      <div class="feed_00">
        <p>Hello</p>
      </div>

      <div class="feed_01">
        <p>Hello</p>
      </div>

      <div class="feed_02">
        <p>Hello</p>
      </div>

      <div class="feed_03">
        <p>Hello</p>
      </div>

      <div class="feed_04">
        <p>Hello</p>
      </div>

      <div class="feed_05">
        <p>Hello</p>
      </div>
    </div>

    <div class="rightColumn">
      <p>Hello</p>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 89

Answers (2)

Jeff
Jeff

Reputation: 2423

You were missing the equals sign:

<div class="menuBar">


* {
  padding: 0;
  margin: 0;
  border: 0;
}
body {
  background-image: url(' 3D Mike.jpg ');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% auto;
}
.blended_grid {
  display: block;
  width: 1200px;
  overflow: auto;
  margin: 60px auto 0 auto;
}
.header {
  float: left;
  clear: none;
  min-width: 100px;
  min-height: 35px;
}
.topBanner {
  background-image: url(' topBanner.png ');
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  clear: none;
  height: 200px;
  width: 1200px;
}
.menuBar {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 35px;
  width: 1200px;
}
.leftColumn {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}
.feedHost {
  float: left;
  clear: none;
  min-width: 80px;
  min-height: 80px;
}
.feed_00 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_01 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_02 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_03 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_04 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_05 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.rightColumn {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}
<html>

<head>
  <title>
    Welcome!
  </title>

  <link rel="stylesheet" type="text/css" href="Styles.css">
</head>

<body>
  <div class="blended_grid">
    <div class="header">
      <div class="topBanner">

      </div>

      <div class="menuBar">
        <p>mrnu bar</p>
      </div>
    </div>
    <div class="leftColumn">
      <p>Hello</p>
    </div>

    <div class="feedHost">
      <div class="feed_00">
        <p>Hello</p>
      </div>

      <div class="feed_01">
        <p>Hello</p>
      </div>

      <div class="feed_02">
        <p>Hello</p>
      </div>

      <div class="feed_03">
        <p>Hello</p>
      </div>

      <div class="feed_04">
        <p>Hello</p>
      </div>

      <div class="feed_05">
        <p>Hello</p>
      </div>
    </div>

    <div class="rightColumn">
      <p>Hello</p>
    </div>
  </div>
</body>

</html>

Upvotes: 2

Phil-R
Phil-R

Reputation: 2253

You are simply missing the = sign on your attribute

* {
  padding: 0;
  margin: 0;
  border: 0;
}
body {
  background-image: url(' 3D Mike.jpg ');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% auto;
}
.blended_grid {
  display: block;
  width: 1200px;
  overflow: auto;
  margin: 60px auto 0 auto;
}
.header {
  float: left;
  clear: none;
  min-width: 100px;
  min-height: 35px;
}
.topBanner {
  background-image: url(' topBanner.png ');
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  clear: none;
  height: 200px;
  width: 1200px;
}
.menuBar {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 35px;
  width: 1200px;
}
.leftColumn {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}
.feedHost {
  float: left;
  clear: none;
  min-width: 80px;
  min-height: 80px;
}
.feed_00 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_01 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_02 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_03 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_04 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.feed_05 {
  background-color: rgba(0, 0, 0, 0.2);
  float: none;
  clear: both;
  height: 100px;
  width: 800px;
}
.rightColumn {
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}
<html>

<head>
  <title>
    Welcome!
  </title>

  <link rel="stylesheet" type="text/css" href="Styles.css">
</head>

<body>
  <div class="blended_grid">
    <div class="header">
      <div class="topBanner">

      </div>

      <div class="menuBar">
        <p>Hello</p>
      </div>
    </div>
    <div class="leftColumn">
      <p>Hello</p>
    </div>

    <div class="feedHost">
      <div class="feed_00">
        <p>Hello</p>
      </div>

      <div class="feed_01">
        <p>Hello</p>
      </div>

      <div class="feed_02">
        <p>Hello</p>
      </div>

      <div class="feed_03">
        <p>Hello</p>
      </div>

      <div class="feed_04">
        <p>Hello</p>
      </div>

      <div class="feed_05">
        <p>Hello</p>
      </div>
    </div>

    <div class="rightColumn">
      <p>Hello</p>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions