cPanel Question posted in
The official documentation can be seen here.

When i scroll down, the info in my <li> element appears on top of my navbar. Can some help me with it – CPanel

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

::selection{
    background-color: #333;
    color: rgb(255, 230, 0);
}

::-moz-selection{
    background-color: #333;
    color: rgb(255, 255, 255);
}


::-webkit-scrollbar{
    width: 10px;
}

::-webkit-scrollbar-thumb{
    background-color: rgb(255, 198, 198);
    -webkit-border-radius: 10px;
}

::-webkit-scrollbar-track{
    background-color: #f8f8f8;
}

header{
    width: 100%;
    z-index: 100;
}



.nav-list, #left-navbar, #right-navbar{
    display: flex;
}

.img-logo{
    width: 200px;
    transform: translateX(-20px);

}

#right-navbar{
    transform: translateX(300px);
}

.nav-list{
    position: fixed;
    width: 1152px;
    top: 0;
    left: 110px;
    background-color: rgb(255, 255, 255);
    list-style-type: none;
    padding: 20px;
    box-shadow: 0px 0px 9.5px 0px black;
}

.n{
    text-decoration: none;
    color: black;
    font-size: 14px;
    font-weight: 700;
}

.nav-link{
    text-decoration: none;
    padding: 10px;
    color: black;
    font-size: 14px;
    font-weight: 700;
}

.nav-link:hover{
    border-bottom: 4px solid rgb(255, 0, 0);
    transition: all ease-out .5s;
}

.n:hover{
    border-bottom: 4px solid rgb(255, 0, 0);
    transition: all ease-out .5s;
}

#free-web-hosting{
    background-color: #f8f8f8;
    height: 100vh;
    padding: 230px 100px;
    overflow-y: hidden;
    background-image: url(https://images2.imgbox.com/d7/c9/XyznzmUz_o.png);
    background-repeat: no-repeat;
    background-position-x: 600px;
    background-position-y: 170px;
}


button{
    background-color: #ff5d64;
    border-radius: 5px;
    box-shadow: .5px .5px 20px .5px rgb(212, 209, 209);
    border: none;
    padding: 12px; 
}

.fwh-img{
     transform: translate(470px, -250px);
     z-index: 1;
}

.fas, .nav-link{
    position: relative;
    top: 19px;
}

.bg-red{
    border: none;
    border-radius: 5px;
    background-color: red;
    color: white;
    margin: 0px 40px;
    padding: 10px 25px;
    box-shadow: 0px 0px 10px 0px rgb(255, 140, 140);
}

#sponsors{
    display: flex;
    justify-content: center;
    align-items: center;
}

.sponsors-img{
    padding: 10px 40px;
    margin-top: 30px;
}

#all-starts{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 60px 0px;
}

#pricing-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.pricing{
    width: 280px;
    height: 100vh;

    box-shadow: 0px 0xp 10px 0px;
    border: 1px solid black;
}`enter code here`

.pricing1, .see-more{
    display: flex;
    flex-direction: column;
}

@media  (max-width: 768px) {
    #free-web-hosting{
        background-image: none;
        text-align: center;
        line-break: loose;
    }

    #sponsors{
        display: flex;
        flex-wrap: wrap;
    }


    
    #pricing-container{
        display: flex;
        flex-wrap: wrap;
    }

    #all-starts{
        text-align: center;
        display: flex;
        flex-wrap: wrap;
    }

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="shortcut icon" href="https://images2.imgbox.com/a5/2f/URZJk3ro_o.png" type="image/x-icon">
    <script src="https://kit.fontawesome.com/fa9f85711d.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="000web.css">
    <title>Free Web Hosting - Host a Website for Free with Cpanel, PHP</title>
</head>
<body>
    <header>
        <nav id="nav-bar">
            <ul class="nav-list">
                <div id="left-navbar">
                  <img class="img-logo" src="https://svgshare.com/i/YPv.svg" alt="logo">
                  <li><a class="n" href="#"><span class="nn" style="color: rgb(255, 20, 20); font-size: 14px; font-weight: 900; border: none;">SALE</span><br>Cheap Web Hosting</a></li>
                  <li><a class="nav-link" href="#">Website Builder</a></li>
                  <li><a class="nav-link" href="#">Forum</a></li>
               </div>
                <div id="right-navbar">
                    <span class="fas fa-globe"></span>
                    <li><a style="color: rgb(255, 25, 25); border: none;" class="nav-link" href="#">SIGN IN</a></li>
                    <li><a class="nav-link bg-red" href="#">GO PREMIUM</a></li>
                </div>
            </ul>
        </nav>
    </header>
    <main>
        <div id="free-web-hosting">
            <div id="con">
            <h3 class="h33" style="font-size: 45px; color: #2b464c; font-weight: 700;">Free Web Hosting</h3>
            <p style="margin: 30px 0px; line-height: 25px;"><span style="color: rgb(253, 67, 67);">Zero</span>  cost website hosting with PHP,<br> MySQL, cPanel & no ads!</p>
            <button style="color: rgb(255, 255, 255);">GET STARTED</button><br>
            </div>
        </div>
        <div id="sponsors">
            <img class="sponsors-img" src="https://svgshare.com/i/YQe.svg" alt="php logo">
            <img class="sponsors-img" src="https://svgshare.com/i/YQp.svg" alt="cloudflare logo">
            <img class="sponsors-img" src="https://svgshare.com/i/YR0.svg" alt="nginx logo">
            <img class="sponsors-img" src="https://svgshare.com/i/YNt.svg" alt="cloudlinux logo">
            <img class="sponsors-img" src="https://svgshare.com/i/YNu.svg" alt="intel logo">
            <img class="sponsors-img" src="https://svgshare.com/i/YR1.svg" alt="wordpress logo">
            <img class="sponsors-img" src="https://svgshare.com/i/YNM.svg" alt="mysql logo">
        </div>

        <div id="all-starts">
            <h1>It All Starts Here</h1>
            <p>Choose one of the premium plans and enjoy all the greatest features, industry leading performance and top of<br>the class 24/7 live support on the market. Unlimited hardware resources, free domain, SSL & SSH also included!</p>
        </div>

        <div id="pricing-container">
            <div class="pricing pricing1">
                <h4>$000/mo</h4>
                    <li class="fas fa-check">1 Website</li>
                    <li class="fas fa-check">300 MB Disk Space</li>
                    <li class="fas fa-check">Limited Bandwidth (3 GB)</li>
                    <li class="fas fas fa-times">No Email Account</li>
                    <li class="fas fas fa-times">24/7/365</li><br>
                <div class="see-more">
                    <span>See all features</span>
                    <li>FREE SIGN UP</li>
                </div>
            </div>
            <div class="pricing"></div>
            <div class="pricing"></div>
            <div class="pricing"></div>
        </div>
    </main>
</body>
</html>

I completed responsive web design last 3 weeks on freecodecamp, and I have been building pages looking at other websites to improve my portfolio, but this web page I’m building is very difficult, can you please into the code and tell me where I went wrong. I thought that I was overusing the <li> that is why it is behaving this wa

y.
See here
enter image description here

Tags:

2

Answers


  1. 0

    If you use position fixed the next element will be positioned at the previous element’s position. if you want your navbar to be fixed you have to do something like this:

    <div class="relative">
    <div class="navbar fixed">
    </div>
</div>
<div class="relative">
</div>
    Login or Signup to reply.
  2. 0

    Wrap Your list elements in a ul tag and give it a negative z-index styling

    <ul style="z-index: -1000 !important;">
  <li class="fas fa-check">1 Website</li>
  <li class="fas fa-check">300 MB Disk Space</li>
  <li class="fas fa-check">Limited Bandwidth (3 GB)</li>
  <li class="fas fas fa-times">No Email Account</li>
  <li class="fas fas fa-times">24/7/365</li>
</ul><br />

    This Works

    PRO TIP:

    Always make sure to put your <li> </li> elements in an immediate container for better and easy styling

    You could do something like
    <ul><li></li></ul>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search