How do I put this vertical div in the top left corner of the screen?

Asked

Viewed 32 times

3

<html>

<head>
  <title>Impressão de Carnê</title>
  <style>
    .vertical {
      transform: rotate(270deg);
      margin-top: 165px;
      display: inline-block;
      border: 1px solid black;
    }
  </style>
  <script type="text/javascript">
  </script>
</head>

<body>
  <form method="POST">
    <div class='vertical'>
      <table border='1' borderColorLight='#000000' cellpadding='2' cellspacing='0'>
        <tr>
          <td colspan="2">
            <p align="left">
              <font face="Verdana" size="2">Loja:</font>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <p align="left">
              <font face="Verdana" size="2">Cliente:</font>
          </td>
        </tr>
        <tr>
          <td>
            <p align="left">
              <font face="Verdana" size="2">Contrato/OS:<br/>Vencimento:</font>
          </td>
          <td>
            <p align="left">
              <font face="Verdana" size="2">Parcela:<br/>Valor:</font>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <p align="left">
              <font face="Verdana" size="2">Recebido Por:_____________________________<br/><br/>Data:________________ Hora:______________</font>
          </td>
        </tr>
      </table>
    </div>




  </form>
</body>

</html>

html html5

1 answer

3


Use transform-origin to control the rotation point of the table in one of the vertices as I did below, in case I used transform-origin: top left;.

The transform-origen default is center, so you needed to use the margin-top, but now it is unnecessary and I left him commented

.vertical {
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  /* margin-top: 165px; */
  display: inline-block;
  border: 1px solid black;
}
<form method="POST">
  <div class='vertical'>
    <table border='1' borderColorLight='#000000' cellpadding='2' cellspacing='0'>
      <tr>
        <td colspan="2">
          <p align="left">
            <font face="Verdana" size="2">Loja:</font>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <p align="left">
            <font face="Verdana" size="2">Cliente:</font>
        </td>
      </tr>
      <tr>
        <td>
          <p align="left">
            <font face="Verdana" size="2">Contrato/OS:<br/>Vencimento:</font>
        </td>
        <td>
          <p align="left">
            <font face="Verdana" size="2">Parcela:<br/>Valor:</font>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <p align="left">
            <font face="Verdana" size="2">Recebido Por:_____________________________<br/><br/>Data:________________ Hora:______________</font>
        </td>
      </tr>
    </table>
  </div>
</form>

  • 1

    Got it, thank you very much for the explanation.

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.