Jump to content

  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

carcleo

Li´s saindo da UL

By carcleo, in CSS

Recommended Posts

carcleo    4

carcleo
Posted

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?

Share this post

Link to post
Share on other sites

coxosclassic    5

coxosclassic
Posted (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 by coxosclassic

Cumps,

cc

Share this post

Link to post
Share on other sites

carcleo    4

carcleo
Posted (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 by carcleo

Share this post

Link to post
Share on other sites

carcleo    4

carcleo
Posted (edited)
3 minutos atrás, carcleo disse:

 

 

Edited by carcleo

Share this post

Link to post
Share on other sites

coxosclassic    5

coxosclassic
Posted

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

Share this post

Link to post
Share on other sites

carcleo    4

carcleo
Posted (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; 

uaSWe.jpg

Edited by carcleo

Share this post

Link to post
Share on other sites

coxosclassic    5

coxosclassic
Posted (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 by coxosclassic

Cumps,

cc

Share this post

Link to post
Share on other sites

carcleo    4

carcleo
Posted (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.

ZoY6i.jpg

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;
    }

v2qqe.jpg

Edited by carcleo

Share this post

Link to post
Share on other sites

carcleo    4

carcleo
Posted

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;
	}

 

Share this post

Link to post
Share on other sites

carcleo    4

carcleo
Posted

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

Share this post

Link to post
Share on other sites

coxosclassic    5

coxosclassic
Posted (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 by coxosclassic

Cumps,

cc

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
Go To Topic Listing CSS
×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept