CODEWITHSUNDEEP
htmlcsspositioncss-position
CheckLife
CheckLife

Reputation: 23

Why is my content going above my header?

so this is just a section of my page, im confused as to why my content is going above and under my header when i set the header position to fixed? 

Here is my code:

https://jsfiddle.net/CheckLife/nod19rze/2/

Here is a better picture of whats going on, its a screenshot:

https://i.sstatic.net/pl13v.jpg

Upvotes: 0

Views: 8525

Answers (3)

ridoansaleh
ridoansaleh

Reputation: 624

I think you was trying to made a Fixed Top Menu. If that was the case. You could follow my code below. I have edited your code before. 

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
}

header,
nav,
section,
aside,
footer,
article {
  display: block;
}

body {
  background-image: url(backwood.png);
  width: 100%;
  margin: auto;
}

.container {
  margin-top: 190px;
  background-size: cover;
  width: 1300px;
  height: 100%;
}

.header {
  overflow: hidden;
  position: fixed;
  z-index: 2;
  top: 0;
  background: linear-gradient(to right, #5092f4, #f29641);
  margin-top: 0px;
  width: 100%;
}

.header h1 {
  text-align: center;
  width: 100%;
  padding-bottom: 15px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f4ca1f;
}

.clear {
  clear: both;
}

.tmacw {
  display: inline;
  position: relative;
  padding: 0px;
  top: 5px;
}

.nba {
  margin-right: 10px;
}

.thenav {
  background-color: #7886a3;
  width: 100%;
  height: 85px;
  position: relative;
  z-index: 1;
}

.logo {
  float: left;
}


/* Style for the Nav Bar */

.thenav ul {
  padding: 0;
  margin: 0;
}

.thenav ul li {
  float: left;
  width: 90px;
  text-align: center;
  border-right: 1px groove #141e38;
  position: relative;
}

.thenav ul li a {
  display: block;
  color: white;
  font-weight: bold;
  padding: 33px 10px;
}

.thenav ul li a:hover {
  background-color: #47e586;
  transition: all 0.90s;
}


/*Dropdown Nav */

.thenav li ul li {
  background-color: #7886a3;
  border: 2px groove grey;
  border-radius: 4px;
  position: relative;
}

.thenav li ul li a {
  padding: 8px;
  text-align: left;
}

.thenav li ul li:nth-child(1) a:hover {
  background-color: #F47575;
}

.thenav li ul li:nth-child(2) a:hover {
  background-color: #f7d759;
}

.thenav li ul li a:hover {
  background-color: red;
}

.thenav ul li ul {
  display: none;
}

.thenav li:hover ul {
  position: absolute;
}

.thenav li:hover ul {
  display: block;
}


/* End of Dropdown */

.userlogin {
  font-size: 12px;
  top: 2px;
  color: white;
}

input[type=text],
input[type=password] {
  font-weight: bold;
  margin: 0;
  font-size: 8px;
  height: 10px;
  padding: 3px 5px 3px 5px;
  color: 162354;
}


/* Stats Button */

.stat input[type=button] {
  background-color: #6cd171;
  color: blue;
  border-radius: 6px;
  font-weight: bold;
  border: none;
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  padding: 2px 2px;
  font-family: Verdana, Geneva, sans-serif;
}

.log[type=button] {
  background-color: white;
  color: #008cff;
  border-radius: 4px;
  font-weight: bold;
  border: none;
  padding: 1px 2px 2px 2px;
  position: relative;
  left: 5px;
  top: 3px;
}

.tracy {
  float: left;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
}

.img-container {
  float: left;
  height: 220px;
  width: 206px;
  position: relative;
}

.fade-img {
  float: left;
  top: 0;
  bottom: 0;
  position: absolute;
  transition: opacity 2s ease-out;
  transition-delay: 3s;
}


/* Tmac Pic */

.main {
  background-color: #f7f4f4;
  margin-right: 480px;
  margin-left: 20px;
  box-shadow: 10px 10px 10px #1f2963;
  border-radius: 12px;
  padding-bottom: 20px;
  overflow: auto;
}

.tmacLogo {
  top: 12px;
  left: 0px;
}

hr {
  margin-bottom: 8px;
}

.main h1 {
  text-align: center;
  background-color: #ea5663;
  padding-bottom: 10px;
  color: #3f3c3c;
  text-shadow: 2px 3px 2px #ff2b4b;
  font-size: 30px;
  letter-spacing: 2.5px;
}

.main p {
  padding-top: 2px;
  padding-left: 5px;
  padding-right: 5px;
}


/* End of Main */
<body>
  <div class="header">
    <h1 id="box">
      <image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
    <div class="thenav">
      <img src="nba-logo-on-wood.jpg" alt="My Layout Logo" width="100px" height="85px" class="logo">
      <nav class="top">
        <ul>
          <li><a href="http://www.nba.com">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Players</a>
            <ul>
              <li><a href="#">T-Mac <img src="tmacw.png" width="25px" height="20px" class="tmacw"></a></li>
              <li><a href="#kobesec">Kobe</a></li>
              <li><a href="#">Kevin Durant</a></li>
              <li><a href="#">The Goat</a></li>
            </ul>
          </li>
          <li><a href="#">News</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="clear"> </div>
  <div class="container">
    <div class="main">
      <h1>T-Mac <img src="tmacw.png" alt="TmaC" width="64px" height="44px" class="tmacLogo"></h1>
      <hr style="color:red;">
      <div class="img-container">
        <img src="tmac.jpg" alt="TmaC" width="175px" height="220px" class="tracy fade-img">
      </div>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
        PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
        and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release. It has survived not only
        five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
        like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
        specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release.
      </p>
    </div>
  </div>
  <div class="cleartwo"></div>
</body>

Fixed position means The element is positioned relative to the browser window.

You can check more about HTML element's position description on W3Schools

Feel free to ask me if there are further questions about mine.

Upvotes: 0

Lucian
Lucian

Reputation: 1713

for absolute and fixed position element, you'll need to use padding to take the space since these elements won't take any layout. in your case i suggest to use padding for container

.container {
  padding-top: 170px; //it should be more than or equal to header height
}

also i suggest to use higher z-index for header so that it will always be at the top.

.header {
  z-index: 9;
}

here is the updated fiddle https://jsfiddle.net/nod19rze/9/

Upvotes: 1

Gowri Sankar
Gowri Sankar

Reputation: 111

There is a position: relative given to the images, which means, the images will take a position relative of the closest parent element which has position:absolute.

It has nothing to do with position: fixed specified to the header.

Here's an example. https://jsfiddle.net/voaxhmu2/

The blue div is positioned relative to the red div. Therefore specifying top: 30px; left:10px will offset the blue div by 10 and 30 pixels from the position of the red div

You can either increase the values of the offsets to match your needs but that's not actually a good practice. Instead you can remove the position: absolute and position: relative and position them with bootstrap. It's much easier.

Upvotes: 0

Related Questions