Carlos Rocha 4 Posted March 1, 2019 Report Share Posted March 1, 2019 CÓDIGO: ul.ulVertical { border: .1px rgb(0, 0, 0) solid; list-style: none; width: 800px; height: 100px; } ul.ulVertical li { display: inline-block; width: 100px; height: 30px; text-align: center; border-top: .1px rgb(0, 0, 0) solid; transform: rotate(270deg); transform-origin: top right; } ul.ulVertical li:last-chield { border: none; } HTML: <ul class="ulVertical"> <li>Passo 1</li> <li>Passo 2</li> <li>Passo 3</li> <li>Passo 4</li> <li>Passo 5</li> <li>Passo 6</li> <li>Passo 7</li> <li>Passo 8</li> <li>Passo 9</li> <li>Passo 10</li> <li>Passo 11</li> <li>Passo 12</li> <li>Passo 13</li> </ul> Esse código funciona. Mas devido à largura na horizontal da li ser de 100px, isso leva a um distanciamento entre as li's de tamanho igual ao de sua largura na horizontal. O que eu preciso? Arranjar uma forma de aproximar as li's de uma forma que NÃO haja espaço entre elas quando estiverem na vertical. Note que a dificuldade aí é que se você reduzir o height das li's não resolverá pois a distância na horizontal entre as li´s se dá pelo width de cada li e NÃO pelo seu height. Oque fazer nesse caso SEM usar display: flex? Link to post Share on other sites
coxosclassic 5 Posted March 1, 2019 Report Share Posted March 1, 2019 (edited) Boas, Pelo que consegui entender, o que pretendes é uma ul horizontal com os li na vertical, certo? Se assim for, tenta transformar a ul em vez dos li: ul.ulVertical { border: .1px rgb(0, 0, 0) solid; list-style: none; width: 100px; height: 800px; transform: rotate(270deg); transform-origin: top right; } ul.ulVertical li { display: inline-block; width: 100px; height: 30px; text-align: center; border-top: .1px rgb(0, 0, 0) solid; } ul.ulVertical li:last-child { border: none; } Nota que se trocou o width da ul pela sua height.^^ Podes também alinhar a ul juntando um translate ao transform: ... transform: rotate(270deg) translate(0, -100px); ... Espero que ajude. Cumps. Edited March 1, 2019 by coxosclassic Cumps, cc Link to post Share on other sites
Carlos Rocha 4 Posted March 1, 2019 Author Report Share Posted March 1, 2019 (edited) Seguindo o teu raciocínio, cheguei a isso: <style> ul.ulVertical { border: .1px rgb(0, 0, 0) solid; list-style: none; width: 100px; height: 800px; transform: rotate(270deg); transform-origin: top right; } ul.ulVertical li { display: inline-block; vertical-align: middle; width: 100px; text-align: center; border-bottom: .1px rgb(0, 0, 0) solid; } ul.ulVertical li:last-child { border: none; } </style> HTML <ul class="ulVertical"> <li style='height:100px;'>Passo 1</li> <li style='height:100px;'>Passo 2</li> <li style='height:100px;'>Passo 3</li> <li style='height:050px;'>Passo 4</li> <li style='height:050px;'>Passo 5</li> <li style='height:050px;'>Passo 6</li> <li style='height:050px;'>Passo 7</li> <li style='height:050px;'>Passo 8</li> <li style='height:050px;'>Passo 9</li> <li style='height:050px;'>Passo 10</li> <li style='height:050px;'>Passo 11</li> <li style='height:050px;'>Passo 12</li> <li style='height:050px;'>Passo 13</li> </ul> mas agora tenho outros problemas: A) a primeira e a terceira li's, NÃO podem rotacionar pois seus textos permanecerão na horizontal. B) O border-bottom: das li's NÃO estão preenchendo toda a altura da UL.. C) Os textos devem ficar centralizados entre uma linha (borda) e outra. Isso é tudo que eu preciso, Em tempo.: tentei criar uma classe: .rotate { transform: rotate(270deg); transform-origin: top right; } para colocar apenas nas lis que vão rotacionar mas lembrei que o rotate está na UL Edited March 1, 2019 by carcleo Link to post Share on other sites
Carlos Rocha 4 Posted March 1, 2019 Author Report Share Posted March 1, 2019 (edited) 3 minutos atrás, carcleo disse: Edited March 1, 2019 by carcleo Link to post Share on other sites
coxosclassic 5 Posted March 1, 2019 Report Share Posted March 1, 2019 Ui! Isso já é quase um desafio! hehehehe! Deduzo que estejas entalado com o IE ou qualquer outro browser mais antigo pois não podes usar css3 (flex ou grid). O problema com css para browsers mais antigos é que é sempre preciso "hackar" a coisa ao ponto de criarmos estilos que nunca mais acaba! Se for possível tenta usar css3, caso contrário, tenta simplificar o design ao máximo de forma a que não se torne um pesadelo na implementação. Mas tentando manter a quantidade de estilos controlada, e seguindo a tua solução de usar outra class (.rotate) para items específicos, aqui vai uma sugestão: ul.ulVertical { border: .1px rgb(0, 0, 0) solid; padding: 0; margin: 0; list-style: none; width: 100px; height: 800px; transform: rotate(270deg) translate(0, -100px);; transform-origin: top right; overflow: auto; } ul.ulVertical li { display: inline-block; text-align: center; border-top: .1px rgb(0, 0, 0) solid; width: 100%; padding: 10px 0; } ul.ulVertical li:last-child { border: none; } .rot { display: block !important; transform: rotate(-270deg); border-top: none !important; border-left: .1px rgb(0, 0, 0) solid; height: 80px; line-height: 80px; } Toma nota que houve algumas alterações em todo o estilo para acomodar essa "funcionalidade". Usa a class .rot nos items que não queres rodar. Basicamente irá "contra-rodar" a transformação da ul para cada li específico, por ex: <ul class="ulVertical"> <li>Passo 1</li> <li>Passo 2</li> <li>Passo 3</li> <li>Passo 4</li> <li class="rot">Passo 5</li> <li>Passo 6</li> <li class="rot">Passo 7</li> <li>Passo 8</li> <li>Passo 9</li> <li>Passo 10</li> <li>Passo 11</li> <li>Passo 12</li> <li>Passo 13</li> </ul> Não consigo testar em IE, apenas em Chrome. Mas se tiveres problemas avisa que tento ajudar. cumps, Cumps, cc Link to post Share on other sites
Carlos Rocha 4 Posted March 1, 2019 Author Report Share Posted March 1, 2019 (edited) É, isso está ficando complicado demais. Vamos tentar com flex mesmo. CSS: span.vertical { transform: translate( -50%, -50%) rotate( 270deg); width: 200px; left: 50%; } span.comun { width: 60%; } div.cabecalhoVertical { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; height: 200px; align-items: center; border: .1px rgb( 0, 0, 0) solid; } div.cabecalhoVertical div { position: relative; height: 100%; flex-grow: 1; border-left: .1px rgb( 0, 0, 0) solid; } div.cabecalhoVertical div span { position: relative; display: inline-block; top: 50%; margin-top: -10px; height: 20px; text-align: center; } HTML: <div class='cabecalhoVertical'> <div style='width:100px;'><span class='comum' >Nome do Gcéu</span></div> <div style='width:100px;'><span class='vertical'>Supervisor</span></div> <div style='width:100px;'><span class='comum' >Líder</span></div> <div style='width:050px;'><span class='vertical'>Houve Supervisão</span></div> <div style='width:050px;'><span class='vertical'>Houve dia de Jejum</span></div> <div style='width:050px;'><span class='vertical'>Houve dia de Evangedivsmo</span></div> <div style='width:050px;'><span class='vertical'>Membros Compromissados</span></div> <div style='width:050px;'><span class='vertical'>Visitantes</span></div> <div style='width:050px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div> <div style='width:050px;'><span class='vertical'>Total de presentes</span></div> <div style='width:050px;'><span class='vertical'>Ofertas</span></div> <div style='width:050px;'><span class='vertical'>Disicpulados</span></div> <div style='width:050px;'><span class='vertical'>Número de decisões</span></div> </div> O problema: Veja o que acontece quando tenho 2 linhas nos spans: Quando houver uma quebra de linha preciso centralizar o span todo mas ele não se comporta assim; Edited March 1, 2019 by carcleo Link to post Share on other sites
coxosclassic 5 Posted March 1, 2019 Report Share Posted March 1, 2019 (edited) Para o teu exemplo, sugeria antes usares uma grid em vez de flex para a lista, e usar a propriedade writing-mode em vez de transform para os textos na vertical: .list { display: grid; height: 150px; grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto; justify-items: stretch; align-items: stretch; border: 1px solid black; border-right: none; } .list * { display: flex; align-items: center; justify-content: center; border-right: 1px solid black; padding: 5px; writing-mode: vertical-rl; text-align: center; } .hor { writing-mode: initial; } E o html: <div class="list"> <div class="hor">Nome do Gcéu</div> <div>Supervisor</div> <div class="hor">Líder</div> <div>Houve Supervisão</div> <div>Houve dia de Jejum</div> <div>Houve dia de Evangedivsmo</div> <div>Membros Compromissados</div> <div>Visitantes</div> <div>Crianças de 0 à 12 anos</div> <div>Total de presentes</div> <div>Ofertas</div> <div>Disicpulados</div> <div>Número de decisões</div> </div> Mais info: Propriedade writing-mode grid Edited March 1, 2019 by coxosclassic Cumps, cc Link to post Share on other sites
Carlos Rocha 4 Posted March 2, 2019 Author Report Share Posted March 2, 2019 (edited) Olha, eu vou vendo o teu e indo linha por linha para aprender. Fiz como abaixo. Agora, a única dificuldade que estou tendo é a de centralizar na div os textos. Estou usando positions para usar o top e o left mas mesmo assim não fica coreto. CSS: span.vertical { writing-mode: vertical-lr; transform: rotate(180deg); height: 200px; } span.comum { width: 100%; } div.cabecalhoVertical{ display: flex; flex-direction: row; width: 100%; height: 200px; flex-wrap: nowrap; border: .1px rgb(0,0,0) solid; } div.cabecalhoVertical div { border-right: .1px rgb(0,0,0) solid; height: 100%; flex-grow: 1; } div.cabecalhoVertical div span { display: block; text-align: center; font-weight: bolder; } HTML: <div class='cabecalhoVertical'> <div style='width:100px;'><span class='comum' >Nome do Gcéu </span></div> <div style='width:100px;'><span class='vertical'>Supervisor</span></div> <div style='width:100px;'><span class='comum' >Líder</span></div> <div style='width:050px;'><span class='vertical'>Houve Supervisão?</span></div> <div style='width:050px;'><span class='vertical'>Houve dia de Jejum?</span></div> <div style='width:050px;'><span class='vertical'>Houve dia de Evangedismo?</span></div> <div style='width:050px;'><span class='vertical'>Membros Compromissados</span></div> <div style='width:050px;'><span class='vertical'>Visitantes</span></div> <div style='width:050px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div> <div style='width:050px;'><span class='vertical'>Total de presentes</span></div> <div style='width:050px;'><span class='vertical'>Ofertas</span></div> <div style='width:050px;'><span class='vertical'>Disicpulados</span></div> <div style='width:050px;'><span class='vertical'>Número de decisões</span></div> </div> Ficou correto mas não consegui centralizar o texto na célula em uma das posições. Tentei com o CSS abaixo usando o postion mas não ficou bom, span.vertical { writing-mode: vertical-lr; transform: rotate(180deg); height: 200px; left: 50%; margin-left: -25%; } span.comum { width: 100%; top: 50%; margin-top: -100px; } div.cabecalhoVertical{ display: flex; flex-direction: row; width: 100%; height: 200px; flex-wrap: nowrap; border: .1px rgb(0,0,0) solid; } div.cabecalhoVertical div { position: relative; border-right: .1px rgb(0,0,0) solid; height: 100%; flex-grow: 1; } div.cabecalhoVertical div span { position: absolute; display: block; text-align: center; font-weight: bolder; } Edited March 2, 2019 by carcleo Link to post Share on other sites
Carlos Rocha 4 Posted March 2, 2019 Author Report Share Posted March 2, 2019 Bom, avancei um pouco. Agora é preciso apenas centralizar na vertical os spans da div.normal, tomando cuidado para os casos em que ocorram quebra de linha no texto para não ir só descendo . Antes, in diferente ao número de linhas o span fique todo sempre centralizado. span.vertical { writing-mode: vertical-lr; transform: rotate(180deg) translateX(50%); height: 200px; left: 50%; } span.comum { width: 100%; top: 50%; } div.cabecalhoVertical{ display: flex; flex-direction: row; width: 100%; height: 200px; flex-wrap: nowrap; border: .1px rgb(0,0,0) solid; } div.cabecalhoVertical div { position: relative; border-right: .1px rgb(0,0,0) solid; height: 100%; flex-grow: 1; } div.cabecalhoVertical div span { position: absolute; text-align: center; font-weight: bolder; } Link to post Share on other sites
Carlos Rocha 4 Posted March 2, 2019 Author Report Share Posted March 2, 2019 Consegui: CSS: span.vertical { writing-mode: vertical-lr; transform: rotate(180deg); } span.comum { } div.cabecalhoVertical{ display: flex; height: 200px; border: .1px rgb(0,0,0) solid; } div.cabecalhoVertical div { display: flex; flex-grow: 1; border-right: .1px rgb(0,0,0) solid; align-items: center; justify-content: center; } div.cabecalhoVertical div span { text-align: center; font-weight: bolder; } HTML: <div class='cabecalhoVertical'> <div style='width:215px;'><span class='comum' >Nome do Gcéu </span></div> <div style='width:215px;'><span class='vertical'>Supervisor</span></div> <div style='width:215px;'><span class='comum' >Líder</span></div> <div style='width:035px;'><span class='vertical'>Houve Supervisão?</span></div> <div style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></div> <div style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></div> <div style='width:035px;'><span class='vertical'>Membros Compromissados</span></div> <div style='width:035px;'><span class='vertical'>Visitantes</span></div> <div style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div> <div style='width:035px;'><span class='vertical'>Total de presentes</span></div> <div style='width:035px;'><span class='vertical'>Ofertas</span></div> <div style='width:035px;'><span class='vertical'>Disicpulados</span></div> <div style='width:035px;'><span class='vertical'>Número de decisões</span></div> </div> Agora é tentar com UL Link to post Share on other sites
coxosclassic 5 Posted March 2, 2019 Report Share Posted March 2, 2019 (edited) Boa! À partida não irás ter problemas com uma UL. Terás apenas de corrigir o list-style e talvez o padding e margin. Podes também simplificar o HTML removendo os elementos SPAN e atribuir a classe diretamente nas DIV (ou LI que irás usar). A não ser que necessites mesmo dessas SPAN, podes removê-las pois são redundantes. Mas chegaste a tentar com grid? Acho que para aquilo que pretendes (cabeçalho) uma grid funcionaria melhor e com menos código. E fica também um pouco mais "responsive". A última sugestão que deixei, produz o seguinte resultado. Outra versão mais "responsive" do mesmo estilo (apenas ajustei a largura do browser). Mas se tiveres satisfeito com o resultado, nem ligues muito para não te confundires mais! 😁 cumps, Edited March 2, 2019 by coxosclassic Cumps, cc Link to post Share on other sites
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now