Элементы меняют положение, когда разрешение становится больше - PullRequest
Новая
       12

Элементы меняют положение, когда разрешение становится больше

0 голосов
/ 24 марта 2020

Мне нужно сделать свою форму отзывчивой, чтобы все поля / метки / столбцы оставались в точном положении при увеличении разрешения.

Это на экране моего ноутбука: Меньший экран И это на экране моего компьютера (большой экран) Большой экран

Я уже давно занят этой задачей. Я посмотрел на Google, но я ничего не нашел. Я надеюсь, что вы, ребята, можете мне помочь!

HTML

<head>
<title>Boekenlijst.html</title>
<link rel="stylesheet"
type="text/css"
href="Inzendopgave3.css"/>
</head>
<body>
<main>
 <form action="http://jkorpela.fi/cgi-bin/echo.cgi" method="get" id="verzamel">
<div class="container">
 <div class="col1">
  <h3>Bestel hier uw boeken</h3>
  <div class="Square">1</div><p><label for="Napolean">Napolean Hill - Think and grow rich</label></p>
  <div class="Square">2</div><p><label for="Paulo">Paulo Coelho - De Alchemist</label></p>
  <div class="Square">3</div><p><label for="David">David Goggins - Cant hurt me</label></p>
  <div class="Square">4</div><p><label for="Timothy">Timothy Ferriss - The 4 hour workweek</label></p>
  <div class="Square">5</div><p><label for="Magic">Elizabeth Gilbert - Big Magic</label></p>
   </div>
 <div class="col2">
  <br><div class="aanpas" ><label><input name="Napolean Hill - Think and grow rich" id="Napolean" type="number" form="verzamel" min="0" max="10"></label><small>&nbsp;&nbsp;&nbsp;Max 10 exemplaren</small></div>
  <br><div class="aanpas1" ><label><input name="Paulo Coelho - De Alchemist" form="verzamel" id="Paulo" pattern="[0-9]?[0-9]" size="11"></label><small>&nbsp;&nbsp;&nbsp;Max 99 exemplaren</small></div>
  <br><div class="aanpas2" ><label><input name="David Goggins - Cant hurt me" id="David" form="verzamel" type="range" min="0" max="15" step="5" class="slider"></label><small>&nbsp;&nbsp;&nbsp;Bestel 0, 5, 10 of 15 exemplaren</small>
    <div class="ticks">
<span class="sliderticks1"><small>0</small></span>
<span class="sliderticks2"><small>5</small></span>
<span class="sliderticks3"><small>10</small></span>
<span class="sliderticks4"><small>15</small></span></div></div>
  <br><div class="aanpas">
    1<input type="radio" name="Timothy Ferriss - The 4 hour workweek" value="1" form="verzamel">
    10<input type="radio" name="Timothy Ferriss - The 4 hour workweek" value="10" form="verzamel">
    20<input type="radio" name="Timothy Ferriss - The 4 hour workweek" value="20" id="Timothy" form="verzamel"></div>
 <br><div class="aanpas"><label>
   <select class="stijl" id="Magic" form="verzamel" name="Elizabeth Gilbert - Big Magic">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
</label>
 </div>
</div>
</div>
</form>
<div class="button">
 <input form="verzamel" type="submit" formaction="http://jkorpela.fi/cgi-bin/echo.cgi">
</div>
<div class="container">
  <div class="col3">
<h3>Geef hier uw adres gegevens op</h3>
 <div class="Velden"><label for="Naam"><br>Naam:</label> </div>
 <div class="Velden"><label for="Adres"><br>Adres:</label> </div>
 <div class="Velden"><label for="Postcode"><br>Postcode:</label> </div>
 <div class="Velden"><label for="Woonplaats"><br>Woonplaats:</label> </div>
 <div class="Velden"><label for="Email"><br>Email:</label> </div>
 <div class="Velden"><label for="Leverdatum"><br>Gewenste leverdatum:</label> </div>
 <div class="Velden"><br>Bestand </div>
</div>
<div class="col4">
 <br><input id="Naam" name="Naam" type="text" form="verzamel" required><small>&nbsp;&nbsp;&nbsp;(Verplicht)</small>
<br><input id="Adres" name="Adres" type="text" form="verzamel" required><small>&nbsp;&nbsp;&nbsp;(Verplicht)</small>
 <br><input id="Postcode" name="Postcode" type="text" placeholder="1234 AB" pattern="^[0-9]{4}\s[A-Z]{2}$" form="verzamel" required><small> &nbsp;&nbsp;(Verplicht)</small>
<br> <input id="Woonplaats" name="Woonplaats" type="text" form="verzamel">
<br> <input id="Email" name="Email" type="text" form="verzamel">
 <br><input id="Leverdatum" name="Leverdatum" type="text" required placeholder="dd-mm-jjjj" form="verzamel">
<br> <input id="File" name="Bestand" type="File" form="verzamel">
</div>
</div>
</main>
</body>

CSS

body {
background-color: lightblue;

}
/* min-height: 200px;
   width: 100vw; */
.container {
border: none;
}
.Square {
float: left;
background-color: black;
text-align: center;
color: white;
width: 17px;
height: 20px;
margin: 5px;
margin-top: -1%;
Position:relative;
}
.col1 {
box-sizing:border-box;
Display: inline-block;
padding: 0 10px;
text-align: left;
width: 35%;
height: auto;/*standaardwaarde*/
max-width: 700px;
max-height: 140000px;
resize: both;
overflow: hidden;
font-size: 15px;
}
.col2{
box-sizing:border-box;
Display: inline-block;
padding: 0 10px;
margin-top: -31%;
width: 56vh;
height: auto;/*standaardwaarde*/
max-width: 900vw;
max-height: 1500vw;
resize: both;
overflow: hidden;
}

.aanpas {
position:relative;
margin-top: -2%;
}
.aanpas1 {
position:relative;
margin-top: -1.5%;
width: 95vh;
margin-left: -0.5%;
}
.aanpas2 {
position:relative;
margin-top: -2%;
}
input[type=submit] {
background-color: #4CAF50; /* Green */
border:none;
color: white;
text-align: center;
padding: 2vh 7vh;  position:absolute;
float:right;
font-size: 25px;
left: 65vw;
top: 26vh;

max-height: 150000vw;
height: auto;/*standaardwaarde*/
}
input[type=number] {
width: 78px;
margin-bottom: -0.5%;
margin-left:0.05%;
}

input[type=range] {
width: 85px;
margin-top: -1%;
margin-left:0.05%;
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 90%;
  height: 10px;
  background: white;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 16px;
  background: black;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 28px;
  background: black;
  cursor: pointer;
}

.ticks {
  display: flex;
  padding: 0 10px;
  font-size: 10px;
}

.sliderticks {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 1px;
  background: black;
  height: 7px;
  line-height: 20px;
  margin: 0 0 1px 0;
  margin-top: 2%;
}
.sliderticks1 {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 1px;
  background: black;
  height: 5px;
  line-height: 20px;
  margin: 0 0 1px 0;
  margin-left: -8px;
}
.sliderticks2 {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 1px;
  background: black;
  height: 5px;
  line-height: 20px;
  margin: 0 0 1px 0;
  margin-left: 27px;
}
.sliderticks3 {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 1px;
  background: black;
  height: 5px;
  line-height: 20px;
  margin: 0 0 1px 0;
  margin-left:25px;
}
.sliderticks4 {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 1px;
  background: black;
  height: 5px;
  line-height: 20px;
  margin: 0 0 1px 0;
  margin-left: 26px;
}
input[type=radio] {
width: 23px;
margin-bottom: 1.5%;
}
select[class=stijl] {
width: 86px
}
.col3{
  box-sizing:border-box;
  Display: inline-block;
  padding: 0 10px;
  text-align: left;
  width: 35%;
  height: auto;/*standaardwaarde*/
  max-width: 700px;
  max-height: 140000px;
  resize: both;
  overflow: hidden;
  font-size: 15px;

  }
  .col4{
    box-sizing:border-box;
    Display: inline-block;
    padding: 0 10px;
    width: 35%;
    height: auto;/*standaardwaarde*/
    max-width: 700px;
    max-height: 140000px;
    resize: both;
    overflow: hidden;
    margin-left: -15vw;
    position: absolute;
    }
    #Naam{
      margin-top: 7.7vh;
      margin-left: -1vh;
}
#Adres{
  margin-top: 1.9vh;
        margin-left: -1vh;
        }
#Postcode{
  margin-top: 2vh;
        margin-left: -1vh;
}
#Woonplaats{
  margin-top: 1.7vh;
        margin-left: -1vh;
}
#Email{
  margin-top: 2vh;
        margin-left: -1vh;
}
#Leverdatum{
  margin-top: 2.2vh;
        margin-left: -1vh;
}
#File{
  margin-top: 2vh;
        margin-left: -1vh;
}

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

...