Prośba o przesunięcie elementu link+button oraz poprawienie blędów.

pytanie zadane 28 sierpnia 2020 w HTML i CSS przez Kubs Mądrala (5,190 p.)

Witajcie,

https://codepen.io/KubsKuba/pen/RwagPdE

chciałbym umieścić link poniżej kwadratu z lewej. I pod linkiem umieścić button. Jak to zrobić?

Pewnie jest w tym kodzie jeszcze kilka błędów, chętnie je poprawie.

1 odpowiedź

odpowiedź 31 sierpnia 2020 przez spamator12 Nałogowiec (28,230 p.)
wybrane 31 sierpnia 2020 przez Kubs

Najlepsza

lapaj.

<!DOCTYPE html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" href="userpanelcss.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>

  <body>
    <div class="twosides">
      <div class="topside">
        <div class="left">
        <div class="leftbox"></div>
        <input type="file" class="leftinsertlink" />
        <button class="leftpreviewbutton">Podgląd na stronie</button>
        <i class="fa fa-chevron-down fa-2x" aria-hidden="true"></i>
        </div>
        <div class="displaybox"></div>
      </div>

      <div class="bottomside"></div>
    </div>
  </body>
</html>

body {
  /* overflow: hidden; */
  width: 1000px;
}

.twosides {
  width: 100%;
  height: 100%;
}

.topside {
  height: 200vh;
}

.left
{float: left;}

.leftbox {
  padding: 100px;
  margin: 20px;
  width: 20%;
  height: 125px;
  background: red;
}

.leftinsertlink {
  position: relative;
  float: left;
  height: 28px;
  width: 230px;
  border: 1px solid black;
}

.leftpreviewbutton {
  float: left;
  height: 28px;
  width: 180px;
  border: 1px solid black;
}

.displaybox {
  float: right;
  padding: 100px;
  margin: 20px;
  width: 20%;
  height: 50vh;
  background: blue;
}

.fa-chevron-down {
  position: absolute;
  bottom: 25px;
  width: auto;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 1px solid black;
}

.bottomside {
  height: 50vh;
  margin: auto;
}