Jump to content
Carcleo

Dificuldades com FlexBox e UL

Recommended Posts

Pessoal, estou com uma dúvida que está me tirando o sono!

 

Então, vou exibir 2 situações com Flexbox onde 1 delas está dando uma falha. (Será mesmo?).

 

Nessa versão, com DIV's, tudo funciona bem:


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;
        list-style: none;
        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>    

Resultado:

a.thumb.jpg.554479fd09a212a9035997cbf50e3bb6.jpg

 

Agora com UL -> A falha:

 

CSS:

    span.vertical {
        writing-mode: vertical-lr;
        transform: rotate(180deg);
    }
    span.comum {        
        
    }
    ul.cabecalhoVertical{
        display: flex;
        height: 200px;
        border: .1px rgb(0,0,0) solid;
        
    }
    ul.cabecalhoVertical li {
        display: flex;
        flex-grow: 1;
        list-style: none;
        border-right: .1px rgb(0,0,0) solid;
        align-items: center;
        justify-content: center;
    }
    ul.cabecalhoVertical li span {
        text-align: center;
        font-weight: bolder;
    }


HTML:

<ul class='cabecalhoVertical'>
    <li style='width:215px;'><span class='comum'   >Nome do Gcéu </span></li>
    <li style='width:215px;'><span class='vertical'>Supervisor</span></li>
    <li style='width:215px;'><span class='comum'   >Líder</span></li>
    <li style='width:035px;'><span class='vertical'>Houve Supervisão?</span></li>
    <li style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></li>
    <li style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></li>
    <li style='width:035px;'><span class='vertical'>Membros Compromissados</span></li>
    <li style='width:035px;'><span class='vertical'>Visitantes</span></li>
    <li style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></li>
    <li style='width:035px;'><span class='vertical'>Total de presentes</span></li>
    <li style='width:035px;'><span class='vertical'>Ofertas</span></li>                    
    <li style='width:035px;'><span class='vertical'>Disicpulados</span></li>                    
    <li style='width:035px;'><span class='vertical'>Número de decisões</span></li>            
</ul>    

Percebam agora na print como aparece um bloco adicional no lado esquerdo antes da primeira LI

b.png

 

Gostaria de saber 2 coisas:

 

1) Porquê isso acontece uma vez que list-style está setado para none nas LI's?

2) Como corrigir essa falha?

 

Obrigado a quem puder ajudar.

Share this post


Link to post
Share on other sites

Fala irmão, beleza?

 

1) Isso acontece porque as UL por padrão vem com essas propriedade aqui.  

 

    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;

Perceba a última propriedade: padding-inline-start: 40px;

É justamente ela que está dando esse espaçozinho dos inferno rsrs...

1.1) obs: Se quiser, crie uma ul qualquer e inspecione ela que você verá essas props padrões delas.

 

2) Para resolver isso diretamente, você pode tirar o padding dessa ul: 

ul.cabecalhoVertical{
  padding: 0;
  display: flex;
  height: 200px;
  border: .1px rgb(0,0,0) solid;        
}

Ou posso te passar uma prática minha, que eu gosto de fazer, que é resetar todos os paddings e margins de todos os elementos, e só adiciono padding e margin quando eu necessito,

Então fazendo o reset = 

* {
  margin: 0;
  padding: 0;
}

2.1) O * faz referências a todos os elementos do seu HTML, assim aplica o estilo que esta la dentro para todos os elementos.

 

Valeu irmão, abraços! Bons estudos

Share this post


Link to post
Share on other sites

Cara, muiito top. Ops,  muito jóia.

 

Obrigado!

 

Essa prética, eu tamém uso. Mas estava fazendo esse texte em um arquivb seprsdo e nele e não coloquei o resset

* {
  margin: 0;
  padding: 0;
}

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 Kaio Kdesigner
      Oi Pessoal!
       
      Estou editando um tema, e ai as imagens dos thumbsnails estão ficando distorcidas.
       
      Cada categoria tem um tamanho diferente de imagem, mas ai elas ficam destorcidas dentro do tamanho (meio confuso né?)
       
      ta ficando assim: https://screenshot.net/gxvqc9y
       
      Como que faço para colocar a imagem dentro do tamanho, ex: 150x150, sem q ela fique distorcida??
    • By renan mafra
      Olá pessoal,

      Eu tenho uma página .html e um DIV principal que chamei de conteiner eu tenho mais outras DIVS dentro dessa DIV principal,
      eu gostaria que na medida que as DIVs internas fossem preenchidas a div principal container se expandisse automaticamente
      na vertical.
      Eu quero fazer aquele esquema em que ao clicar em um dos 5 links  ele se abra (se expanda) o código base já tenho mas não sei
      como a div que engloba tudo "cresça" para baixo na medida que for sendo clicado e abrindo as outras DIVS, estou no desenvolvimento
      ainda mais quando boto height: auto; a div container se contrai em vez de acompanhar o resto, como faço isso no CSS ?
       
      Segue o esqueleto do código:
       
      <html> <head> <style> .container{ width: 850px; min-height: 513px; margin-left: 5%; margin-top: 5%; background-color: #DCDCDC; border-radius: 0.7em 0.7em; } .......... ........ ......... ........ </style> </head> <body> <div class="container"> <div class="filho"> <div class="topo"></div> </div> <div class="titulo"></div> <div class="caixa"> <div class="preco"></div> <div class="linha"></div> <div class="escondido"></div> <div class="balao_cinza"></div> </div> </div> </body> </html>  
    • By renan mafra
      Olá pessoal,

      Eu estou criando uma página .htm simples, e quero que nessa página o texto seja de uma fonte especifica, no meu caso
      GeneveNrw incorporada à página, eu peguei a fonte genevaNrw.ttf e coloquei na pasta font-geneva-nrw, acontece que
      não está rolando..., eu tento visualizar no desktop e aparece uma fonte padrão..., eu botei no IIS e aparece uma fonte padrão,
      eu fui no mime do IIS e tá habilitado formato .ttf, eu botei no Apache e também nada, pessoal me deem um help !
       
      segue o código:

       
      <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> <style> @font-face { font-family: 'GenevaNrw'; src: url('font-geneva-nrw/GenevaNrw.ttf'); } .titulo{ font-family: GenevaNrw; font-weight: bold; font-size: 22px; text-decoration: underline; margin-top: 17px; margin-left: 35px; } ........ ........ </style> </head> <body> <div class="container"> <div class="topo"> <div class="topo_aba"><img src="imagens/borda-esquerda.gif" width="78" height="68" border="0"></div> <div class="topo_estrelas"><img src="imagens/estrelas-direito.gif" width="112" height="24" border="0" class="img-right"></div> </div> <div class="titulo">RECEITAS DE TORTAS</div> </div> </body> </html> Estou utilizando o Dreamweaver e no mostrar visualização do programa aparece.... só lá... do resto nada.
      abraço !!!
    • By lemao_code()
      Bom dia Galera, não sei se este é a div certa para a postagem (div sacou?)
      Mas vamos lá,
      A uns 2meses to estudando linguagens de programação, comecei pela Logica de Programação com o professor Guanabara,Agora estou em Python e HTML5 CSS e Java.
      Python estou no que o professor chama de Mundo 2, aprendendo if, elif, else, já sei operadores aritméticos etc.
      HTML5 está mais no inicio, to aprendendo a trabalha com o css para dar estilo na pagina.(Também sei Banco de Dados no MySQL)
      Mas vamos ao assunto, to procurando colegas que estejam na parecida situação como eu, para realmente estudarmos juntos.
      Certa vez o professor falou que isso ajudaria e muito, e concordo, alguém para ajudar, e alguem para você ajudar, é um crescimento e tanto, então convido-os quem tiver interesse
      duas cabeças pensam mais que 1. (ou não se a outra cabeça for de um gênio!Jobs,BIl,Einsten,Hawking esses cara kk)
      Geralmente, estudos das 4h manhã ate as 6hrs da manhã, depois a noite das 19 até a hora que os olhos sangrarem!
       
      Pode mandar msg aqui no meu perfil, estou online!
      Obrigado!
    • By maretones
      Boa tarde,
      Estou aprendendo desenvolvimento Web, no momento html e CSS. Estou fazendo uma página básica para um trabalho do curso, inseri uma imagem no topo e logo abaixo inseri um menu horizontal, mas acima do menu fica uma bordinha com a cor do plano de fundo. Eu gostaria de juntar o menu com o final da imagem, já tentei diversas maneiras e nada.
       
      Podem me ajudar?
       
      Segue o código:
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>História Halloween</title> <style> body { margin:0 100px; background-color: #000000; color: #000000; text-align: justify; } .mae { background-color: #ff9933; } .conteudo { padding: 2% 8%; } h1, h2, h3 { text-align: center; } .menu ul{ margin: 0; background-color: #ff5544; list-style-type: none; text-align: center; } .menu ul li{ display: inline; } .menu ul li a{ font-size:26px; padding:2px 30px; display: inline-block; text-decoration: none; } </style> </head> <body> <div class="mae"> <img src="images/cemitery02.jpg" alt="logo" width="100%" height="500px"> <nav class="menu"> <ul> <li><a href="">História</a></li> <li><a href="">Curiosidades</a></li> <li><a href="">Filmes</a></li> <li><a href="">À definir</a></li> <li><a href="">À definir</a></li> </ul> </nav>  
×

Important Information

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