CODEWITHSUNDEEP
htmlcss
NNN
NNN

Reputation: 87

CSS positioning. Moving header higher

enter image description hereHere is my HTML and CSS file: I am trying to figure out how to move all my headers including the form and button towards more to the middle of the page. Right now they're all at the bottom. I have posted it on codepen (https://codepen.io/tuhmatyow/pen/xLjEqv) but it looks weird because I am using material.io. Here is the screenshot of how it actually looks. 

<title="Action Auctions"></title>
<body>
<center>
    <h1 class="title">Action Auctions</h1>
    <div class="triangle1"></div>
    <div class="triangle2"></div>
    <h1 class="congratulations">Congrats! You won!</h1>
    <h1 class="but">BUT...</h1>

    <h2 class="donateEarnings">You can still donate your earnings!</h2>
    <form action="/winner/" method="POST">
        {% csrf_token %}
        {{ donate_form }}
        <!-- <input type="submit" value="DONATE!"> -->
        <button button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Donate</button>
    </form>
    <br><br>
    <h3 class="transfer">...or have them transferred to your card</h3>
    <form action="/winner/" method="POST">
        {% csrf_token %}
        {{ reimburse_form }}
        <!-- <input type="submit" value="Receive Earnings"> -->
        <button button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Receive Earnings</button>
    </form>

    <nav class="fixed-nav-bar-bottom">
        <h3 class="copyright">Copyright 2017 ©</h3>
    </nav>
</center>
</body>

 body {
      background-color: #1F2831;
      position: fixed;
    }

    .title {
      color: #FFFFFF;
        font-family: 'Raleway', sans-serif;
        border-bottom: 1px solid;
        padding-top: 30px;
        width: 10em;
        /*overflow: hidden;*/
        letter-spacing: .15em;
        /*text-align: center;*/
        /*white-space: nowrap;*/
        /*margin: 0 auto;*/
    }

    .triangle1 {
        width: 0;
        /*height: 0;*/
        top: -80px;
        right: 145px;
        border-style: solid;
        border-width: 100px 50px 0 50px;
        border-color: #8aa0b8 transparent transparent transparent;
        position: relative;
        z-index: -1;
    }

    .triangle2 {
        width: 0;
        /*height: 0;*/
        top: -150px;
        left: 130px;
        border-style: solid;
        border-width: 50px 0 50px 100px;
        border-color: transparent transparent transparent #f59d3f;
        position: relative;
        z-index: -1;
    }

    .congratulations {
      color: #FFFFFF;
        font-family: 'Raleway', sans-serif;
      font-size: 30px;
        margin: auto;
    }

    .but {
      color: #FFFFFF;
        font-family: 'Raleway', sans-serif;
      font-size: 30px;
        margin: auto;
    }

    .form-control {
        height: 30px;
        padding-left: 10px;
        margin: auto;
        background-color: #1F2831;
        color: #FFFFFF;
        font-family: 'Raleway', sans-serif;
    }

    .donateEarnings {
      color: #FFFFFF;
        font-family: 'Raleway', sans-serif;
      font-size: 30px;
        margin: auto;
    }

    .transfer {
      color: #FFFFFF;
        font-family: 'Raleway', sans-serif;
      font-size: 30px;
        margin: 0 auto;
    }

    .copyright {
        color: #FFFFFF;
        font-size: 10px;
        font-family: 'Raleway', sans-serif;
    }

    .fixed-nav-bar-bottom {
        /*top: 0;*/
        /*left: 0;*/
        bottom: 0;
        height: 10%;
        width: 100%;
        z-index: -1;
        position: fixed;
        background-color: #39678E;
    }

Upvotes: 3

Views: 4149

Answers (1)

Emo333
Emo333

Reputation: 136

your triangle classes are set to "display:relative" which means they are stacking... You corrected for that by giving negative values to each triangle's "top" positions. This basically made the body element stretch for each triangle and for each you simply positioned each triangle vertically out and above the element container they were within.

Make each triangle's class "position:fixed" and adjust your top/left/right to put your triangles where you want.

Maybe something like this:

.triangle1 {
    width: 0;
    /*height: 0;*/
    top: 25px;
    left: 90px;
    border-style: solid;
    border-width: 100px 50px 0 50px;
    border-color: #8aa0b8 transparent transparent transparent;
    position: absolute;
    z-index: -1;
}

.triangle2 {
    width: 0;
    /*height: 0;*/
    top: 50px;
    left: 130px;
    border-style: solid;
    border-width: 50px 0 50px 100px;
    border-color: transparent transparent transparent #f59d3f;
    position: absolute;
    z-index: -1;
}

.center{
    position:relative;
    display: block;
}

And add class "center" to your center element:

<center class="center">

This is where @i-haz-kode was going in his/her comment above.

Upvotes: 1

Related Questions