Ir ao conteúdo
  • Cadastre-se

Pesquisar na Comunidade

Mostrando resultados para as tags ''CSS''.



Mais opções de pesquisa

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Categorias

  • Armazenamento
  • Áudio
  • Energia
  • Entrada
  • Feiras e Eventos
  • Gabinetes
  • Memória
  • Museu
  • Placas-mãe
  • Portáteis
  • Processadores
  • Programas
  • Rádio CdH
  • Redes
  • Refrigeração
  • Smartphones
  • Tablets
  • Vídeo
  • Outros

Categorias

  • Armazenamento
  • Áudio
  • Câmeras
  • Computadores
  • Consoles
  • Eletrônicos
  • Energia
  • Entrada
  • Gabinetes
  • Impressão
  • Jogos
  • Memória
  • Placas-mãe
  • Portáteis
  • Processadores
  • Programas
  • Redes
  • Refrigeração
  • Smartphones
  • Tablets
  • Vídeo
  • Outros

Categorias

  • Livros disponíveis
  • Livros esgotados

Fóruns

  • Mensagens do Clube do Hardware
    • Regras gerais
    • Boletins do Clube do Hardware
    • Notícias da administração
  • Hardware
    • Recomendações de computadores
    • Placas de vídeo
    • Placas-mãe e chipsets
    • Processadores
    • Problemas de gargalo e desempenho
    • Memórias
    • Armazenamento
    • Refrigeração e superaquecimento
    • Fontes e energia
    • Gabinetes e casemods
    • Placas de som e áudio on-board
    • Periféricos
    • Mac
    • Overclock
    • Hardware - outros
  • Computação móvel
    • Notebooks
    • Tablets
    • Smartphones e apps
  • Redes e Internet
    • Redes e Internet
    • Hospedagem de sites e registro de domínios
  • Segurança da informação
    • Remoção de malware
    • Dúvidas sobre invasões e infecções
    • Programas de proteção
  • Programação e desenvolvimento
    • Java
    • C/C#/C++
    • Pascal/Delphi
    • .NET
    • Bancos de dados
    • Programação web
    • Programação - iniciantes
    • Programação de microcontroladores
    • Programação - outros
  • Software
    • Jogos
    • Pacotes de escritório
    • Computação distribuída (Folding@Home, Bitcoin etc.)
    • Virtualização
    • Design, animação e tratamento de imagens
    • Edição de áudio e vídeo
    • Programas
  • Sistemas Operacionais
    • Recomendação de sistemas operacionais
    • Windows
    • GNU/Linux, BSD, Unix-like e software livre
  • Eletrônicos
    • Equipamentos de som, home theaters e gravadores de mesa
    • Televisores e projetores
    • Câmeras e filmadoras
    • Players portáteis
    • Consoles (videogames)
    • GPS
    • Telefonia fixa
    • Eletrônica
    • Retrocomputação
  • Outros
    • Recomendações de serviços e lojas
    • Preços e ofertas
    • Notícias
    • Bolsa de empregos, certificações e mercado de trabalho
    • "Causos"
    • Encontros de usuários
  • Clube do Hardware
    • Comentários, elogios, críticas, sugestões e questões sobre o Clube do Hardware
    • Comentários de artigos
    • Fórum para testes de funcionalidades

Categorias

  • Hardware
  • Redes
  • Eletrônica
  • Sistemas operacionais

Encontrar resultados em...

Encontrar resultados que...


Data de criação

  • Iniciar

    FIM


Última atualização

  • Iniciar

    FIM


Filtrar pelo número de...

Data de registro

  • Iniciar

    FIM


Grupo


Caixas de som

Encontrado 76 registros

  1. É os seguinte eu to montando um layout responsivo com caixa de pesquisa, quando eu diminuo a tela aqui pra 799px x 150px até 478px x 150px a caixa de pesquisa fica em abaixo da borda perto do Vídeos gratuitos. Mas o que eu quero é que fique acima da borda sem sofrer alterações nos códigos pra não desalinhar as outras configurações como o arquivo large.css, medium .css. já tentei por o seguinte código abaixo no arquivo small.css mais não funciona, desalinha tudo nas dimensões mais alta: .header-2 { background-color: #ffffff; width: 980px; margin: 0 auto; padding: 0; } .busca input { background-image: url(../img/icone-search.png); background-repeat: no-repeat; height: 36px; padding: 12px; width: 190px; margin-top: 0px; margin: -23; background-position: 96%; border: 1px solid #d6d6d6; margin-left: 50px; } pra vocês verem como ta, o index ta : <html> <head> <link rel="stylesheet" type="text/css" href="./css/main.css"> <link rel="stylesheet" type="text/css" media="screen and (min-width: 0px)" href="./css/small.css"> <link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="./css/medium.css"> <link rel="stylesheet" type="text/css" media="screen and (min-width: 1366px)" href="./css/large.css"> <title>XRaros - Vídeos</title> </head> <body> <div class="uma-div"> <header class="menu-principal"> <main> <div class="header-1"> <div class="logo"> <ul> <li> <a href="index.html"> <img src="./img/logo.png"/> </a> </li> </ul> </div> <div class="redes"> <ul> <li><a href="index.html"> <img src="./img/videos.png"/> </a> </li> </ul> </div> </div> </main> </header> <main class="col-100 menu-urls"> <div class="header-2"> <div class="menu"> <ul> <li><a href="">Inicio</a></li> <li><a href="">Categorias</a></li> <li><a href="">Links</a></li> <li><a href="">Contato</a></li> </ul> </div> <div class="busca"> <input placeholder="Buscar vídeo..." type="text"/> </div> </div> </main> <div class="col-100"> <div class="content texto-destaque"> <h1>Vídeos gratuitos</h1> </div> </div> </div> </body> </html> o main.css: body{ width: 100%; height: 100%; margin: 0 auto; } ul { padding: 0px !important; } .menu-principal { width: 100%; background: #252323; height: 60px; } /*980px*/ main, .content { margin: 0 auto; width: 71.74231332357247%; position: relative; } .logo ul li{ float: left; display: inline-block; padding: 3px; } .redes ul li { display: inline-block; float: left; list-style: none; } /*HEADER*/ .header-1 { margin-left: 130px; } .header-2 { background-color: #ffffff; width: 980px; margin: 0 auto; padding: 16px; } .menu-urls{ height: 65px; border-bottom: 3px solid #efefef; } .menu ul li { display: inline-block; color: #8b8b8b; margin-left: 15px; height: 50px; } .menu ul li:hover{ border-bottom: 3px solid #00bac6; } .menu ul li a:hover { color: #00bac6; } .menu ul li a{ display: inline-block; color: #8b8b8b; text-decoration: none; font-size: 18px; text-transform: uppercase; } .menu{ width: 80%; float: left; } .busca { text-align: center; float: right; width: 100px; } .busca input{ background-image: url('../img/icone-search.png'); background-repeat: no-repeat; height:36px; padding: 12px; width: 190px; margin-top: 0px; background-position: 96%; border: 1px solid #d6d6d6; margin-left: 50px; } .col-100{ width: 100%; float: left; position: relative; } .texto-destaque { text-align: center; } } o large.css : /* Documento CSS */ * { margin: 0px; padding: 0px; } .uma-div { position: relative; width: 1800px; margin: 0 auto; height: 422px; overflow: hidden; } @media (max-width: 1800px) { .busca { text-align: center; float: right; width: 10%; } .col-100{ width: 96%; float: left; position: relative; } o medium.css : /* Documento CSS */ * { margin: 0px; padding: 0px; } .uma-div { position: relative; width: 1100px; margin: 0 auto; height: 500px; overflow: hidden; } @media (max-width: 1500px) { .busca { text-align: center; float: right; width: 20%; } o small.css : /* Documento CSS */ * { margin: 0px; padding: 0px; } .uma-div { position: relative; width: 500px; margin: 0 auto; height: 500px; overflow: hidden; } @media (min-width: 590px) { .busca { text-align: center; float: right; width: 150%; } } Me ajudem por favor , muito Obrigado.
  2. Boa noite! Estou desenvolvendo um site de agência de viagem para um trabalho na faculdade com alguns requisitos e uns desses requisitos pedidos e a tela de escolha de assento de avião depois de procurar muito na internet achei um código pronto e acabei utilizando portanto o css do código não está funcionando. Segue aí a foto de como deveria ficar e de como ficou e também o código do css. Espero muito que vocês possam me ajudar o trabalho vale 50% da nota da prova. Imagem de como é pra ficar o código Imagem de como ficou *,*:before,*:after { box-sizing: border-box; } html { font-size: 16px; } .plane { margin: 20px auto; max-width: 300px; } .cockpit { height: 250px; position: relative; overflow: hidden; text-align: center; border-bottom: 5px solid #d8d8d8; &:before { content: ""; display: block; position: absolute; top: 0; left: 0; height: 500px; width: 100%; border-radius: 50%; border-right: 5px solid #d8d8d8; border-left: 5px solid #d8d8d8; } h1 { width: 60%; margin: 100px auto 35px auto; } } .exit { position: relative; height: 50px; &:before, &:after { content: "EXIT"; font-size: 14px; line-height: 18px; padding: 0px 2px; font-family: "Arial Narrow", Arial, sans-serif; display: block; position: absolute; background: green; color: white; top: 50%; transform: translate(0, -50%); } &:before { left: 0; } &:after { right: 0; } } .fuselage { border-right: 5px solid #d8d8d8; border-left: 5px solid #d8d8d8; } ol { list-style :none; padding: 0; margin: 0; } .row { } .seats { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; } .seat { display: flex; flex: 0 0 14.28571428571429%; padding: 5px; position: relative; &:nth-child(3) { margin-right: 14.28571428571429%; } input[type=checkbox] { position: absolute; opacity: 0; } input[type=checkbox]:checked { + label { background: #bada55; -webkit-animation-name: rubberBand; animation-name: rubberBand; animation-duration: 300ms; animation-fill-mode: both; } } input[type=checkbox]:disabled { + label { background: #dddddd; text-indent: -9999px; overflow: hidden; &:after { content: "X"; text-indent: 0; position: absolute; top: 4px; left: 50%; transform: translate(-50%, 0%); } &:hover { box-shadow: none; cursor: not-allowed; } } } label { display: block; position: relative; width: 100%; text-align: center; font-size: 14px; font-weight: bold; line-height: 1.5rem; padding: 4px 0; background: #F42536; border-radius: 5px; animation-duration: 300ms; animation-fill-mode: both; &:before { content: ""; position: absolute; width: 75%; height: 75%; top: 1px; left: 50%; transform: translate(-50%, 0%); background: rgba(255,255,255,.4); border-radius: 3px; } &:hover { cursor: pointer; box-shadow: 0 0 0px 2px #5C6AFF; } } } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; }
  3. Olá, estou interessado em criar cartões de propagando, exemplo, na Udemy quando você vai olhar os cursos ficam aqueles cartões, com o nome do curso, foto, estrelas, valor, eu quero fazer um daquele, só que não sei por onde começar, apenas quero fazer o cartão, sem utilizar nenhuma outra linguagem, apenas HTML e CSS, é possivel? se sim, como faço?
  4. Olá amigos, estou tendo dificuldade de criar a parte final do site, eu irei mandar a imagem para ficar mais fácil entender, o que eu quero, é criar 3 blocos de texto que sejam juntos, porém separados embaixo do outro, tipo 3 imagens uma ao lado da outra fazendo parte da mesma Div, eu fiz isso, mas saiu meio bugado, eu precisava ajeitar a posição, e eu quero que eles ficam automaticamente um embaixo do outro, sem precisar ficar forçando tamanho, aqui vai o exemplo, são esses 3 blocos de texto, cada um vai contar 1 imagem em acima do titulo de cada bloco, o titulo, subtitulo, e o texto, como eu faria isso de forma mais simples? o que eu fiz foi: criei um div avo depois uma div pai com que contem a imagem, e uma outra div filha com o texto, essas divs avos eu chamei de passo 1, criei 3, sao 3 blocos... vou mandar o trecho do codigo também, se puderam me dar uma luz, agradeço <div class="passo-01"> <div class="background"> <div class="camera"></div> <h1>PASSO 1</h1> <h5>Luzes, camera e AÇÃO!</h5> <p>Pegue sua camera, uma camera comum, que não seja de Smartphones antigos, já basta, e grave sua aula teste para avaliação, se você fica envergonhado na frente da camera, e não consegue se expressar, tudo bem, use um software de screencast, ou seja, grave a tela do seu computador com o conteúdo que será abordado. A G2 cursos disponibiliza nossa equipe para análisar gratuitamente seus videos, e nossa comunidade está disponível para lhe dar conselho e inspirações.</p> </div> <div class="passo-02"> <div class="dinheiro"></div> <h1>PASSO 2</h1> <h5>Como serei pago?</h5> <p>Os cursos adquiridos na G2 cursos terão uma receita dividida em 50% para a empresa, e 50% para o criador do curso, e qual o valor do curso que devo propor? a G2 cursos irá avaliar, com base no estipulado pelo criador, e pela demanda do público, e pelo tema do curso, por isso, é recomendado que faça uma pesquisa antes sobre a dimensão da concorrência e o volume de compradores</p> </div> <div class="passo-03"> <div class="legal"></div> <h1>PASSO 3</h1> <h5>Construa sua comunidade</h5> <p>Crie questionários, exercícios e tarefas para incentivar a interatividade. Deixe mensagens de boas-vindas para seus alunos e responda às perguntas deles. Os alunos da G2 cursos não apenas assistem os vídeos, eles interagem, pois, na G2 cursos, você terá acesso a milhões de alunos ansiosos para aprender com você. Para começar bem e se destacar da concorrência, também é importante cuidar do seu próprio sucesso. Não se preocupe, você ainda não tem de pensar no marketing, mas, quando estiver perto de publicar seu curso, você terá muitos recursos à disposição para ajudar a conquistar seu público.</p> </div> </div>
  5. Olá, eu estou inserido responsivo no site o qual estou criando, porém esta acontecendo um problema comigo, eu define o site como ele irá ficar quando a resolução máxima for 320px, porém, quando eu faço para 480px, ele não muda nada, eu testei mudar o tamanho da fonte do texto pra ajustar ele, só que não adiantou, continuou a mesma coisa, eu estou utilizando a meta tag viewport, estou utilizando as medias, e tal, só que não vai... eu quero fazer isso utilizando apenas o css e html, não quero utilizar neste site outra linguagem... por favor me ajudem!
  6. Galera estou com um problema! Estou tentando fazer com que ao dar o hover em um link ele mostre um texto abaixo falando sobre o que ele é. Mais quero que somente quando eu passe o mouse sobre o link ele mostre o texto… Mais ao colocar ele dentro de uma div quando passo o mouse sobre a parte branca ele fica mostrando o texto do hover! Queria que a div tenha o mesmo tamanho do texto para não ter esse problema e que seja um modo que qualquer texto que eu use a div fique do tamanho dele sem que eu tenha que fazer na mão para cada link! Se alguém souber um modo! <div class="some-div"> <a href="">Competências</a> <p class="some-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id vulputate augue. Donec varius arcu in massa lobortis, eu elementum nunc pharetra. Etiam eget odio ut libero semper ultrices ut nec lorem. </p> </div> .some-element { border: 1px solid #ccc; display: none; font-size: 10px; margin-top: 10px; padding: 5px; text-transform: uppercase; } .some-div:hover p { display:block; }
  7. Galera estou com o seguinte problema: eu criei dois menus e quero que os mesmos fiquem "colados" um no outro, mas acho que devido o bootstrap fica aquela margin automática travando essa opção. meu html: <body> <div class="col-xs-12"> <div class="row mt-0"> <nav class="col-md-12 menu"> <ul> <li>Book Shop</li> <li>(51)9 9576-0442</li> </ul> </nav> </div> <div class="row mt-0"> <nav class="col-md-12 menu-2"> <ul> <li>Início</li> <li>Sobre</li> <li>Categorias</li> <li>Contato</li> </ul> </nav> </div> </div> </body> meu css : /*-------PRIMEIRO MENU--------*/ .menu ul{ text-align: right; list-style: none; padding: 5px; background-color: #0D0C0C } .menu ul li{ display: inline; color: #EBE6E6; } .menu li{ padding-left: 2%; } /*---------SEGUNDO MENU--------*/ .menu-2 ul { text-align: left; list-style: none; padding: 5px; background-color: #7B1414; } .menu-2 ul li{ display: inline;; color: #F4D0D0; } .menu-2 ul li a{ color: #F4D0D0; text-decoration: none; padding: 2px; display: inline-block; } .menu-2 ul li a:hover{ background-color: #871D1D; color:#F5AEAE; }
  8. Tenho o seguinte código: <div class="row"> <div class="col-md-6"> <div class="embed-responsive embed-responsive-16by9"> <iframe src="video.mp4?modestbranding=1&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe> </div> </div> <div class="col-md-6 ml-auto"> <h2 class="title">TESTE</h2> <img src="imagem.png"> </div> </div> de um lado fica o vídeo e do outro uma imagem, eu gostaria de fazer com que o vídeo fique centralizado verticalmente no meu col-md, como fazer?
  9. Socorro pessoas! Como faz anos que não mexo em nada de programação estou com essa dúvida bem básica: onde vai o sendto e meu endereço de e-mail nesse box de contato? <div class="box"> <form method="post" action="#"> <div class="fields"> <div class="field half"><input type="text" name="name" placeholder="Nome" /></div> <div class="field half"><input type="email" name="email" placeholder="E-mail" /></div> <div class="field"><textarea name="message" placeholder="Mensagem" rows="6"></textarea></div> </div> <ul class="actions special"> <li><input type="submit" value="Enviar mensagem" /></li> Obrigada!! obs: substituindo o # por sendto: meu email não parece funcionar
  10. Olá povo! Alguem pode me ajudar? Tenho um site simples que queria colocar imagens no lugar das palavras do menu, mas por ser em banco de dados não estou conseguindo fazer com que as imagens ali funcionem como botões. O site é o seguinte: http://www.aves.jsphynx.com Segue aqui o código do menu: <!-- Portfolio --> <section id="portfolio" class="page"> <div class="container"> <div class="row"> <div class="col-md-12 title-page text-center build"> <h2>Ordens</h2> </div> </div> <div class="row"> <div class="metro"> <div class="col-md-10 col-md-offset-1"> <div class="build"> <ul id="filterOptions" class="clearfix"> <li class="cur"><a class="btn btn-link linear" href="#" data-group="all">Todas</a></li> <li><a class="btn btn-link linear" href="#" data-group="Accipitriformes">Accipitriformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Anseriformes">Anseriformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Apodiformes">Apodiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Caprimulgiformes">Caprimulgiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Cariamiformes">Cariamiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Cathartiformes">Cathartiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Charadriiformes">Charadriiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Ciconiiformes">Ciconiiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Columbiformes">Columbiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Coraciiformes">Coraciiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Cuculiformes">Cuculiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Eurypygiformes">Eurypygiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Falconiformes">Falconiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Galbuliformes">Galbuliformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Galliformes">Galliformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Gruiformes">Gruiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Nyctibiiformes">Nyctibiiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Opisthocomiformes">Opisthocomiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Passeriformes">Passeriformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Pelecaniformes">Pelecaniformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Phaethontiformes">Phaethontiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Phoenicopteriformes">Phoenicopteriformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Piciformes">Piciformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Podicipediformes">Podicipediformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Procellariiformes">Procellariiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Psittaciformes">Psittaciformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Rheiformes">Rheiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Sphenisciformes">Sphenisciformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Steatornithiformes">Steatornithiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Strigiformes">Strigiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Suliformes">Suliformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Tinamiformes">Tinamiformes</a></li> <li><a class="btn btn-link linear" href="#" data-group="Trogoniformes">Trogoniformes</a></li> <li class="cur"><a class="btn btn-link linear" href="#" data-group="Hibridas">Híbridas</a></li> <li class="cur"><a class="btn btn-link linear" href="#" data-group="Ameacadas">Ameaçadas</a></li> </div> </div><!--end-col--> </div><!--end-col--> </div> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="row"> <div class="main-folio clearfix metro" id="grid"> obs: o site está bem pesado para carregar e por isso quero ocultar todas as fichas de aves e fazer das palavras apenas botões com link para cada grupo de imagens de cada ordem (o problema está apenas em fazer com que o botão funcione sendo uma imagem). Obrigada!
  11. Oi, como posso fazer com que o width de um input fique sempre preenchida? Por exemplo: https://jsfiddle.net/L62o1c3w/ Também como exemplo, o https://www.mercadolivre.com.br/, ao você reduzir a janela, ou utilizar smartphone, a barra de pesquisa superior sempre fica 100% preenchida sem deixar espaços. No jsfiddle, tenho um input, e quero que ele fique no máximo de largura possível, removendo o espaço vazio que existe entre o input e "login". Como posso fazer isto? usar width 100% não funciona.
  12. Olá pessoal, estou iniciando os estudos em desenvolvimento web e o site que quero fazer possui um menu superior com um link chamado "minha conta", mas não consigo deixar as duas palavras uma ao lado da outra e por isso o menu fica feio. Gostaria de saber como deixar as duas palavras na mesma linha. Segue imagem do menu. Abaixo o código HTML e o CSS .menu_dir{ float: right; margin-right: 10px; } .menu{ width:100%; height:100px; background-color: #3a9ed1; font-family:'arial'; } .menu ul{ list-style:none; position:relative; z-index: 1; } .menu ul li{ width: 150px; /*tamanho da barra do menu*/ float:left; } .menu a{ padding:40px; display:block; font-size: 22px; font-weight:bold; text-decoration:none; text-align: center; background-color: transparent; color: #fff; } <nav class="menu"> <ul> <li><a>T040</a></li> <li><a href="index.php">Home</a></li> <li><a href="sobre.php">Sobre</a></li> <nav class="menu_dir"> <li><a href="myacc.php">Minha Conta</a></li> <li><a href="logout.php">Sair</a></li> </nav> </ul> </nav> Agradeço a quem puder me ajudar
  13. Estou criando um site, que esta hospeado http://robocup-jaspion.000webhostapp.com/materiais.html , no final da pagina ele fica desconfigurado, como resolvo isso? Segue o codigo em css e html: Desktop.zip
  14. Olá, Alguém poderia me instruir passo a passo como adicionar esse MENU do link no meu Blog? já pesquisei bastante sobre o assunto mas não encontrei ninguém explicando onde devo salvar as imagens usadas no MENU do Codigo CSS em questão. Deveria ser fácil já que o Blogger disponibiliza a opção de Add codigo CSS. Link do MENU que eu gostaria de Add: http://www.psdgraphics.com/html-css/psd-web-navigation-html-and-css-menus-set/
  15. Pessoal, Eu sou iniciante nesta área e criei um layout simples de site pra testar meus conhecimentos e tentar deixá-lo responsivo, porém estou preso a área do menu, que não consigo deixar responsivo. Estabeleci no CSS que quando a tela chegasse na largura máxima de 1050px, que a div do menu deveria reduzir para 808px. Isso até acontece, mas aí o conteúdo fica todo desconfigurado, sendo que eu atribuí a largura do conteúdo em porcentagem. Poderiam me ajudar? Esta é a imagem com o navegador maximizado: Esta é a imagem com a tela do navegador reduzida: Código HTML: <html> <head> <title>Projeto Clash</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="Clash.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="banner"> <img src="../../Imagens/Mais-banner.jpg" alt="Clash Royale"/> </div> <div class="bannermenu"> <div class="menutrans"> <div class="logo"> <img src="../../Imagens/Novo-logo.png" alt="Clash Royale"/> </div> <div class="listamenu"> <nav> <ul> <li>HOME</li> <li>CADASTRE-SE</li> <li>TORNEIO</li> <li>BATALHAS</li> <li>CONTATO</li> </ul> </nav> </div> <div class="search"> <form> Busca: <input type="search" placeholder="Encontrar na página"/> <input type="submit" value="Search"/> </form> </div> </div> </div> </body> </html> Código CSS: body{ margin:0; padding:0; } *{ box-sizing:border-box; font-family:Comic Sans MS; } .banner{ height:200px; background-color:#99ff99; } .banner img{ position:relative; top:50%; left:50%; transform:translate(-50%,-50%); } .bannermenu{ height:80px; background-color:red; } .menutrans{ width:1050px; margin:auto; } .logo img{ float:left; padding-top:5px; height:80px; width:20%; } .listamenu{ color:white; font-size:14px; float:left; padding-left:5px; font-weight:bold; width:45%; height:80px; } .listamenu li, .listamenu ul{ margin:0; padding:0; list-style:none; } .listamenu li{ float:left; line-height:80px; padding-left:10px; padding-right:10px; } .listamenu li:hover{ color:black; cursor:pointer; } .listamenu li:active{ color:black; } .search{ float:left; padding-left:10px; color:white; font-size:14px; line-height:80px; font-weight:bold; width:35%; height:80px; } @media only screen and (max-width:1050px){ .menutrans{ width:808px; } } Muito obrigado!
  16. Estou com um checkbox <div class="form-check mb-4"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value=""> <span class="form-check-sign"> <p style="text-align: justify;">teste</label> </span> </div> que tem o seguinte CSS .form-check .form-check-sign::after { font-family: 'FontAwesome'; content: "\f00c"; top: 0px; text-align: center; font-size: 14px; opacity: 0; color: #EFE; border: 0; background-color: inherit; } O problema que o font awesome assim não funciona, gostaria de colocar no lugar do content o código: <i class="faz fa-check"></i> como posso fazer isso?
  17. Galera estou tendo problemas para colocar o texto e formulário que fiz no aside para que fiquem no top, em vez disso ele fica abaixo da section como mostra os prints ai, como faço pra solucionar isso? Só achei um jeito, mas creio que não é o correto, coloquei margin-top: -48% kkkk deu certo mas não fica responsivo acredito eu.
  18. Entao pessoa, eu estou criando um site e uma das divs esta sobrepondo a outra quando eu reduzo o tamanho da tela do site, era pra ela ir pra baixo, mas ela fica ou em cima da anterior ou dentro, e ela teria que ficar em baixo, em ultimo lugar... <!DOCTYPE html> <html> <head> <title>TESTE</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="css/estilo.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div id="cabecalho" class="col-12"></div> </div> <div id="fundo-em cima" class="row"> <div id="fundo-em cima-esquerda" class="col-md-6 col-xs-12"></div> <div id="fundo-em cima-direita" class="col-md-6 d-none d-md-block"></div> </div> <div id="fundo-meio" class="row"> <div id="fundo-meio-esquerda" class="col-md-6 col-xs-12"></div> <div id="fundo-meio-direita" class="col-md-6 col-xs-6"></div> </div> <div class="row"> <div id="fundo-baixo" class="col-md-12 col-xs-10"></div> </div> </div> </body> </html> #cabecalho{ background: #98FB98; height: 100px; } #fundo-em cima{ background: #808000; } #fundo-meio{ background: #D2B48C; height: 200px; } #fundo-baixo{ background: #D2B48C; height: 200px; } #fundo-em cima-esquerda{ background: #4B0082; min-height: 200px; } #fundo-em cima-direita{ background: #FF00FF; min-height: 200px; } #fundo-meio-esquerda{ background: #800000; min-height: 200px; } #fundo-meio-direita{ background: #FF4500; min-height: 200px; } #fundo-baixo{ background: #D2B48C; height: 100px; } TESTE.rar
  19. gente observem essa teoria: Um dos grandes problemas encontrados pelos desenvolvedores web é a forma como os vários browsers interpretam de formas diferentes o mesmo código, não conseguindo o mesmo resultado a página desenvolvida. Para resolver este problema, antigamente os desenvolvedores desenvolviam vários arquivos CSS para cada navegador. Portanto, para resolver esse problema, desenvolveu-se uma técnica chamada “CSS Reset”, que se aplica uma folha de estilos básica para resetar toda formatação “original” aplicada pelo browser. Essa folha de estilos pode ser aplicada internamente HTML ou externamente, sendo esta a técnica mais comum, devido várias páginas poderão utilizar a mesma formatação. Cada um pode desenvolver seu próprio arquivo CSS para efetuar o reset, mas na web existem vários já prontos e distribuídos para uso livre. Um dos mais conhecidos foi/é desenvolvido por Eric Meyer e disponibilizado em sua página pessoal. Minha dúvida é a seguinte: Alguém já usou esse arquivo? Usei esse arquivo seguindo os passos do seguinte tutorial: https://www.devmedia.com.br/como-utilizar-a-tecnica-css-reset/26797 Só que creio que a prática não ficou tão compatível com a teoria, vejam pela imagem como fica a mesma página em dois navegadores diferentes (chrome, firefox). Então, a exibição da página continua diferente em navegadores diferentes, ou só determinados itens é que ficam padronizados por esse código de css reset? alguém pode me ajudar?
  20. Galera, estou com uma dorzinha de cabeça aqui. Um projeto pequeno da faculdade relacionado a desenvolver um site do zero com html, css e php. No momento quero por o mesmo background na div "acesse o portal" e na div "slide". Será que poderiam me dar uma luz? adicionado 2 minutos depois O intuito é ficar com o mesmo background dessa forma:
  21. Eu consigo editar os arquivos HTML e PHP do meu site no gerenciador de arquivos do 000webhost. Mas quando edito os arquivos CSS e JavaScript, o site é atualizado no domínio raiz do 000webhost, mas não no domínio personalizado e apontado com registro CNAME. Então como se resolve isso?
  22. Fui colocar borda em uma imagem com legenda, até ai tudo bem, mas na hora q usei o "position" para colocar a legenda dentro da imagem, a parte de baixo da imagem ficou com um pequeno espaço em branco entre a imagem e a borda. Sou iniciante
  23. Preciso de um site responsivo. Alguem pode me mandar um css para que meu site fique responsivo!
  24. Boa noite. Galera estou fazendo uma atividade da faculdade, na qual eu tenho que fazer uma espécie de uma tabela do brasileirão tipo a do GE, só que o design não está lega, quero adiciona rum espaçamento entre as linhas da tabela, mas não sei como fazer isso, alguém poderia me ajudar?
  25. Boa tarde, gostaria de saber como faço para separar um <li> em 2 colunas, o problema é o seguinte, tenho um menu em meu header, quando ele vira mobile, fica desalinhado pois os icones tem tamanho diferentes. Não sei se tem alguma margem ou algo que de para fazer para texto ficar alinhado e icones. Segue print: O TEXTO 2 está desalinhado aos demais, não sei se arruma isso com algo que separa, ou uma margem... caso alguém puder ajudar... segue o código: <div class="navbar-collapse collapse show" id="navbarToggler" style=""> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a href="#" target="_self" class="nav-link"><i class="faz fa-address-card"></i> TEXTO 1</a> </li> <li class="nav-item"> <a href="#" target="_self" class="nav-link"><i class="faz fa-file-alt"></i> TEXTO 2</a> </li> <li class="nav-item"> <a href="#" target="_self" class="nav-link"><i class="faz fa-envelope"></i> TEXTO 3</a> </li> </ul> </div> Obrigado

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×