Jump to content

Gostaria de tirar uma dúvida sobre css no html (usando no VS Code)


Alex Bianchi
 Compartilhar

Postagens Recomendadas

o problema é o seguinte, eu estava treinando meu primeiro projeto quando eu me deparo com um erro no código onde eu tento utilizar este:

.redes-sociais ul li{

    text-indent: -99999px;

    width: 20%;

}

ul{

    list-style: none;

    float: right;

}

ul li{

    display: inline;

}

.redes-sociais{

    width: 20%;

}

 

e os ícones das redes sociais não alinham como desejado 1479908324_Semttulo.png.77fa1d95359341a2ac65eea117509e40.png

obs, o resultado deveria ser esses ícones do linkedin alinhas com a logo e um pouco espaçado entre eles

Link to comment
Compartilhe em outros sites

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <link rel="stylesheet" href="./css/main.css">

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Meu Primeiro Projeto</title>

</head>

<body>

    <header class="menu-principal">

        <main>

        <div class="header-1">

        <div class="logo">

            <img src="./img/logo.png">

        <div class="rede-sociais">

            <ul>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

 

            </ul>

        </div>

 

        </div>

            </main>

    </header>

</body>

</html>

Link to comment
Compartilhe em outros sites

13 horas atrás, Alex Bianchi disse:

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <link rel="stylesheet" href="./css/main.css">

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Meu Primeiro Projeto</title>

</head>

<body>

    <header class="menu-principal">

        <main>

        <div class="header-1">

        <div class="logo">

            <img src="./img/logo.png">

        <div class="rede-sociais">

            <ul>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

                <li>

                    <a href=""><img src="./img/linkedin.png"/></a>

                </li>

 

            </ul>

        </div>

 

        </div>

            </main>

    </header>

</body>

</html>

@carlosscheffer  @Danilo Duarte Ribeiro  @Kleverson Cruz

Link to comment
Compartilhe em outros sites

Em 26/11/2021 at 09:45, Danilo Duarte Ribeiro disse:

Como está a estilização da div "logo"? Acredito que o problema possa ser nela ou na div "header-1".

Tente usar display flex em uma delas.

Uma ferramenta legal pra ver como está o layout no browser é usar o inspetor de elementos nas ferramentas de desenvolvedor.

tem como me explicar melhor?

 

Link to comment
Compartilhe em outros sites

Por padrão, os elementos são posicionados um abaixo do outro. Se vc utilizar a propriedade 

display: flex;

na div pai, ou seja, que envolve o título e as logos, os elementos passam a ficar um ao lado do outro, conforme abaixo.

image.png

Talvez também seja necessário utilizar width como 100% nessa div também.

Daí para alinhar no eixo vertical, conforme a imagem abaixo, utilize 

align-items: center;

image.png

e para deixar os elementos filhos alinhados na horizontal de forma que se espalhem de cada canto, conforme a imagem abaixo, você pode utilizar

justify-content: space-between;

ou alguma das outras opções a seguir.

image.png

Se ainda tiver dúvidas, procure sobre flexbox no CSS.

Espero ter ajudado 🙂

Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar

  • Você também pode se interessar por:

    • Por felipepereira
      Ola boa noite! pessoal eu gostaria de uma ajuda. Eu tenho uma ideia de fazer um robo que navegue em um determinado site (url) e que faça um procedimento que e: passo 1ª empreecher sozinho os dois inputs de login para entre na site. passo 2º clicar sozinho em login. Passo 3º selecionar um determinado ID de um elemento html "<section>" passo 3º seria mostra o email que apareceu no <section> e mostra em um alert na tela do usuario que esta atrelado ao ID que ele digitou para buscar na url. Esse e o site que ja criei: https://pontofull.com/robo/ estou mostrando para vcs saberem +- como seria a ideia. 
       
      Observação: Seria como eu faço isso ? que linguagem usar ? ... eu estou fazendo um curso de java na ebaconline de javascript e o professor estava mostrando o "DOM" e "jquery" ex: document.get.  Aqui em baixo vou deixar o codigo que eu conseguir fazer em python pegou normalmente. Porem eu gostaria de rodar na web. 
       
      from selenium import webdriver
       
      driver = webdriver.Chrome(executable_path=r"C:\Users\TI-ADM\Documents\driver\chromedriver.exe")
       
      driver.get("https://cb10.td.commpeak.com/auth/login?redirect=/")
       
      driver.implicitly_wait(3)  #segundo
       
      campoBusca = driver.find_elements_by_name("username")[0]
       
      campoBusca2 = driver.find_elements_by_name("password")[0]
       
      campoBusca.send_keys("felipepereira")
       
      campoBusca2.send_keys("123456")
       
      driver.find_element_by_id("submit").click()
       
      driver.find_elements_by_class_name("caret")[5].click()
       
      driver.find_element_by_xpath("/html/body/div[2]/div/div[2]/ul[1]/li[6]/ul/li[2]/a").click()
       
      campolead = driver.find_elements_by_name("lead_id")[0]
       
      campolead.send_keys("12215389")
       
      campo = driver.find_element_by_xpath("/html/body/div[4]/div[2]/div[2]/div/div[1]/input").click()
       
      lista = driver.find_element_by_xpath("/html/body/div[5]/table/tbody/tr/td[1]/a").click()
       
      resultado = driver.find_elements_by_class_name("edit")[0]
       
      print(resultado)
       
       
      Obrigado pela atenção 
    • Por Nem1Real
      <form class="login-form" action="register">
                      <input  id="email" class="login-input" type="email" placeholder="Email ou Telefone">
                      <span class="login-input-border" ></span>
                      <input id="senha" class="login-input" type="password" placeholder="Senha">
                      <span class="login-input-border" > </span>
                      <button class="login-submit">Entrar</button>
                      <a class="login-reset" href="#">Esqueceu a Senha?</a>
                      <button class="login-register">Criar nova conta</button>
                  </form>
      <script>
      const BotaoEntrar = document.querySelector(".login-submit");
      BotaoEntrar.addEventListener('click', function(event){
          event.preventDefault();
      })
       
      const NewAccount = document.querySelector(".login-register");
      NewAccount.addEventListener('click', function(event){
          event.preventDefault();
      })
       
      const form = document.querySelector(".login-form");

       
      function ObterConta(form) {
         
       
          var conta = {
              email: form.email.textcontent,
              senha: form.senha.textcontent
          }
             return conta;
      }  


       
      const conta = ObterConta(form);
       
      console.log(conta)

      </script>
       
    • Por Danilo Duarte Ribeiro
      Frameworks CSS
      Durante o desenvolvimento de aplicações web,  independente do framework ou biblioteca utilizado, a estilização é, para muitos, uma das etapas mais trabalhosas e complicadas de se fazer, devido ao famoso CSS, que é amado por alguns e odiado por outros. Gostando ou não de escrever CSS, a verdade é que é necessário investir um tempo considerável do desenvolvimento a fim de obter o resultado desejado para o visual da aplicação.
      Com esse problema em mente, diversos desenvolvedores e designers construíram diversas ferramentas e frameworks para auxiliar nesse processo como, por exemplo, o Bootstrap,  que é (provavelmente) o mais conhecido e utilizado de todos. A maioria desses frameworks funcionam por meio das classes HTML e realizam a estilização do elemento em questão de acordo com a classe inserida.
      A maior desvantagem desse tipo de framework é que grande parte deles são, na realidade, uma coleção de componentes prontos que mudam a estilização completa de um elemento com apenas uma classe e, muitas vezes, não possuem simples maneiras de customizá-lo diretamente, o que faz com que os desenvolvedores ainda tenham que escrever um código CSS adicional caso queiram mudar parte do design de um componente e torná-lo diferente do padrão.
       
      Há quem goste dessa abordagem, contudo, eu gostaria de mostrar uma outra abordagem de frameworks CSS, denominada “utility-first”, que, na prática utilizam classes para estilizar propriedades específicas de um elemento e não mudam o estilo dele por inteiro de uma única vez.
      Essa abordagem é ótima para quem não quer perder a liberdade de estilizar cada aspecto de um elemento individualmente, e também não deseja ter uma interface semelhante a várias outras, como acontece na maioria das interfaces que usam Bootstrap, por exemplo.
      E dentre os frameworks que utilizam essa abordagem, gostaria de destacar um deles em específico: o Tailwind CSS.
       
      Tailwind CSS
      O Tailwind CSS é um framework CSS utility-first e mobile-first que vem se destacando por ser simples, leve, responsivo, amplamente configurável e extremamente fácil de usar até para quem não domina CSS.
      Atualmente ele está disponível para diversos frameworks e bibliotecas como: React, Vue.js, Next.js, Nuxt.js, Vite, Laravel, Gatsby, e até para projetos com JavaScript puro, e seu processo de instalação é bem simples.
      Uma vez instalado, basta escrever as classes correspondentes às propriedades CSS desejadas no “class” (ou “className”, no React) do elemento em questão, seguindo as classes da documentação oficial, e o estilo será aplicado a ele instantaneamente.
      Outra vantagem é que o Tailwind CSS realiza o “purge” de classes, ou seja, classes não utilizadas não são incluídas no build da aplicação, reduzindo o tamanho dos arquivos finais e melhorando a performance.
      É possível testar o Tailwind CSS por meio do link: https://play.tailwindcss.com/
       
      A seguir seguem alguns exemplos práticos da utilização do Tailwind CSS em comparação com CSS puro.
       
      1 - Flexbox:
      HTML e CSS puro <div class="element"> ... </div> .element { display: flex; flex-direction: column; align-items: center; justify-content: center; }  
      Utilizando Tailwind CSS <div class="flex flex-col items-center justify-center"> ... </div>  
      2 - Grid, quebra de linha e text-overflow:
      HTML e CSS puro <div class="container"> <div class="first"> ... </div> <div class="second"> ... </div> </div> .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .first { grid-column: span 3 / span 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .second { grid-column: span 1 / span 1; }  
      Utilizando Tailwind CSS <div class="grid grid-cols-4"> <div class="col-span-3 truncate"> ... </div> <div class="col-span-1"> ... </div> </div>  
      3 - Responsividade, cores, padding e border-radius:
      HTML e CSS puro <div class="element"> ... </div> .element { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 1rem; background-color: #2563eb; color: #4b5563; border-radius: 0.5rem; @media (min-width: 768px) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } }  
      Utilizando Tailwind CSS <div class=" w-full flex flex-col items-center justify-center gap-8 p-4 bg-blue-600 text-gray-600 rounded-lg md:grid md:grid-cols-4 " > ... </div>
      Conclusão:
      Por fim, espero que tenha sido possível perceber as diversas vantagens na utilização do Tailwind CSS em seu projeto front-end e que, embora não seja perfeito, ele pode proporcionar um grande aumento na produtividade de desenvolvedores front-end, reduzindo o tempo gasto em estilização, especialmente para aqueles que são muito fãs de escrever CSS.
      Existem também diversas outras ferramentas para melhorar a forma de lidar com estilização, como Styled Components, Sass, dentre outros.
      Qual o seu favorito?
      O que achou do Tailwind CSS?
      Gostaria de unir o Tailwind CSS com uma biblioteca de componentes como o Bootstrap? Dê uma olhada no Tailwind UI. 😄
    • Por LuisaFCorrea
      Gostaria de saber se é possível colocar uma tag html dentro de um json para que o mesmo seja mostrado em tela depois e dessa forma a minha tag <a> apareça como link 
  • Quem está online   2 Membros, 0 Anônimos, 16 Visitantes (Ver lista completa)



Sobre o Fórum

Este é um fórum para todos os devs e software houses!

Você como dev já passou por uma situação onde aconteceu algum bug, olhou para os lados e não tinha ninguém para te ajudar? Seus problemas acabaram! 😎 

Bem-vindo(a) ao fórum da Casa do Desenvolvedor, uma comunidade completa, onde desenvolvedores, software houses, aficionados por inovação e tecnologia podem tirar dúvidas, compartilhar novidades e conhecimento, trocar experiências e até postar uns memes que só nós da tecnologia entendemos 😅

Crie agora sua conta e vamos juntos criar uma comunidade forte! 

×
×
  • Create New...