Search code examples
htmlcsssidebar

Text shows up behind a sidebar on my html page

So I have an html page that has a sidebar on the left side, but whenever i want to put some text on the page, some of it will be behind said sidebar and I don't know how to make it so that the text is never obscured by it.

Here is the css code:

a {
    text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
    color: #050213;
    text-decoration: none
}

@media (max-width: 600px) {
    .main {
        border-radius: 0px;
    }
}

.sidenav {
    height: 100%;
    /* Full-height: remove this if you want "auto" height */
    width: 160px;
    /* Set the width of the sidebar */
    position: fixed;
    /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1;
    /* Stay on top */
    top: 0;
    /* Stay at the top */
    left: 0;
    background-color: #111;
    /* Black */
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 20px;
}


/* The navigation menu links */

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover {
    color: #f1f1f1;
}


/* Style page content */

.main {
    margin-left: 160px;
    /* Same as the width of the sidebar */
    padding: 0px 10px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}

And this is what happens on the page: enter image description here

Edit Here is the html code:

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="sidebar.css">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <title>Templates</title>
</head>

<body>

    <div class="sidenav">
        <a href="main.html">Creeaza test</a>
        <a> </a>
        <a href="preview.html">Preview templates</a>
        <a> </a>
        <a href="verifica.html">Verifica teste</a>
        <a> </a>
        <a href="signin.php">Log out</a>
        <a> </a>



    </div>




    <p>Asta e un test>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></p>

</body>

</html>
Solution

  • I found your problem you have added CSS in your CSS but you are not using that class in your HTML.

    and what ever you are trying to add add in <div class="main"></div>

    for example

    <div class="main">
        <p>Asta e un test>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></p>
</div>

    Full Code

    a {
    text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
    color: #050213;
    text-decoration: none
}

@media (max-width: 600px) {
    .main {
        border-radius: 0px;
    }
}

.sidenav {
    height: 100%;
    /* Full-height: remove this if you want "auto" height */
    width: 160px;
    /* Set the width of the sidebar */
    position: fixed;
    /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1;
    /* Stay on top */
    top: 0;
    /* Stay at the top */
    left: 0;
    background-color: #111;
    /* Black */
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 20px;
}


/* The navigation menu links */

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover {
    color: #f1f1f1;
}


/* Style page content */

.main {
    margin-left: 160px;
    /* Same as the width of the sidebar */
    padding: 0px 10px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}
    <!-- <section>
<div class="sidenav">
  <ul>
    <li><a>sas</a></li>
    <li><a>sas</a></li>
    <li><a>sas</a></li>
  </ul>
</div>
<div class="main">
  dds
</div>
</section> -->

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="sidebar.css">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <title>Templates</title>
</head>

<body>

    <div class="sidenav">
        <a href="main.html">Creeaza test</a>
        <a> </a>
        <a href="preview.html">Preview templates</a>
        <a> </a>
        <a href="verifica.html">Verifica teste</a>
        <a> </a>
        <a href="signin.php">Log out</a>
        <a> </a>
    </div>
    <div class="main">
        <p>Asta e un test>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></p>
  </div>
</body>

</html>