Li´s saindo da UL

[carcleo 4]

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?

[coxosclassic 5]

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.

Editado 1 de Março por coxosclassic

[carcleo 4]

 

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

Editado 1 de Março por carcleo

[carcleo 4]

3 minutos atrás, carcleo disse:

 

 

Editado 1 de Março por carcleo

[coxosclassic 5]

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,

 

 

[carcleo 4]

É, 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; 

Editado 1 de Março por carcleo

[coxosclassic 5]

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

Editado 1 de Março por coxosclassic

[carcleo 4]

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

Editado 2 de Março por carcleo

[carcleo 4]

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

 

[carcleo 4]

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

[coxosclassic 5]

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,

 

 

 

 

Editado 2 de Março por coxosclassic