Position stuck

I am a beginner in html and css, after going through the course here I tried to build one blog site but stuck in the position of the my list item not able to fix it , kindly help why this

  • stuck to footer.
    kindly help
    thanks in advance
    site: site
    index.html

    <!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" />
        <title>AbhayK</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
      </head>
      <body>
        <header class="header" role="banner">
          <div class="header_container">
            <div class="banner">
              <h1><span class="abk">Abhay's</span> Blog <span class="about">Friends   Fictions   Fantasies...</span></h1>
            </div>
            <nav class="nav">
              <ul>
                <a href="./about.html" target="_blank"><li>About me</li></a>
                <a href="./recent.html" target="_blank"><li>Recent</li></a>
                <a href="./popular.html" target="_blank"><li>Popular</li></a>
              </ul>
            </nav>
          </div>
        </header>
        <div class="description">
          <ul>
            <li>
              <h2>અમારા વર્ગની વૅલૅન્ટાઈન</h2>
          <p>
            આ ભર્વાન પણ ભારે અવળચ ંડા ! વરસોવરસ કેટલીય પ્રાર્ગનાઓ કરી, વવનવણી કયાગ કરી, આજીજી
            કરી. પણ મારા મનની ઈચ્છાઓ મનમાં જ રહી ર્ઈ. ક્યારેય પ ૂરી ન ર્ઈ. હજારો અને લાખો, અપ ૂણગ
            આશાઓ. મારી માફક ઘણાંબધાંને એવી લાર્ણી ર્તી હશે કે મારી પાસે જ પરમેશ્વર પરરશ્રમ કરાવે છે,
            બાકી બીજા બધાનં ેતો બધ ંઆસાનીર્ી - વર્ર મહેનતે મળી જાય છે. માગ્યા વર્ર મળી જાય છે,
            તદ્દન મફતમાં !
          </p>
          <a href="https://drive.google.com/file/d/1AE5s0s1emUSM6LfnlLPUuj8yUgZwbMDu/view?usp=sharing" target="_blank"><p>read more..</p>
          </a>
          </li>
          <li>
            <h2>અમારા વર્ગની વૅલૅન્ટાઈન</h2>
            <p>
              આ ભર્વાન પણ ભારે અવળચ ંડા ! વરસોવરસ કેટલીય પ્રાર્ગનાઓ કરી, વવનવણી કયાગ કરી, આજીજી
              કરી. પણ મારા મનની ઈચ્છાઓ મનમાં જ રહી ર્ઈ. ક્યારેય પ ૂરી ન ર્ઈ. હજારો અને લાખો, અપ ૂણગ
              આશાઓ. મારી માફક ઘણાંબધાંને એવી લાર્ણી ર્તી હશે કે મારી પાસે જ પરમેશ્વર પરરશ્રમ કરાવે છે,
              બાકી બીજા બધાનં ેતો બધ ંઆસાનીર્ી - વર્ર મહેનતે મળી જાય છે. માગ્યા વર્ર મળી જાય છે,
              તદ્દન મફતમાં !
            </p>
            <a href="https://drive.google.com/file/d/1AE5s0s1emUSM6LfnlLPUuj8yUgZwbMDu/view?usp=sharing" target="_blank"><p>read more..</p>
            </a>
    
          </li>
        </div>
        <footer>
          <div class="container">
            <p>&copy; abhaykavishvar 2021</p>
          </div>
        </footer>
      </body>
    </html>
    
    

    css

    header {
      width: 100%;
      height: 100%;
    }
    body {
      font-size: 16px;
      background-image: url(./image/catal.jpg);
      background-position: centre;
      image-resolution: 300dpi;
      background-size: cover;
      background-repeat: no-repeat;
      width: 10%;
    
    }
    .banner {
      margin: 20px 0;
      position: fixed;
      top: 20px;
      left: 60%;
      right: 50px;
      color: rgb(69, 65, 73);
      font-family: "Helvetica Neue Custom", "Helvetica Neue", Helvetica, Arial,
        sans-serif;
      font-size: 100%;
      display: inline block;
      height: 100px;
      width: 500px;
      padding: auto;
      text-align: left;
    }
    .abk {
      font-size: 90%;
      color: tomato;
    }
    .about {
      font-family: cursive;
      font-size: medium;
      font-style: italic;
      color: oldlace;
    }
    nav {
      margin-left: auto;
      margin-top: 10%;
      margin-right: 5%;
      padding: 10px 0;
      border: 2px solid;
      width: 100%;
      position: fixed;
      background-color: cornflowerblue;
    }
    nav li {
      color: wheat;
      font-family: "Raleway", sans-serif;
      font-weight: 600;
      font-size: 20px;
      width: 30%;
      display: inline-block;
      padding: 0.75rem 1.25rem;
    }
    .description {
      max-width: 100%;
      height: 100%;
      margin: 0 12rem;
      position: fixed;
      top: 50%;
      bottom: 20%;
      width: auto;
      z-index: 2;
      background-color: brown;
      padding: 1rem 6rem;
    }
    .second_desc {
      max-width: 960px;
      margin: 0 12rem;
      position: fixed;
      top: 50%;
      bottom: 20%;
      width: auto;
      z-index: 2;
      background-color: brown;
      padding: 1rem 6rem;
    }
    
    footer {
      background-color: #333;
      color: #fff;
      padding: 30px 0;
      position: fixed;
      width: 100%;
      z-index: 5;
      bottom: 0;
    }
    footer p {
      font-family: "Raleway", sans-serif;
      text-transform: uppercase;
      font-size: 11px;
    }
    .container {
      max-width: 940px;
      margin: 0 auto;
      padding: 0 10px;
      text-align: center;
    }
    @media only screen and (max-width: 480px) {
      #image_container {
        width: 270px;
      }
    }
    @media only screen and (min-width: 320px) and (max-width: 480px) {
      #image_container {
        width: 95%;
      }
    }
    /* @media only screen and (max-resolution:150dpi) and (max-width:480px){
            .page-description{
              font-size:20px;
            }
          } */
    
    

    site abk site

  • Hi @mega5255895484
    Open the devtools in your browser and have a look at the css. There are a couple of styles, especially in the <body> tag which are crossed out, because they are not set /written correctly. See the reference for that.
    Your main problem is that you set the child element of the body with all your content div class='description'> to position: fixed. There is nothing to scroll then.
    Why are you setting the width of your body tag to 10%?

    thank you ,but still I am confuse I have to retake my class
    :smiley:
    thanks!

    You’re welcome. But I don’t understand what you mean by ‘retake my class’. What’s the issue you’re at?


    everything messed up I think i didnt get the box concept that is what i meant

    First of all you have to remove all the position: fixed; on any of the items you set it to. Then you can start again. I guess you want a sticky header? Then you could set that to position: fixed; later, but try to make everything look okay first.

    yes you are right and that is troubling,
    ok let’s see !
    thank you!

    Good luck with that. Position: absolute; and position: fixed; should to be used as little as possible. Everything you can achieve with flexboxes or relative positioned elements should be done that way in order to avoid nasty things like cut off content.

    1 Like

    site
    thanks a lot now its perfectly working!
    now I need to work of @media only screen :laughing:
    great!
    will you kindly check codes are clean?
    thanks once again!

    Ah, congratulations, looking much better now!
    Still, putting position: fixed; on many single element like the links isn’t a good pactice. That makes responsive design extremely und unnecessarily tedious. Also that causes weird bahaviour of your body, which doesn’t begin at the top of the browser now. Try to style everything inside the header with flex-boxes and just set the header to position: fixed;