Как получить изображение в правом верхнем углу моей формы - PullRequest
0 голосов
/ 08 января 2020

Я пытаюсь получить lo go в верхнем правом углу моей формы, но я не могу понять, как установить это в моем css.

Мой HTML:

{% block body %}

<form action="{{ url_for('my_form') }}" method="POST">
    <div class="container">
        <h1>Gasten registratie</h1> 
        <p>Vul dit formulier in om te registreren</p>
        <hr>

        <label for="First-Name"><b>Voornaam</b></label>
        <input type="text" id="First-Name" placeholder="Vul hier uw voornaam in" name="Voornaam" required>

        <label for="Last-Name"><b>Achternaam</b></label>
        <input type="text" id="Last-Name" placeholder="Vul hier uw achternaam in" name="Achternaam" required>


        <label for="Company-name"><b>Bedrijfsnaam</b></label>
        <input type="text" id="Company-name" placeholder="Vul hier uw bedrijfsnaam in" name="Bedrijfsnaam" required>


        <label for="Date"><b>Datum</b></label>
        <input type="date" id="Date" placeholder="Selecteer de Datum" name="Datum" required />
        <hr>


        <p>In het kader van onze ISAE certificering registreren wij uw gegevens.</p>
        <p>Wij verwerken uw gegevens volgends de regels van het AVG.</p>
        <button type="submit" class="registerbtn">Registreren</button>
    </div>


</form>

{% endblock %}

Мой CSS:

h1{text-align: left;}


* {box-sizing: border-box}


/* Add padding to containers */
.container {

    background-image: url("inconto.png");
    background-repeat: no-repeat;
    background-position: top, right;
    background-size: 45px;
    padding: 16px;
    font-family: Calibri, sans-serif;
    max-width: 750px;
    max-height: fit-content;
    width: 100%;
    margin: 0 auto;
    position: relative;


}

.Fist-Name {font-family: Calibri, sans-serif;}

.Last-Name {font-family: Calibri, sans-serif;}

.Company-name {font-family: Calibri, sans-serif;}


/* Full-width input fields */
input[type=text], input[type=date] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}

input[type=text]:focus, input[type=date]:focus {
    background-color: #ddd;
    outline: none;
}

/* Overwrite default styles of hr */
hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}

/* Set a style for the submit/register button */
.registerbtn {
    background-color: #6a0dad;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    font-family: Calibri, sans-serif;
}

.registerbtn:hover {
    opacity:1;
}

Я пытаюсь получить изображение в контейнере в правой верхней части внутри форма на той же высоте, что и первый заголовок «Gasten Registrat ie» в форме. Для наглядной поддержки приложу картинку формы. Если бы кто-то мог мне помочь, это было бы здорово.

enter image description here

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...