CODEWITHSUNDEEP
htmlcsscss-position
user7976244
user7976244

Reputation:

Prevent overlap with an absolutely positioned element

How do I prevent the page contents overlapping with the (absolutely positioned) header element?

I'm sorry because I suck at explaining.

Here's the JSFiddle Link to my code: https://jsfiddle.net/980vfb3o/

/* CSS */
        body {
    background-color: #FFFFFF !important;
    margin:0 auto;
    padding: auto;
}

/*The Color of the Header */

.headerstyle {
    background-color: #4CBFBC;
    width: 100%;
    height: 36px;
    padding: 0px;
    margin: 0px;
    position: absolute;
}


/* The Three Line Menu */

.menu {
    width: 25px;
    height: 2px;
    background-color: black;
    margin: 6px 0;
    padding: 2px;
    position: relative;
    left: 3px;
}


#item {
    font: 14px Arial;
    text-align: center;
    padding: 0 auto;
}


.img-responsive {
    display: block;
    margin: auto;
    padding: 0 auto;
    width: 100px;
    min-width: 65px;
}

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Codementary - Coding is Life</title>
</head>

<body>
    <header class="headerstyle">
        <div id="headerstyle"></div>

        <!-- The three line Menu -->
        <span onclick="openNav()">
                <div class="menu"></div>
                <div class="menu"></div>
                <div class="menu"></div>
            </span>
    </header>

    <!-- MAIN Body Elements -->

    <!-- HTML Section -->
    <section div="items">
        <section class="fblock">
            <img src="img/html5.png" class="img-responsive" draggable="false" />
            <span class="dtxt"><h4><b>HTML5</b></h4>
            <p>Learn HTML5 from top to bottom and Implementing it on how to use it on Making real webpages.</p></span>
        </section>

        <hr>

    </section>

</body>

</html>

Upvotes: 0

Views: 1184

Answers (2)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14032

You need to add top: 0 to your header, and margin-top: 36px (header's height) to your section. I've fixed HTML markup (replaced <section div="items"> with <section class="items">). Demo:

function openNav() {
  document.getElementById("mySidenav").style.width = "200px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
body {
  background-color: #FFFFFF !important;
  margin: 0 auto;
  padding: auto;
}

/*The Color of the Header */
.headerstyle {
  background-color: #4CBFBC;
  width: 100%;
  height: 36px;
  padding: 0px;
  margin: 0px;
  position: absolute;
  top: 0; /* new */
}

/* The Three Line Menu */
.menu {
  width: 25px;
  height: 2px;
  background-color: black;
  margin: 6px 0;
  padding: 2px;
  position: relative;
  left: 3px;
}

/* Opened SideNav */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #4CBFBC; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 22.4px;
  color: #302F2D;
  display: block;
  transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
  color: #FFFFFF;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#snav {
  overflow: hidden;
  white-space: nowrap;
  display: block;
}

#item {
  font: 14px Arial;
  text-align: center;
  padding: 0 auto;
}

hr {
  width: 90%;
}

.img-responsive {
  display: block;
  margin: auto;
  padding: 0 auto;
  width: 100px;
  min-width: 65px;
}

.dtxt {
  text-align: center;
  width: 100%;
}

.pre-footer {
  text-align: center;
  width: 100%;
}

/* new */
.items {
  margin-top: 36px;
}
<header class="headerstyle">
  <div id="headerstyle"></div>

  <!-- Side Navigation Bar Items -->
  <div id="snav">
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="home.html"><i class="glyphicon glyphicon-home"> Home</a></i>
      <a href="feedback.html"><i class="glyphicon glyphicon-comment"> Feedback</a></i>
      <a href="settings.html"><i class="glyphicon glyphicon-cog"> Settings</a></i>
      <a href="about.html"><i class="fa fa-code">   About</a></i>
    </div>
  </div>

  <!-- The three line Menu -->
  <span onclick="openNav()">
                <div class="menu"></div>
                <div class="menu"></div>
                <div class="menu"></div>
            </span>
</header>

<!-- MAIN Body Elements -->

<!-- HTML Section -->
<section class="items">
  <section class="fblock">
    <img src="img/html5.png" class="img-responsive" draggable="false" />
    <span class="dtxt"><h4><b>HTML5</b></h4>
            <p>Learn HTML5 from top to bottom and Implementing it on how to use it on Making real webpages.</p></span>
  </section>

  <hr>

  <!-- CSS Section -->
  <section class="sblock">
    <img src="img/css3.png" class="img-responsive" draggable="false" />
    <span class="dtxt"><h4><b>CSS3</b></h4>
            <p>Learn on how to style HTML Elements and make them look elegant using CSS3.</p></span>
  </section>

  <hr>

  <!-- Javascript Section -->
  <section class="tblock">
    <img src="img/js.png" class="img-responsive" draggable="false" />
    <span class="dtxt"><h4><b>Javascript</b></h4>
            <p>Learn how to adjust Behaviour of your HTML and CSS Elements using Javascript.</p></span>
  </section>

  <hr>

  <!-- SQL Section -->
  <section>
    <img src="img/sql.png" class="img-responsive" draggable="false" />
    <span class="dtxt"><h4><b>SQL</b></h4>
            <p>Learn how to manage Database using SQL.</p></span>
  </section>
</section>

<hr>

<div class="pre-footer">
  <p>More Tutorial/Courses Coming soon.</p>
</div>

Upvotes: 1

Rich
Rich

Reputation: 3336

I'm not totally sure if I'm understanding, but if you're trying to increase the space between the bottom of the absolutely-positioned navbar and the rest of the content, then you can just add a margin above the first element in the relatively-positioned content, in this case, the <h4> tag around the HTML title:

https://jsfiddle.net/980vfb3o/2/

Hope this helps!

Upvotes: 0

Related Questions