CODEWITHSUNDEEP
javascriptjqueryhtmlcss
VladKrav
VladKrav

Reputation: 33

Stuck on an html/css issue

The issue I have is that the background for .para is not showing. Its supposed to show in front of tile2 background image but it is not. I am new to html and css but I learn fast. If anyone can pitch in and show me how to fix this and what I'm doing wrong it would be much appreciated. :)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding-top: 550px;
}
header {
  height: 605px;
  padding-top: 50px;

}
.main-nav,
.main {
  position: relative; 
}
.main-nav {
  background: #fff;
  height: 70px;
  z-index: 150;
  margin-bottom: -60px;
  box-shadow: 0 4px 6px rgba(0,0,0,.4);
  overflow: hidden;
  width:100%;
  padding-top:0px;
}
header,
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
  list-style-type: none;
    margin-top: 0px;
    margin: 15;
    padding: 0;
    overflow: hidden;
}
.main-nav-scrolled {
    list-style-type: none;
    margin-top: 0px;
    margin: 15;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
.main {
  background-image: url("img/tiles2.png");
  background-attachment:fixed;
  padding: 120px 50px 50px;
  column-count: 2;
  column-gap: 40px;
}

/* ------------------------------------*/
.main-nav ul {
    width: 100%;
    list-style-type: none;
    margin-top: 0px;
    margin: 15;
    padding: 0;
    overflow: hidden;
    background-color: #333;


    }

.main-nav li {
    float: left;
}

.main-nav li:last-child {
    border-right: none;
}

.main-nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 26px 29px;
    text-decoration: none;
}

.main-nav li a:hover:not(.active2) {
    background-color: #111;
}

.main-nav .active2 {
    background-color: #4CAF50;
}


<!----------------------------------------------------------->

.para{
    position: relative;
    height:800px;
    display: inline-block;
    margin-left: 230px;
    margin-right: 50px;
    margin-top:30px;
    background-color: #FFFFFF;
    padding: 50px;
    font-size:200;
    font-family:verdana;
    line-height:2;
    overflow:auto;
}
</style>
</head>

<body>

<ul>
  <li><a class="active2" href="Index.html">Home</a></li>
  <li style="float:right"><a href="Competitions.html">Competitions</a></li>
  <li style="float:right"><a href="About.html">About</a></li>
</ul>

<header>
  <img src="img/aboutHeader2.png" alt="header" style="width:100%;">
</header>

<div class="main-nav">
  <ul>
  <li><a class="active2" href="Index.html">Home</a></li>
  <li style="float:right"><a href="Competitions.html">Competitions</a></li>
  <li style="float:right"><a href="About.html">About</a></li>
</ul>
</div>

<div class="main">
  <div class="background">

  </div>

  <div class="para">
     <p>Central Pennsylvania Music Teachers Association is an affiliate of the Pennsylvania Music Teachers Association and the Music Teachers National Association. Founded in 1846 by Theodore Presser in Delaware, Ohio, MTNA serves 25,000 independent music teachers committed to the pursuit of excellence in music teaching.

MTNA and its affiliates seek to promote the professional growth and development of its members and to further the art of music by providing programs that encourage and support teaching, performance, composition and scholarly research.

To receive membership applications, and additional information about our organization click MTNA APPLICATION

</p>
  </div>

  <div class="circles">

  </div>
</div>

<script src="js/jquery-1.9.js"></script>

<script>
var  mn = $(".main-nav");
    mns = "main-nav-scrolled";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});
</script>
</body>
</html>

Upvotes: 0

Views: 165

Answers (3)

oxweb
oxweb

Reputation: 1

Just add .para p { background-color: white; padding: 20px; }

Upvotes: 0

Andrew Adam
Andrew Adam

Reputation: 1582

Here is a working JSFiddle

You just have to remove the false comment line

<!------->

Upvotes: 0

Martin Parenteau
Martin Parenteau

Reputation: 73731

Just remove the "comment" line:

<!----------------------------------------------------------->

Or replace it with: 

/* ----------------------------------------------------------- */

Upvotes: 1

Related Questions