Ir ao conteúdo
  • Cadastre-se

teuzero

Membro Júnior
 Perfil  Explorar Conteúdo

  • Posts

    3

  • Cadastrado em

  • Última visita

Reputação

1
  1. teuzero
    no arquivo large.css acrescentei o código : .header-2 { background-color: #ffffff; width: 980px; margin: 0 auto; padding: 16px; } .busca input{ background-image: url('../img/icone-search.png'); background-repeat: no-repeat; height:15px; padding: 12px; width: 190px; margin-top: 0px; margin: -10px; background-position: 96%; border: 1px solid #d6d6d6; margin-left: 50px; } no small.css acrescentei : .header-2 { background-color: #ffffff; width: 980px; margin: 16 auto; padding: 12; } .busca input { background-image: url(../img/icone-search.png); background-repeat: no-repeat; height: 15px; padding: -12px; width: 80px; margin-top: 0px; margin: -10px; font-size: 10px; background-position: 96%; border: 1px solid #d6d6d6; margin-left: -1008px; } e no arquivo medium.css acrescentei: .header-2 { background-color: #ffffff; width: 980px; margin: 0 auto; padding: 16px; } .busca input{ background-image: url('../img/icone-search.png'); background-repeat: no-repeat; height:15px; padding: 12px; width: 190px; margin-top: -20px; background-position: 96%; border: 1px solid #d6d6d6; margin-left: -60px; }
  2. teuzero
    já consegui galera valeu.
  3. teuzero
    É 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.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades 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

Mais

×
×
  • Criar novo...