CODEWITHSUNDEEP
htmlcss
Somone
Somone

Reputation: 63

Element added to div stuck at top of webpage

Can someone help me figure out how to add my upload image code and text input to the page 1 right below the Header and paragraph. When I add it, it stays stuck at the top of the page. I have the code below and an image of the issue. We are supposed to add on different pieces to this web page design for an assignment and I'm new to html so I'm struggling with how to fix this issue.

An image of the issue.

HTML

<!DOCTYPE html>
 <html lang="en" >
 <head>
 <meta charset="UTF-8">
 <title>The Title</title>
 <meta name="viewport" content="width=device-width">

 <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'>

  <link rel="stylesheet" href="css/style.css">


  </head>

   <body>

  <div class="container">

        <div class="st-container">

            <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
            <a href="#st-panel-1">Page 1</a>
            <input type="radio" name="radio-set" id="st-control-2"/>
            <a href="#st-panel-2">Page 2</a>
            <input type="radio" name="radio-set" id="st-control-3"/>
            <a href="#st-panel-3">Page 3</a>
            <input type="radio" name="radio-set" id="st-control-4"/>
            <a href="#st-panel-4">Page 4</a>
            <input type="radio" name="radio-set" id="st-control-5"/>
            <a href="#st-panel-5">Page 5</a>

        <div class="st-scroll">

                <!-- Placeholder text from http://hipsteripsum.me/ -->

                <section class="st-panel" id="st-panel-1">
                    <div class="st-deco" data-icon="&#xf109;"></div>
                    <h2>P1</h2>
                    <p>here is the paragraph.</p>
                            <p1> Please upload an image/txt.</p>

          <div class = "main_container">
                        <form action="/action_page.php">
                            <input type="file" name="pic" accept="image/*">
                        </form>

                        <input type="text" name="What would you like to create?">
                            <a href="Learn.html" class="button">Let's get started!</a>
                        </center>
            </div>

                </section>

                <section class="st-panel st-color" id="st-panel-2">
                    <div class="st-deco" data-icon="&#xf0eb;"></div>
                    <h2>P2</h2>
                    <p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
                </section>

                <section class="st-panel" id="st-panel-3">
                    <div class="st-deco" data-icon="&#xf044;"></div>
                    <h2>P3</h2>
                    <p>Sint aute occaecat id vice. Post-ironic pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
                </section>

                <section class="st-panel st-color" id="st-panel-4">
                    <div class="st-deco"  data-icon="&#xf07a;"></div>
                    <h2>P4</h2>
                    <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
                </section>

                <section class="st-panel" id="st-panel-5">
                    <div class="st-deco" data-icon="&#xf0ad;"></div>
                    <h2>P5</h2>
                    <p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
                </section>

            </div><!-- // st-scroll -->

        </div><!-- // st-container -->


</div>
</body>

 </html>

CSS

@import url('//fonts.googleapis.com/css?family=Josefin+Slab:400,700');
      body    {
     overflow: hidden;
      }
  /* Main container where upload img and text input is */
      .main_container{
      margin: auto;
      width: 860px;
      padding: 20px;
      border: 1px solid #000000;
      min-height: 400px;
      border-top: none;
      background: #ffffff;
 }
 a {
   text-decoration: none;
   }
 .st-container {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
  }

.st-container > input,
.st-container > a {
  position: fixed;
  bottom: 0px;
  width: 20%;
  cursor: pointer;
  font-size: 16px;
  height: 34px;
  line-height: 34px;
 }

.st-container > input {
opacity: 0;
z-index: 1000;
 }

.st-container > a {
z-index: 10;
font-weight: 700;
background: #e23a6e;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}

/* "Fix" for percentage rounding: add a background bar pseudo element with                     the same color like the labels */
    .st-container:before {
        content: '';
        position: fixed;
        width: 100%;
        height: 34px;
        background: #e23a6e;
        z-index: 9;
        bottom: 0;
        }

     #st-control-1, #st-control-1 + a {
        left: 0;
        }

    #st-control-2, #st-control-2 + a {
        left: 20%;
       }

        #st-control-3, #st-control-3 + a {
        left: 40%;
        }

        #st-control-4, #st-control-4 + a {
        left: 60%;
        }

        #st-control-5, #st-control-5 + a {
        left: 80%;
        }

.st-container > input:checked + a,
.st-container > input:checked:hover + a{
    background: #821134;
}

.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
    bottom: 100%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #821134;
    border-width: 20px;
    left: 50%;
    margin-left: -20px;
}

.st-container > input:hover + a{
background: #AD244F;
}

.st-container > input:hover + a:after {
border-bottom-color: #AD244F;
}

.st-scroll,
.st-panel {
    position: relative;
    width: 100%;
    height: 100%;
}

.st-scroll {
    top: 0;
    left: 0;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;

/* Let's enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}

.st-panel{
    background: #fff;
    overflow: hidden;
} 

#st-control-1:checked ~ .st-scroll {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -o-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
    }

    #st-control-4:checked ~ .st-scroll {
        -webkit-transform: translateY(-300%);
        -moz-transform: translateY(-300%);
        -o-transform: translateY(-300%);
        -ms-transform: translateY(-300%);
        transform: translateY(-300%);
    }
    #st-control-5:checked ~ .st-scroll {
        -webkit-transform: translateY(-400%);
        -moz-transform: translateY(-400%);
        -o-transform: translateY(-400%);
        -ms-transform: translateY(-400%);
        transform: translateY(-400%);
    }


    /* Content elements */

    .st-deco{
        width: 200px;
        height: 200px;
        position: absolute;
        top: 0px;
        left: 50%;
        margin-left: -100px;
        background: #fa96b5;
        -webkit-transform: translateY(-50%) rotate(45deg);
        -moz-transform: translateY(-50%) rotate(45deg);
        -o-transform: translateY(-50%) rotate(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
    }

    [data-icon]:after {
     content: attr(data-icon);
        font-family: 'FontAwesome';
        color: #fff;
        text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
        position: absolute;
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        font-size: 90px;
        top: 50%;
        left: 50%;
        margin: -100px 0 0 -100px;
        -webkit-transform: rotate(-45deg) translateY(25%);
        -moz-transform: rotate(-45deg) translateY(25%);
        -o-transform: rotate(-45deg) translateY(25%);
        -ms-transform: rotate(-45deg) translateY(25%);
        transform: rotate(-45deg) translateY(25%);
    }

    .st-panel h2 {
        color: #e23a6e;
        text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
        position: absolute;
        font-size: 54px;
        font-weight: 900;
        width: 80%;
        left: 10%;
        text-align: center;
        line-height: 50px;
        margin: -70px 0 0 0;
        padding: 0;
        top: 50%;
        -webkit-backface-visibility: hidden;
    }

    #st-control-1:checked ~ .st-scroll #st-panel-1 h2,
    #st-control-2:checked ~ .st-scroll #st-panel-2 h2,
    #st-control-3:checked ~ .st-scroll #st-panel-3 h2,
    #st-control-4:checked ~ .st-scroll #st-panel-4 h2,
    #st-control-5:checked ~ .st-scroll #st-panel-5 h2{
        -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
        -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
        -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
        -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
        animation: moveDown 0.6s ease-in-out 0.2s backwards;
    }
    @-webkit-keyframes moveDown{
        0% { 
            -webkit-transform: translateY(-40px); 
            opacity: 0;
        }
        100% { 
            -webkit-transform: translateY(0px);  
            opacity: 1;
        }
    }

    @-moz-keyframes moveDown{
        0% { 
            -moz-transform: translateY(-40px); 
            opacity: 0;
        }
        100% { 
            -moz-transform: translateY(0px);  
            opacity: 1;
        }
    }

    @-o-keyframes moveDown{
        0% { 
            -o-transform: translateY(-40px); 
            opacity: 0;
        }
        100% { 
            -o-transform: translateY(0px);  
            opacity: 1;
        }
    }

    @-ms-keyframes moveDown{
        0% { 
            -ms-transform: translateY(-40px); 
            opacity: 0;
        }
        100% { 
            -ms-transform: translateY(0px);  
            opacity: 1;
        }
    }

    @keyframes moveDown{
        0% { 
            transform: translateY(-40px); 
            opacity: 0;
           }
        100% { 
            transform: translateY(0px);  
            opacity: 1;
       }
    }

    .st-panel p {
        position: absolute;
        text-align: center;
        font-size: 16px;
        line-height: 22px;
        color: #8b8b8b;
        z-index: 2;
        padding: 0;
        width: 50%;
        left: 25%;
        top: 50%;
        margin: 10px 0 0 0;
        -webkit-backface-visibility: hidden;
    }
    #st-control-1:checked ~ .st-scroll #st-panel-1 p,
    #st-control-2:checked ~ .st-scroll #st-panel-2 p,
    #st-control-3:checked ~ .st-scroll #st-panel-3 p,
    #st-control-4:checked ~ .st-scroll #st-panel-4 p,
    #st-control-5:checked ~ .st-scroll #st-panel-5 p{
        -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
        -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
        -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
        -ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
        animation: moveUp 0.6s ease-in-out 0.2s backwards;
    }

    @-webkit-keyframes moveUp{
        0% { 
            -webkit-transform: translateY(40px); 
            opacity: 0;
        }
        100% { 
            -webkit-transform: translateY(0px);  
            opacity: 1;
        }
    }

    @-moz-keyframes moveUp{
        0% { 
            -moz-transform: translateY(40px); 
            opacity: 0;
}
100% { 
    -moz-transform: translateY(0px);  
    opacity: 1;
        }
    }

    @-o-keyframes moveUp{
        0% { 
            -o-transform: translateY(40px); 
            opacity: 0;
        }
        100% { 
            -o-transform: translateY(0px);  
            opacity: 1;
        }
    }

    @-ms-keyframes moveUp{
        0% { 
            -ms-transform: translateY(40px); 
            opacity: 0;
        }
        100% { 
            -ms-transform: translateY(0px);  
            opacity: 1;
        }
    }

    @keyframes moveUp{
        0% { 
            transform: translateY(40px); 
            opacity: 0;
        }
        100% { 
            transform: translateY(0px);  
            opacity: 1;
        }
    }

    /* Colored sections */

    .st-color,
    .st-deco{
        background: #fa96b5;
    }
    .st-color [data-icon]:after {
        color: #fa96b5;
    }
    .st-color .st-deco {
        background: #fff;
    }
    .st-color h2 {
        color: #fff;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    } 
    .st-color p {
        color: #fff;
        color: rgba(255,255,255,0.8);
    }

    @media screen and (max-width: 520px) {
        .st-panel h2 {
            font-size: 42px;
        }

        .st-panel p {
            width: 90%;
            left: 5%;
            margin-top: 0;
        }
    .st-container > a {
            font-size: 13px;
        }
    }
    @media screen and (max-width: 360px) {
        .st-container > a {
            font-size: 10px;
        }

        .st-deco{
            width: 120px;
            height: 120px;
            margin-left: -60px;
        }

        [data-icon]:after {
            font-size: 60px;
            -webkit-transform: rotate(-45deg) translateY(15%);
            -moz-transform: rotate(-45deg) translateY(15%);
            -o-transform: rotate(-45deg) translateY(15%);
            -ms-transform: rotate(-45deg) translateY(15%);
            transform: rotate(-45deg) translateY(15%);
        }


    }

Upvotes: 0

Views: 2740

Answers (3)

Robert Raboud
Robert Raboud

Reputation: 1174

Answers above are great. A hint to figuring out these things is right click on the element and select "Inspect" then you can see all the values affecting layout and where in the css they are getting set.

Upvotes: 1

Kamran Gill
Kamran Gill

Reputation: 1

it is understandable when you are new, things such as this may be hard to notice. I may be wrong, however, it is because of something called specificity that your code is not behaving the way it is supposed to.

Your "main_container" class is being affected by its parent div element with the class of "st-container" to which you have positioned in the top left corner. If you were to use the css selector for "main_container" and change its position, its specificity would override the "st-container".

Upvotes: 0

OPTIMUS PRIME
OPTIMUS PRIME

Reputation: 1325

Take a look to your HTML, and I've just put your input under new div and added margin to him:

<div style="position: absolute; margin-top: 50%; margin-left: 35%">

And at all it looks like this:

    <p>here is the paragraph.</p>
 <div style="position: absolute; margin-top: 50%; margin-left: 35%">
       <p1> Please upload an image/txt.</p>

          <div class = "main_container">
                        <form action="/action_page.php">
                            <input type="file" name="pic" accept="image/*">
                        </form>

                        <input type="text" name="What would you like to create?">
                            <a href="Learn.html" class="button">Let's get started!</a>

            </div></div>

Upvotes: 1

Related Questions