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, autoração e gravação de áudio e vídeo
    • Programas
  • Sistemas Operacionais
  • Eletrônicos
  • Outros
  • Clube do Hardware

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


Encontrado 145 registros

  1. Como faço para que as opções do submenu carregar ao lado do menu lateral, como na imagem em anexo: @charset "UTF-8"; *{ margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; font-family: 'Arial', sans-serif; } body{ background-color: #f3f5f9; } .wrapper{ display: flex; position: relative; } .wrapper .sidebar{ width: 250px; height: 100%; background: #363636; position: fixed; } .wrapper .sidebar h2{ color: #fff; text-transform: uppercase; text-align: center; padding: 15px; } .wrapper .sidebar ul li{ padding: 15px; border-bottom: 1px solid #bdb8d7; border-bottom: 1px solid rgba(0,0,0,0.05); border-top: 1px solid rgba(255,255,255,0.05); } .wrapper .sidebar ul li a{ color: #bdb8d7; display: block; } .wrapper .sidebar ul li a .faz{ width: 25px; } .wrapper .sidebar ul li:hover{ background-color: #4169E1; } .wrapper .sidebar ul li:hover a{ color: #fff; } .wrapper .sidebar .social_media{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; } .wrapper .sidebar .social_media a{ display: block; width: 40px; background: #594f8d; height: 40px; line-height: 45px; text-align: center; margin: 0 5px; color: #bdb8d7; border-top-left-radius: 5px; border-top-right-radius: 5px; } .wrapper .main_content{ width: 100%; margin-left: 250px; position: sticky; top: 0; } .sidebar{ position: fixed; } .wrapper .main_content .header{ padding: 21px; background: #4169E1; color: #fff; border-bottom: 1px solid #e0e4e8; position: fixed; width: 100%; } .wrapper .main_content .info{ margin: 20px; color: #717171; line-height: 25px; padding-top: 60px; } .wrapper .main_content .info div{ margin-bottom: 20px; } @media (max-height: 500px){ .social_media{ display: none !important; } } <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/menu-principal.css"> <script src="https://kit.fontawesome.com/b99e675b6e.js"></script> <title></title> </head> <body> <div class="wrapper"> <div class="sidebar"> <h2>Logo</h2> <ul class="mainmenu"> <li><a href="#"><i class="faz fa-home"></i>Home</a></li> <li><a href="#"><i class="faz fa-user"></i>Ativos</a></li> <li><a href="#"><i class="faz fa-address-card"></i>About</a> <li><a href="#"><i class="faz fa-project-diagram"></i>portfolio</a></li> <li><a href="#"><i class="faz fa-blog"></i>Blogs</a></li> <li><a href="#"><i class="faz fa-address-book"></i>Contact</a></li> <li><a href="#"><i class="faz fa-map-pin"></i>Map</a></li> </ul> </div> <div class="main_content"> <div class="header">Welcome!! Have a nice day.</div> <div class="info"> <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div> <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div> <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div> </div> </div> </div> </body> </html>
  2. Gostaria de saber se existe algum problema em usar bootstrap com outro framework. Recentemente foi me solicitado para mudar o framework de front-end e usar o 'materializecss', porém gostaria de continuar usando o bootstrap pela questão das grids, paddings, margins e etc. Haveria algum problema de compatibilidade ou etc?
  3. Bom pelo PC ta legal, porém pelo celular ou outro dispositivo não fica tão legal, é uma pagina simples com apenas 4 botões e 2 textarea ... tudo centralizado ... eu sempre fui pessimo com design então não faço a minima como colocar ele bem alinhado para todos os dispositivos Basicamente é isso o codigo html: <html> <head> </head> <body style="background-color:#00303b;"> <center> <br/> <textarea id="tocode" cols="55" rows="15" wrap="soft"></textarea><br/><br/> <button onClick="code();">Codificar</button> <button onClick="traduzir();">Traduzir</button> <button onClick="copiar();">Copiar</button> <button onClick="limpar();">Apagar</button><br/><br/> <textarea id="result" cols="55" rows="15" disabled></textarea> </center> </body> </html> como esta pelo windows PC:
  4. Fala pessoal, queria saber como faço para aumentar a area de abrangencia de um clique de uma opção, por exemplo: Tenho um menu feito, mas só consigo entrar na opção quando cliko em cima do q esta escrito, eu queria que desse pra entrar quando clikar em cima da box inteira.
  5. Alguém pode me informar um programa que nele é possível gravar 1 script e ficar reproduzindo-o pela quantidade de vezes que escolher?
  6. Sou iniciante em HTML/CSS, estou estudando e quebrando a cabeça aqui para fazer uma sidebar/sidemenu. O texto que eu coloco nos botões nunca ficam alinhados com o ícone que eu coloco. <!DOCTYPE html-5> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div id="mySidebar" class="sidebar"> <a href="#"> <span class="sidebar_item"> <img src="iconsgrey/HomeIcon.png" alt=""> <span>Início</span> </span> </a> <a href="#"> <span class="sidebar_item"> <img src="iconsgrey/PersonIcon.png" alt=""> <span>Opção 2</span> </span> </a> </div> </body> body { background-color: orange; } .sidebar { position: fixed; height: 100%; width: 250px; background-color: black; padding: 0; margin: 0; top: 0; left: 0; } .sidebar_item { background-color: white; /*top right bottom left*/ padding: 20px 30px 20px 20px; font-size: 30px; font-family: Helvetica, monospace; color: #ababab; display: block; vertical-align: middle; } .sidebar_item span { background-color: green; margin-top: 0px;} .sidebar img { max-width: 40px; max-height: 40px; width: auto; height: auto; padding-right: 20px; background-color: blue; margin: 0; } .sidebar a { text-decoration: none; color: black; display: block; }
  7. Boa tarde galera, eu estou fazendo o curso de HTML5/CSS3 do Gustavo Guanabara, do canal Cursoemvideo. Estava dando tudo certo, porém agora estou com um problema. Eu estou usando um iframe, que quero tirar as scrollbars, para que eu posso linkar um href com o conteudo do iframe depois, porém não está funcionando: Note que há scrollbar tanto x quanto y. Meu código HTML: <iframe id="frame-spec" src="google-glass.html" name="janela"></iframe> CSS: iframe#frame-spec { width: 380px; height: 280px; border: none; overflow: hidden; } iframe#frame-spec::-webkit-scrollbar { display: none; } Estou usando o navegador Google Chrome, pelo que vi este código display:none; é para este navegador. Mas mesmo assim não está funcionando.
  8. Eu tenho um titulo <h1> que esta colado no topo, e eu queria dar um espaço de cima para baixo, eu estou usando margin-left/right para mover pros lados o <h1>, mas tentei usar um margin-top -40 para o titulo descer mas também nao vai
  9. To fazendo um website mas tem uma barra de scroll (nao sei o nome disso) na parte de baixo para mover para direita e esquerda , sendo que nao tenho mais conteudo do outro lado adicionado 26 minutos depois Eu acabei descobrindo ta ai pra quem tambem tiver a mesma duvida html { overflow-x: hidden; }
  10. Rapaziada, boa tarde. Então, estou desenvolvendo um site onde o background da home tem umas formas bemm complexas, o problema está na parte de qual background-size usar, pois já testei cover e contain e o background ficava se movimentando fazendo com que o conteúdo fique fora de seu lugar original. Estou apanhando muito para um problema besta kkkk. Se algum ancião puder me ajudar, agradeceria demais. Desde já, brigadão pela atenção, é noizz!!
  11. <!DOCTYPE html> <html> <head> <style> .main-timeline{ font-family: 'Roboto', sans-serif; position: relative; } .main-timeline:after{ content: ''; display: block; clear: both; } .main-timeline .timeline{ width: 50%; margin: 0 10px 30px 0; float: left; } .main-timeline .timeline-content{ color: #222; background: linear-gradient(to right,#d62053,#AF2850); text-align: center; padding: 75px 30px 30px; display: block; position: relative; z-index: 1; } .main-timeline .timeline-content:hover{ text-decoration: none; } .main-timeline .timeline-content:before{ content: ''; background: #fff; border-radius: 40px 0 60px 0; position: absolute; left: 10px; top: 10px; bottom: 10px; right: 10px; z-index: -1; } .main-timeline .timeline-icon{ color: #fff; background: linear-gradient(125deg, #d62053 50%, #AF2850 51%); font-size: 25px; line-height: 50px; height: 60px; width: 60px; position: absolute; top: 10px; left: 30px; z-index: 1; clip-path: polygon(100% 0, 100% 100%, 50% 80%, 0 100%, 0 0); } .main-timeline .title{ font-size: 22px; font-weight: 700; text-transform: uppercase; margin: 0 0 7px; } .main-timeline .description{ font-size: 14px; letter-spacing: 1px; margin: 0; } .main-timeline .timeline:nth-child(even){ float: right; margin: 0 0 30px 10px; } .main-timeline .timeline:nth-child(even) .timeline-content:before{ border-radius: 0 40px 0 60px; } .main-timeline .timeline:nth-child(even) .timeline-icon{ left: auto; right: 30px; } .main-timeline .timeline:nth-child(4n+2) .timeline-content{ background: linear-gradient(to right,#fc8d44,#fc7114); } .main-timeline .timeline:nth-child(4n+2) .timeline-icon{ background: linear-gradient(125deg, #fc8d44 39%, #fc7114 40%); } .main-timeline .timeline:nth-child(4n+3) .timeline-content{ background: linear-gradient(to right,#1071b2,#0A5C96); } .main-timeline .timeline:nth-child(4n+3) .timeline-icon{ background: linear-gradient(125deg, #1071b2 39%, #0A5C96 40%); } .main-timeline .timeline:nth-child(4n+4) .timeline-content{ background: linear-gradient(to right, #3fb1ea,#3DA6DC); } .main-timeline .timeline:nth-child(4n+4) .timeline-icon{ background: linear-gradient(125deg, #3fb1ea 39%, #3DA6DC 40%); } @media screen and (max-width:767px){ .main-timeline .timeline, .main-timeline .timeline:nth-child(even){ width: 100%; float: none; margin: 0 0 30px; } } @media screen and (max-width:567px){ .main-timeline .title{ font-size: 18px; } } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="main-timeline"> <div class="timeline"> <a href="#" class="timeline-content"> <div class="timeline-icon"> <i class="fa fa-globe"></i> </div> <h3 class="title">Web Designing</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo </p> </a> </div> <div class="timeline"> <a href="#" class="timeline-content"> <div class="timeline-icon"> <i class="fa fa-users"></i> </div> <h3 class="title">Web Development</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo </p> </a> </div> </div> </div> </div> </div> </body> </html> Usei esse script de timeline no laytou de pc ela fica 50% pra direita e 50% pra esquerda como ilustrado na imagem, se baseando no tamanho do play de vídeo no pc ela usa o espaço todo, no celular deveria usar 100% da tela e não ta usando, no celular ta menor não ta tipo usando 100% igual o play de vídeo
  12. glr, preciso de ajjda para remover a transicão que esxiste naqueles links internos do menu que direcionam para determinada section do site. Quando clicamos neles a tela desliza de forma suave até eles, sabem me dizer como tirar?
  13. alguém tem alguma ideia de como dar aquele zoom do mercado livre? porque to a 1 semana tentando algo e n da nada.
  14. Alguém saber alguma maneira simples de fazer isso usando apenas CSS e HTML puro?
  15. 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>
  16. 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 !!!
  17. galera, bom dia. Tranquilos? Então, já tem um tempo que eu to tentando remover a transição de rolagem dos links internos de um site. Já teste o seletor * com a propiedade animation em none , mas nada da certo. Já me disseram que essa transição pode ser causada por javascript ou algo do tipo. Alguma ideia? Desde já agradeço.
  18. Estou vendo uma aula de css e html no yt, e o cara falou que posso usar uma classe para chamar os comandos desejados , como eu poderia fazer isso ? Veja o video onde ele falou se voce não compreendeu minha pergunta , ele fala sobre isso no minuto 29:00
  19. Vi um tutorial de um cara que estava fazendo um site , mas ele começou fazendo com suporte para celular , depois para o suportar no desktop ele teve que fazer outros comandos este é o codigo completo https://github.com/estevanmaito/aprenda-html5-css3/tree/master/Aula 3 - LAYOUT E o que eu podeira tirar dai para começar o site com suporte direto para pc ?
  20. Estou fazendo um projeto de site/e-commerce, e uma coisa que me deixa bastante curioso é como os sites profissionais não sofrem alterações nos elementos das páginas ao mexer no tamanho da janela do navegador. É como fosse fixo, ou seja, não sofre alteração no tamanho dos elementos dentro dele. ex.: kabum, pichau, aliexpress ... Eu queria saber se possível com exemplos como isso é feito, desde já agradeço!!
  21. Gostaria que quando o usuario digitasse no input do Nome Completo aparecesse assim ex: João Alves com as 2 primeiras iniciais maiusculas Agradeço. Código: <div class="wrap-input100 validate-input m-b-16" data-validate = "Nome invalido!"> <input class="input100" type="text" name="nome" placeholder="Nome Completo" onkeypress="return ApenasLetras(event,this);"> <span class="focus-input100"></span> <span class="symbol-input100"> <span class="lnr lnr-users"></span> </span> </div>
  22. Eu desenvolvi essa tabela no notepad++ como o professor me pediu, mas então ele pediu para que fizesse a mesma no CSS Não faço ideia do que seja isso. Me ajudem!!! <!DOCTYPE html> <html> <head> <title>Curso Web Designer | Exercicio</title> </head> <body> <link rel="stylesheet" href="estilo.css"> <h1>oxente</h1> <table width="600" border=1 cellspacing="0" cellpadding="0"> <tr height="50"> <td bgcolor="f0a747" align="center" colspan="3"><b>Filosofia do Sucesso</td> </tr> <tr> <td bgcolor="b7e2f3" colspan="2"> Se voce pensa que e um derrotado,<br> voce sera derrotado<br> se nao pensar "quero a qualquer custo!"<br> nao conseguira nada.<br> Mesmo que voce queira vencer, <br> mas pensa que nao vai conseguir,<br> a vitoria nao sorrira para voce<br> </td> <td bgcolor="f8dca5" width="200"> </td> </tr> <tr> <td bgcolor="f8dca5"> </td> <td bgcolor="b7e2f3" align="right" colspan="2"> Se você fizer as coisas pela metade,<br> voce sera um fracassado.<br> Nós descobrimos neste mundo<br> que o sucesso começa pela intenção da gente<br> e tudo se determina pelo nosso espírito.<br> </td </tr> <tr> <td bgcolor="b7e2f3" colspan="2"> Se você pensa que é um malogrado,<br> voce se torna como tal.<br> Se almeja atingir uam posiçao mais elevada,<br> deve, antes de obter a vitoria,<br> dotar-se da conviccao de que<br> conseguira infalivelmente<br> </td> <td bgcolor="f8dca5" colspan="2"></td> </tr> <tr> <td bgcolor="f8dca5"> </td> <td bgcolor="b7e2f3"colspan="2"> A luta pela vida nem sempre e vantajosa<br> aos fortes nem aos espertos.<br> Mais cedo ou mais tarde, quem cativa a vitoria<br> e aquele que cre plenamente<br> Eu conseguirei!<br></td> </tr> <tr> <td bgcolor= "f0a747"><br></td> <td bgcolor="30ee5c"><br></td> <td bgcolor= "f0a747"><br></td> </tr> </body> </html>
  23. Estou tentando fazer um site e estou com um problema com as divs. Fiz o <header> e depois do conteúdo do header fiz uma <section>(não sei se é o mais adequado mas foi o que fiz), o problema é que o conteúdo da <section> está ficando por trás do <header>. Veja na imagem: Quando eu não coloco nenhuma propriedade na imagem, fica certo, a imagem não fica atrás do <header>, mas se eu mudar o tamanho, por exemplo, ela fica desse jeito aí.. Segue os códigos: HTML <!DOCTYPE html> <html lang="PT-BR"> <head> <title>Astronich</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-----------------------------------------------------------------> <link rel="stylesheet" type="text/css" href="./css/style.css"> <link rel="stylesheet" type="text/css" href="./css/fontImport.css"> <link rel="icon" type="imagem/png" href="./favicon.ico"/> <!-----------------------------------------------------------------> <script src="https://kit.fontawesome.com/8763e6d79f.js"></script> </head> <body> <header class="header"> <main> <div class="headerContent"> <div class="headerLogo"> <a href="./index.html" alt="Astronich"> <img src="./images/logoAstronich.png"> </a> </div> <hr class="hr"> <nav class="navigation"> <ul> <li><a href="./index.html">INÍCIO</a></li> <li><a href="#">PROJETOS</a></li> <li><a href="#">CONTATO</a></li> </ul> </nav> <nav class="navigationSocialNetwork"> <ul> <li><a href="#" alt="Facebook"><i class="fab fa-facebook-square"></i></a></li> <li><a href="#" alt="Instagram"><i class="fab fa-instagram"></i></a></li> <li><a href="#" alt="YouTube"><i class="fab fa-youtube"></i></a></li> </ul> </nav> <button class="buttonDiscord">DISCORD</button> </div> </main> </header> <section class="section1"> <div class="section1Image"> <img src="./images/socialgunLogo.png"/> </div> <div class="section1Description"> </div> </section> </body> </html> CSS *{ margin: 0% ; padding: 0% ; border: 0px ; box-sizing: border-box ; -webkit-box-sizing: border-box ; } main{ width: 1000px ; height: 100% ; margin: 0 auto ; float: left ; position: relative ; } body{ font-size: inherit ; font-family: 'Source Sans Pro' ; background-color: #0D0D0D ; } input, select, iframe{ border: none ; font-family: 'Source Sans Pro' ; } h1, h2, h3{ margin: 0px; padding: 0px ; } ol, ul{ list-style: none ; } a{ text-decoration: none ; color: inherit ; } .header a:hover{ color: #FF9500 ; } .header{ width: 100% ; height: 80px ; overflow-x: auto ; background-color: #181818 ; position: absolute ; align-content: center ; text-align: center ; /**/ display: flex ; flex-direction: row ; justify-content: center ; align-items: center ; overflow: hidden ; border-bottom: 0.1px solid #707070 ; } .headerContent{ height: 80px ; width: 100% ; position: absolute ; text-align: center ; display: flex ; align-items: center ; } .buttonDiscord{ border: none ; border-radius: 5px ; cursor: pointer ; font-family: 'Source Sans Pro' ; font-size: 15 ; padding: 12px 23px ; background: #FF9500 ; margin-left: 20px ; float: right ; text-decoration: none ; } .headerLogo img{ width: 60px ; height: 60px ; float: left ; } .hr{ height: 40px ; width: 1.1px ; border: 0.1px solid #707070 ; margin-left: 15px ; margin-right: 10px ; } nav{ float: right ; position: relative ; } nav ul li{ display: inline ; margin-right: 10px ; margin-left: 10px ; color: white ; font-size: 15 ; } .navigationSocialNetwork{ float: right ; margin-left: 400px ; } .section1{ background-color: #1D1D1D ; width: 100% ; height: 500px ; } .section1Image{ background-color: red ; width: 200px ; height: 200px ; } .section1 img{ width: 150px ; height: 150px ; } Agradeço se alguém puder me ajudar! Abraços!
  24. Olá, boa tarde Não entendo muito de programação mas me foi demandado um trabalho e tenho que cumprir. Estou com dificuldades em deixar uma pagina responsiva para mobile. Coloquei um rodapé na pagina mas quando reduzo o tamanho da tela o rodapé deixa o fim da pagina e passa a ocupar o meio dela. ja tentei de varias formas corrigir o erro mas nao faço ideia do que possa estar errado. Ps: uma coisa que notei no HTML da pagina é que o body nao ocupa a pagina toda e acho que por isso quando mudo a orientação da pagina o rodpé vai pro "final" do body. Agradeço quem puder ajudar <!DOCTYPE html> <head> <title>Idealine - Ponto Web</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link type="text/css" rel="stylesheet" media="screen and (max-width: 1440px)" href="./css/mobile.css"/> <link type="text/css" rel="stylesheet" media="screen and (min-width: 1440px)" href="./css/main.css"/> <body> <header class="azul"> <div class="logo"> <img src="./Img/idealine-branco.png" width="250" height="75"/></div> </header> <div class="faixa-laranja"></div> <br> <div class="texto"> <h2>Controle de Ponto Web</h2> <h6>Entre com seus dados de acesso</h6> </div> <div class="login"> <div id="secullum-login"></div> </div> <footer class="rodape"> <div class="redes-sociais"> <a href="https://www.facebook.com/idealineweb/"><img src="./Img/face.png" width="38px"></a> <a href="https://instagram.com/idealineweb?igshid=zxscoc85zgoi"><img src="./Img/insta.png" width="38px"></a> <a href="https://www.linkedin.com/company/idealine/?viewAsMember=true"><img src="./Img/linked.png" width="38px"></a> </div> </footer> </body> <script type="text/javascript" src="https://autenticador.secullum.com.br/Js/login-pontoweb-externo.js"></script> </html> body { margin: 0; } .azul { background-color: #002F60; width: 100%; height: 89px; margin: 0px } .login { display: flex; justify-content: center; padding-top: 135px; } .faixa-laranja { width: 100%; background-color:#FF736B; height: 10px; } .texto { font-family: "Open Sans", sans-serif; font-size: 22px; color: #002F60; text-align: center; line-height: 0.5px; padding-top: 8px; } #secullum-login { border:#002E5D solid 1px; position: absolute; } .login { display: flex; justify-content: center; align-items: center; padding-top: 180px; } .logo { padding: 8px; justify-content: center; display: flex; } .rodape { background-color:#002F60; width: 100%; bottom: 0; position: fixed; height: 50px; } .redes-sociais { display: flex; align-items: center; justify-content: space-evenly; padding-top: 6px; }
  25. Olá. Tenho pouca experiencia. Estou tentando fazer um teste aqui com media screen. Seguinte código: <style type="text/css"> @media (max-width: 800px) { #base { display: none; } } </style> Onde "#base" é uma simples tabela. Pelo que entendo "max-width: 800px" fará com que a "#base" desapareça em resolução máxima de 800px. Logo em resolução acima de 800px ela deve manter visivel. Até aí tudo normal. Se testo no PC que está com largura de 1024px ela continua visivel. Contudo ao testar em um celular onde a tela tem largura de 720px ela continua visivel. Link para teste www.upcomputadores.com.br/teste.html Em resumo: O que preciso é que essa table apareça em resolução acima de 800px e desapareça em resolução abaixo de 800px. Alguém sabe o que pode estar errado?

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

×
×
  • Criar novo...

Aprenda_a_Ler_Resistores_e_Capacitores-capa-3d-newsletter.jpg

ebook grátis "Aprenda a ler resistores e capacitores", de Gabriel Torres

GRÁTIS! BAIXE AGORA MESMO!