Jump to content
fasouza777

Usando texto na vertical

Recommended Posts

Olá pessoal, preciso de ajuda.. Estou montando um relatório o qual preciso usar alguns campos com textos na vertical, pesquisando achei essa solução:

.text-vertical {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
Porém, usando assim ele vira para a vertical só que usando o espaço como se a palavra estivesse na horizontal, só que preciso que ele ocupe a vertical.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By SrDanielMarques
      Olá pessoal, tudo bem?
       
      Eu possuo um sistema de teatro que mostra todo o mapa do teatro para a compra de ingressos. Porém o sistema não está 100% responsivo para celulares, ele faz a quebra (bagunça) de todo o mapa, vou estar anexando as fotos,, a primeira, que mostra a visão geral do teatro é via Desktop, está tudo ok. O problema é a versão Mobile que faz a quebra do mapa, gostaria de saber como posso solucionar este problema, gostaria de jogar o mapa para o "fundo" da tela, para que seja possível visualizar o mapa total mesmo em celulares.
       
      Alguém poderia me dar um força como solucionar?


    • By Blasius
      Olá pessoal.
       
      Estou treinando códigos em js e quero fazer uma calculadora;  a ideia é a seguinte: 
       
      o usuário coloca os números no input, e escolhe qual operação ele quer em um select.
      Porém o js sempre me retorna o valor 0, ja revisei o código muitas vezes e não encontro o erro.
       
       ---------------------------------- HTML---------------------------------------------------
       
      <body>
          <h1> Calculadora </h1> 
       
          <p> Digite um número: <input type="number" id="valor1" name="nValor1"> </p>
          
              <select id="operador">
                      <option value="vezes" id="multiplicacao">  vezes * </option>
              </select>
       
          <p>Digite um número: <input type="number" id="valor2" name="nValor2"> </p>
          <input type="submit" value="calcular" onclick="calcular()">    // obs** com o type="button" também não funcionou

          <div id="divRes"> Aqui vai o resultado! </div>   
       
      <script src="calculadora.js">
          
      </script>
      </body>
       
      -----------------------------------------------------------------  JAVASCRIPT  ------------------------------------------------------------------
       
      let v1 = document.getElementById('valor1');
      let valor1 = Number(v1.value)
       
      let v2  = document.getElementById('valor2');
      let valor2 = Number(v2.value)
       
      let operador = document.getElementById('operador').selectedIndex;
      let divRes = document.getElementById('divRes')
       
       
      function calcular(){
          let resultado = " "

          if (document.getElementById("multiplicacao").selected = true ) {
              
              resultado = (valor1 * valor2) 
              divRes.innerHTML= `${resultado}`
              console.log(typeof valor1, typeof valor2, typeof resultado) // todos retornam number
        
         } else {
              alert ('teste')
          }
      }
       
    • By LucasRochaPL
      Olá a todos, estou construindo um pequeno site para a empresa que eu trabalho atualmente, porém como ainda sou iniciante estou tendo algumas dificuldades, e uma delas é que eu não consigo colocar as divs lado a lado, tentei varias coisas como usar o inline e float, mas fica tudo bem bagunçado, se vocês puderem por favor dar alguma dica ou me dizer oque estou fazendo de errado.
      <style> * {box-sizing: border-box;}   .container {   position: relative;   width: 50%;   max-width: 300px; }   .image {   display: block;   width: 100%;   height: auto; }   .overlay {   position: absolute;    bottom: 0;    background: rgb(0, 0, 0);   background: rgba(0, 0, 0, 0.5); /* Black see-through */   color: #f1f1f1;    width: 100%;   transition: .5s ease;   opacity:0;   color: white;   font-size: 20px;   padding: 20px;   text-align: center; }   .container:hover .overlay {   opacity: 1; } .container::after {   content: "";   clear: both;   display: table; } </style>   <div class="titulo">Produtos</div> <p>A Gap conta com uma grande variedade de      rádios e equipamentos, para atender melhor      a necessidade de nossos clientes, trabalhamos com rádios moveis,      portáteis e equipamentos para videomonitoramento. </p>   <div class="titulo">Portáteis</div> <div class="container">     <img src="products/images/dep450.jpg" alt="rádio motorola DEP450" class="image">     <div class="overlay">Motorola DEP450</div> </div> <div class="container">     <img src="products/images/ep450.jpg" alt="rádio motorola EP450" class="image">     <div class="overlay">Motorola EP450</div> </div> <div class="container">     <img src="products/images/dgp8050.jpg" alt="rádio motorola DGP8050" class="image">     <div class="overlay">Motorola DGP8050</div> </div>   <div class="titulo">Móveis</div>   <div class="container">     <img src="products/images/dem300.jpg" alt="rádio motorola DGM5000" class="image">     <div class="overlay">Motorola DEM300</div> </div>   <div class="titulo">Videomonitoramento</div>   <div class="container">     <img src="products/images/intelbrass3330.jpg" alt="camera " class="image">     <div class="overlay">Câmera Intelbras S3330</div> </div>   
    • By ThosuZ
      Olá, pessoal! Estou tentando criar um menu que, quando rola o scroll, ele muda (diminui o height e adiciona um background). Porém, aparentemente, nenhum código js tá funcionando... já tentei bastante coisa. Um dos tutoriais que usei: https://www.anicasagrande.com.br/menu-fixo-no-topo-que-muda-cor-com-rolagem/
       
      Como fiz:
       
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> (function () { var menu = document.getElementById('menuone'); // colocar em cache window.addEventListener('scroll', function () { if (window.scrollY > 50) menu.classList.add('menutwo'); // > 0 ou outro valor desejado else menu.classList.remove('menutwo'); }); })(); </script> <div class="menuone"> <nav class="menufixo"> <div class="menucenter"> <ul class="menu"> <li class="logomenu"><img class="iconmenu" src="images/logotipo-amarelo.png" width="105px" height="100%"/></li> <li class="menulinks"><a class="botoesmenu" href="#">Home</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Serviços</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Portfólio</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Quem somos</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Contato</a></li> </ul> </div> </nav> </div> <div class="menutwo"> <nav class="menususpenso"> <div class="menucentertwo"> <ul class="menut"> <li class="logomenut"><img class="iconmenut" src="images/Isotipo-amarelo.png" width="38px" height="100%"/></li> <li class="menulinkst"><a class="botoesmenut" href="#">Home</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Serviços</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Portfólio</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Quem somos</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Contato</a></li> </ul> </div> </nav> </div> /* Menu settings before scrolling */ .menuone { display: block; } .menufixo { padding: 1px; margin: 10px -8px -8px -8px; position: fixed; top: 5; left: 2; width: 100%; } .menucenter { width: 1200px; margin: 0 auto; } .menu { text-transform: uppercase; list-style: none; } .logomenu { margin-right: 500px; display: inline-block; } .iconmenu { margin: -15px; } .botoesmenu { color: #f7c620; font-family: 'Bahnschrift Light', sans-serif; text-decoration: none; transition: color 1s; padding: 10px; } .botoesmenu:hover { color: #fff; } .menulinks { color: #fff; display: inline-block; margin: 8px; } /* Menu settings after scrolling */ .menutwo { display: block; } .menususpenso { padding: 1px; margin: 0px -8px; position: fixed; top: 5; left: 2; width: 100%; background: #8c05bd; } .menucentertwo { width: 1200px; margin: 0 auto; } .menut { text-transform: uppercase; list-style: none; } .logomenut { margin-right: 500px; display: inline-block; } .iconmenut { margin: -13px; } .botoesmenut { color: #f7c620; font-family: 'Bahnschrift Light', sans-serif; text-decoration: none; transition: color 1s; padding: 10px; } .botoesmenut:hover { color: #fff; } .menulinkst { color: #fff; display: inline-block; margin: 0 8px; } Perdão pelos códigos grandes.
      Gostaria muito de uma orientação pra conseguir fazer, mas queria muito manter a atual estilização do menu.
    • By henriquers
      Bom Dia a todos,
       
      Estou com um problema implementei o Plugin do Bootstrap DatePicker mas estou tendo problema para ajustar o tamanho, ele esta saindo da borda dele.

       
      Ele esta com esse problema, alguem sabe o que posso fazer para arrumar. 
      script -> 
       
      $('.datepicker').datepicker({     startDate: '-10y',     format: "dd/mm/yyyy",     todayBtn: "linked",     forceParse: false,     autoclose: true,     todayHighlight: true,     language: 'pt-BR',   });
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.