-2

I've got three background images that I want to put at the bottom of the page, they are three pieces that fit together. So one has to be put at the bottom left, one at the center and one at the right. But sadly I can't seem to get them into place, I already have content on that page so it's kinda hard for me to put these backgrounds into place. Any advice on how to do this effectively?

HTML

html {
    height: 100%;
    width: 100%;
    background-color: #fdb03c;
}

.cardbox {
    border-radius: 5px;
    padding: 20px;
  @media only screen and (min-width: 480px) {
    .cardbox {
      margin-bottom: 16px; } }
  @media only screen and (min-width: 992px) {
    .cardbox {
      margin-bottom: 24px; } }
   }

    .cardinputs input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
}

    .cardinputs input[type=email] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
}
<html>
    <head>
        <title>
            Formulier
        </title>
        <link rel="stylesheet" href="css/cece.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQU7qWa3PGgsj2p86DkfcxAJoCyiukqnA&v=3.exp&sensor=false&libraries=places"></script>
    </head>
    <body>
        <div>
        <form class="cardinputs" method="post">
            <div class="cardbox">
                <table>
                    <th>
                        Gegevens:
                    </th>
                    <tr>
                        <td>
                            <label for="BTW">BTW Nummer:</label>
                        </td>
                        <td>
                            <input type="text" id="BTW" name="BTWnummer" maxlength="11" required autofocus>
                        </td>
                        <td id="company">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="contactpersoon">Contactpersoon:</label>
                        </td>
                        <td>
                            <input type="text" id="contactpersoon" name="contactpersoon" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="functie">Functie:</label>
                        </td>
                        <td>
                            <input type="text" id="functie" name="functie" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="email">E-mailadres:</label>
                        </td>
                        <td>
                            <input type="email" id="email" name="email" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="telefoonnummer">Telefoonnummer:</label>
                        </td>
                        <td>
                            <input type="text" id="telefoonnummer" name="telefoonnummer" required>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="submit" id="formsubmit" name="submitformulier" disabled></td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
    </body>
    <script src="js/javascript.js?t=<?php time(); ?>"></script>
</html>

Thank you in advance.

Andam
  • 2,087
  • 1
  • 8
  • 21
MrPerry95
  • 29
  • 1
  • 1
  • 8

3 Answers3

0

Try Wrapping them all in an inline div with the following style: display:flex flex-direction: row

<div>
       <imgLeft>
       <imgCenter>
       <imgLast>
</div>

That should do it.

xSkrappy
  • 747
  • 5
  • 17
0

try to use bootstrap grid system, in that way you can put them in a row , and divide that row into 3 columns: Small demo :

 <div class="row">
<div class="col-md-4"> image 1 here </div>
<div class="col-md-4"> image 2 here </div>
<div class="col-md-4"> image 3 here </div>
</div>

In this way, you're giving each image 4 columns off the 12 columns of the page, they would be automatically positioned left - center - right.

Lalati
  • 316
  • 2
  • 14
  • Sadly this put them under eachother, not next to eachother for some reason. Thats why I kinda hate CSS. It seems I can never get whatever I need to get. – MrPerry95 Jan 24 '18 at 08:35
  • Ok, another thing you can try is putting them into a list :
    • image 1
    • image 2
    • image 3
    , it should put the first at left and put the other 2 next to each other, i do that for input fields and then put a little padding, not sure about images yet, give it a try     – Lalati Jan 24 '18 at 09:46
0

First: I would use a container for them, for good practice, and the EXAMPLE:

  <div>
    <Element-with-image>
    <Element-with-image>
    <Element-with-image>
  </div>

Then I would float them all left, or use display: inline-block.

div element-with-image{
  float: left;
}

or

div element-with-image{
  display: inline-block;
  width: 33.33%
}

and then I would give them a percentage of 33.333 each so they spread equally across the page. If you want them to be all the way at the bottom, just make sure that entire HTML block of code is at the very bottom of your page.

I hope that helps

Jahaziel Vazquez
  • 133
  • 2
  • 9