Jump to content

Search the Community

Showing results for tags 'responsivo'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 68 results

  1. Olá! Bom dia! Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva) Teria alguma forma de corrigir isso? O codigo esta assim: <div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div> O CSS: .cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;} Obrigada
  2. guirufino

    tentando criar site responsivel

    Site:http://platformwar.epizy.com Estou tentando fazer um site responsivo, mas estou tendo problemas com o (height:) o height: da galeira nao quer funcionar com a " % " não funciona, ja procurei de tudo na net e nao achei resposta. Eu peguei o código da galeira na internet, e comecei a modificar... só que tem esse código: Ta no Hmtl: <script> $('#games').coinslider({ width : "100%" , height: 500 , navigation : false , delay : 5000 , navigation: true , effect: 'rain' } ) ; </script> Aqui to tentando colocar 50% mais não funciona... eu queria que ele diminui-se confirme diminui a tela. (não sei nada de javascript). Se precisarem de algum Código eu mando CSS: #games {position: relative; margin-top: 70px; z-index: 0; margin-left: auto; margin-right: auto; } .coin-slider {float: none; top:50%; left:50%; text-align: center; } .coin-slider { overflow: hidden; zoom: 0; position: static; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons {font-size: 0%; padding: 1%; float: left; position: relative; } .cs-buttons a {margin-left:5px; background:url(../cores-roleta/contadorcompleto.png); height: 29px; width: 29px; float: left; text-indent: -1000px;} .cs-active { background:url(../cores-roleta/contador10.png); height: 29px; width: 29px; float: left; } .cs-title { width: 100%; padding: 2%; background-color:#000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: Transparent; color: #000; padding: 0px 10px; }
  3. Boa noite, eu tenho um site em betheme e queria saber se é possível remover a responsividade apenas de uma página. Eu tenho uma pagina com o valor dos serviços porem são 3 colunas e quando abre no celular fica totalmente desorganizado e não da para entender referente a que se trata os valores. Alguem consegue me ajudar nisso? Link da página: https://azuresolutions.com.br/tabela-de-precos/
  4. Ewfc2005

    Transformar site em responsivo

    Eu sou um programador amador, e ainda estou aprendendo programação, comecei um site, mas esqueci de faze-lo para ser responsivo, agora preciso de ajuda pois nao consigo deixa-lo responsivo Codigo HTML Codigo CSS Ele está mal feito, ainda tenho que arrumar muita coisa, se alguem conseguir me ajudar e dizer como ele pode ficar responsivo eu Agradeço.
  5. Meu site WordPress não está responsivo no celular, e não consigo resolver esse erro. Alguém pode me ajudar? http://moveiscomplemento.com/categoria-produto/beleza-e-saude/
  6. Pessoal, boa noite! Gostaria de mostrar 3 colunas e 6 produtos no celular utilizando o shortcode do woocommerce na página principal. Criei um site de Brechó pra minha namorada usando o Wordpress + woocommerce. Tentei usar os shortcodes do woocommerce para chamar os produtos pra página principal. Até aqui tudo bem, porém quando acesso o site pelo celular a loja mostra duas colunas mesmo eu utilizando [products limit="6" columns="3"]. Procurei bastante nas internet e o que eu consegui foi copiar o HTML usando o inspector do google e inserindo num bloco do Elementor (construtor de página que uso) e mudando algumas coisinhas no código. A primeira vista está funcionando mas quando acrescento um produto ele não atualiza no celular porque não é um shortcode. Alguém pode me ajudar? Sou iniciante na programação. Segue o site: www.brechodaelyevariedades.com.br Obrigado!
  7. HTML <!DOCTYPE hmtl> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>DaHora Software</title> <link rel="stylesheet" href="css/styles.css"> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#subirTopo").hide(); jQuery('a#subirTopo').click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 800); return false; }); jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 200) { jQuery('#subirTopo').fadeIn(); } else { jQuery('#subirTopo').fadeOut(); } }); }); </script> </head> <body> <header> <input type="checkbox" id="btn-menu"> <label for="btn-menu"><img src="img/menu_icon_verde.png" width="30" height="30"></label> <div class="logo"> <a href="#"><img src="img/logo.png" width="250" height="150"></a> </div> <nav class="menu"> <ul> <li><a href="#empresa">NOSSA EMPRESA</a></li> <li><a href="#cursos">CURSOS</a></li> <li><a href="#sites">SITES</a></li> <li><a href="#sistemas">SISTEMAS</a></li> <li><a href="#contato">FALE CONOSCO</a></li> </ul> </nav> </header> <div class="empresa"> <h1 id="empresa"> NOSSA EMPRESA </h1> </div> <div class="cursos"> <h1 id="cursos"> CURSOS </h1> </div> <div class="sites"> <h1 id="sites"> SITES </h1> </div> <div class="sistemas"> <h1 id="sistemas"> SISTEMAS </h1> </div> <div class="contato"> <h1 id="contato"> FALE CONOSCO </h1> </div> <footer> <a id="subirTopo"> <img src="img/seta.png"” alt=”some text” width="100" height="100"> </a> </footer> </body> </html> CSS *{ margin: 0; padding: 0; } body{ font-family: 'Poppins', sans-serif; } header{ width: 100%; height: 150px; background-color: black; } #btn-menu{ display: none; } header label{ display: none; width: 30px; height: 30px; padding: 10px; border-right: 1px solid green; } header label:hover{ cursor: pointer; background: rgba(0,0,0,0.3); } .menu ul{ margin: 0; list-style: none; padding: 0; display: flex; justify-content: flex-end; align-items: flex-end; } .titulo li a{ font-family: 'Alfa Slab One', cursive; font-size: 50pt; text-decoration: none; color: darkgreen; padding: 50px 50px; } .menu li{ border-right: 1px solid #fff; } .menu li a{ display: block; padding: 15px 20px; color: #fff; text-decoration: none; font-family: 'Alfa Slab One', cursive; font-size: 12pt; } . menu li:hover{ background: rgba(0,0,0,0.3); } a img{ display: inline-flex; } @media (max-width:768px){ header label{ display: block; } .menu{ position: absolute; background-color: #000; width: 70%; margin-left: -70%; transition: all 0.5s; } .menu ul{ flex-direction: column; } .menu li{ border-top: 1px solid #fff; } .logo a{ justify-content: center; align-items: center; display: inline-flex; } header{ height: 50px; background-color: black; } #btn-menu:checked - .menu { margin-right: 70px; } } /* a{ margin: 20px; color: #fff; text-decoration:none; font-family: font-family: 'Staatliches', sans-serif; font-size: 18pt; } */ .empresa{ background-color: #fff; width: auto; height: 500px; display: flex; padding: 0px 50px; } .cursos{ background-color: #8FBC8F; width: auto; height: 500px; padding: 0px 50px; } .sites{ background-color: #fff; width: auto; height: 500px; padding: 0px 50px; } .sistemas{ background-color: #8FBC8F; width: auto; height: 500px; padding: 0px 50px; } .contato{ background-color: #fff; width: auto; height: 500px; padding: 0px 50px; } footer{ background-color: #000000; width: auto; height: 200px; padding: 0px 50px; } #subirTopo { background-repeat: no-repeat; bottom: 20px; right: 20px; cursor: pointer; padding: 0px; position: fixed; }
  8. Estou adaptando o site de um cliente de forma a torná-lo responsivo. Um fornecedor já me passou os arquivos referentes ao layout responsivo e estou tendo de adaptar ao meu site. Contudo, algumas páginas do meu site dão problema. Em uma delas, eu uso muito a função feita em javascript dialog. Acredito que seja algum conflito nos meus arquivos JS dentro do head.php head.php original: <?php if ($dados['pagina']['header'] == true) { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="<?php echo $dados['pagina']['raiz']?>images/layout/favicon2.ico"> <title>Portal do Investidor Intercity</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.spin.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/flashcanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/canvas2png.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.multiselect.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/functions.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/principal.js"></script> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>css/jquery.multiselect.css" type="text/css" media="screen"/> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.cookie.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/jquery.flot.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/excanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.dataTables.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.twosidedmultiselect.js"></script> <script type="text/javascript"> jQuery.browser = {}; // Script incluído em 21/12/2018 (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })(); </script> <?php if (count(Loader::retornaJs()) > 0) { foreach(Loader::retornaJs() as $js) { ?> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']; ?>js/<?php echo $js; ?>.js"></script> <?php } } ?> <script type="text/javascript"> <?php if (count(Loader::retornaJsDados()) > 0) { foreach(Loader::retornaJsDados() as $jslib) { ?> <?php echo $jslib; ?> <?php } } ?> </script> <?php if (count(Loader::retornaCss()) > 0) { foreach(Loader::retornaCss() as $css) { ?> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']; ?>css/<?php echo $css; ?>.css" type="text/css" /> <?php } } ?> <style type="text/css"> <?php if (count(Loader::retornaCssDados()) > 0) { foreach(Loader::retornaCssDados() as $csslib) { ?> <?php echo $csslib; ?> <?php } } ?> </style> </head> <?php }?> head.php adaptado, onde fiz a inclusão de novos scripts e novos stylesheets (links): <?php if ($dados['pagina']['header'] == true) { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <html class="wide wow-animation smoothscroll scrollTo" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="<?php echo $dados['pagina']['raiz']?>images/layout/favicon2.ico"> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="keywords" content="SANA design multipurpose template"> <meta name="date" content="Dec 26"> <link rel="icon" href="http://www.investidorintercity.com.br/images/layout/favicon2.ico" type="image/x-icon"> <!-- Stylesheets--> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Oswald%7CLato:400italic,400,700"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>Portal do Investidor Intercity</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.spin.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/flashcanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/canvas2png.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.multiselect.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/functions.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/principal.js"></script> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>css/jquery.multiselect.css" type="text/css" media="screen"/> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.cookie.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/jquery.flot.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/excanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.dataTables.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.twosidedmultiselect.js"></script> <?php if (count(Loader::retornaJs()) > 0) { foreach(Loader::retornaJs() as $js) { ?> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']; ?>js/<?php echo $js; ?>.js"></script> <?php } } ?> <script type="text/javascript"> <?php if (count(Loader::retornaJsDados()) > 0) { foreach(Loader::retornaJsDados() as $jslib) { ?> <?php echo $jslib; ?> <?php } } ?> </script> <?php if (count(Loader::retornaCss()) > 0) { foreach(Loader::retornaCss() as $css) { ?> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']; ?>css/<?php echo $css; ?>.css" type="text/css" /> <?php } } ?> <style type="text/css"> <?php if (count(Loader::retornaCssDados()) > 0) { foreach(Loader::retornaCssDados() as $csslib) { ?> <?php echo $csslib; ?> <?php } } ?> </style> </head> <?php }?> Pelo console no Chrome, ele me avisa o seguinte: Uncaught TypeError: $(...).dialog is not a function O que eu poderia fazer pra não ter conflitos como esse? Já tentei a função noConflict(), mas não sei se fiz ela corretamente. Quem pode me ajudar?
  9. RafsFernandes

    Mapeamento de Imagem

    Boa noite. Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png. Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página. Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. Lembrando que a imagem está unificada, conforme código abaixo: <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>
  10. RafsFernandes

    Mapeamento de Imagem

    Boa noite. Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png. Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página. Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. Lembrando que a imagem está unificada, conforme código abaixo: <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>
  11. RafsFernandes

    Mapeamento de Imagem

    Boa noite. Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png. Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página. Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. Lembrando que a imagem está unificada, conforme código abaixo: <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>
  12. RafsFernandes

    Mapeamento de Imagem

    Boa noite. Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png. Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página. Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. Lembrando que a imagem está unificada, conforme código abaixo: <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>
  13. RafsFernandes

    Mapeamento de Imagem

    Boa noite. Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png. Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página. Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. Lembrando que a imagem está unificada, conforme código abaixo: <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>
  14. RafsFernandes

    Mapeamento de Imagem

    Boa noite. Estou com a seguinte ideia em um projeto: https://i.imgur.com/ylrv3Zc.png. Gostaria de saber se há alguma forma de mapear as folhas, para que quando o usuário clicar, redirecionar para outra página. Já tentei mapear pela tag <map>, porém, o mapeamento não fica responsivo. Lembrando que a imagem está unificada, conforme código abaixo: <div class="container"> <div class="descricoes text-center"> <h1 class="text-nomes-main">Clique nas folhas para selecionar a Deficiência.</h1> <img src="../contents/imagens/folhas_deficiencia.png" width="500" height="500" class="img-responsive img-centro"> </div> </div>
  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 nevegador 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. gilbertjuniors

    Design responsivo - Identificando Devices

    Pessoal, boa noite. Estou estudando sobre design responsivo e veio uma grande duvida: Temos TVs, (24 polegadas ou mais), notebooks (mais comumente 14 ou 15 polegadas), tablets (dentre varias telas temos 8 ej 10 polegadas) e celulares (geralmente 4,alguma coisa ou 5,alguma coisa em polegadas) Todos podem ter resoluções Full HD por exemplo mas com tamanho de telas muito diferentes (densidade de pixels por polegada diferetes) Então como um site que eu crio identifica o tamanho de tela e garante que fontes, imagens e botões fiquem acessíveis em todos os devices? Creio que identificar a resolução de tela não seja o suficiente, como fazer então?
  17. pattylpaz

    Problemas no Mobile

    Bom dia Pessoal tudo bem? Eu coloquei um código no meu site para inserir as bandeiras para traduzir para outros idiomas, no desk em ficou normal e deu certo, mas no mobile as bandeiras ficaram muito grandes. Vocês sabem o que faltou no código para me ajudar, por favor?
  18. JoaoVituBR

    Grid se organizar

    Olá, Gostaria de saber como eu poderia fazer para que o grid com uma linha que contem uma imagem maior posse comportar duas menores a sua frente! Exemplo de como está: <--AUMENTOU A DIV! Exemplo de como eu gostaria que ficasse: Codigo Usado: (Bootstrap)
  19. Pitag346

    Sites Responsivos

    Olá pessoal, tudo bem com vocês ??? Espero que sim... Estou um problema com meu site, tentei montar ele com responsividade, mas não obtive sucesso. Alguém que tenha bastante conhecimento nessa área teria um site de estudos/apostilas para indicar ? Obrigado.
  20. ELIZANDRO MARCELLINO

    WHILE OU FOR PHP

    $sql = mysqli_query($db, "SELECT * from areas"); $sql4 = mysqli_query($db, "SELECT MAX(ID_AREA) as maxarea FROM `areas`"); $i=0; echo "<div class='table-responsive'>"; echo "<table class='table'>"; echo "<thead>"; echo "<tr>"; echo "<th scope='col'>#</th>"; echo " <th scope='col'>ID_Area</th>"; echo " <th scope='col'>Area</th>"; echo " <th scope='col'>DatadeCadastro</th>"; echo " <th scope='col'>Comentario</th>"; echo "</tr>"; echo "</thead>"; /*BUSCA NA TABELA OS DADOS PARA CARREGAR O GRID USANDO UM LOOP PARA CADA LINHA DO SELECT*/ //Se tiverem enviado um valor, confere se ele é par ou impar while($exibe = mysqli_fetch_assoc($sql)){ $i = $exibe["ID_Area"]; echo "<tbody class='thead-light'>"; echo "<tr><td><input type='radio' name='radio' value='$i' </td>"; echo "<td>". $exibe["ID_Area"]."</td>"; echo "<td>". $exibe["Area"]."</td>"; echo "<td>". $exibe["DatadeCadastro"]."</td>"; echo "<td>". $exibe["Comentario"]."</td>"; echo "</tr>"; echo "</tbody>"; } Tenho o seguinte codigo acima em html/php que monta um grid puxando os dados do banco de dados, tudo funciona bem , porem queria uma função de PAGINAÇÃO NO GRID <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> Minha pergunta e como fazer o php primeiro Limitar a seleção do banco de dados de 5 em 5 por pagina, sem necessidade de criar outros links , gostaria que ele só atualiza-se o grid utilizando o nav para navegar entre as paginas, me utlizei de alguns loopins mais nada adiantou alguém tem alguma luz
  21. Bom dia a todos. Faz algum tempo que não publico nenhuma dúvida aqui no fórum e hoje preciso da ajuda de vocês. Bom, recentemente eu fiz um site e nesse final de semana o proprietário do site pediu pra que eu fizesse o responsivo do mesmo, só que eu nunca fiz site responsivo (nenhum cliente pediu antes), ou seja, não sei como se trabalha com as várias resoluções de celulares e tabletes. Tenho algumas dúvidas do tipo: Preciso desenvolver outro site - com as mesmas informações obviamente - pra ser acessado via tablet/smartphone? Como faço pra ajustar o site nas diversas resoluções de tablets/smartphones? Existe alguma função que identifica qual dispositivo está fazendo o acesso e encaminha para a pasta mobile, por exemplo? Existe alguma ferramenta que eu posso testar como vai ficar o site em diferentes dispositivos? O custo pra desenvolver o responsivo deve ser aproximado ao valor cobrado do site ou costuma-se não cobrar pelo responsivo? Acho que essas são as dúvidas primordiais pra eu iniciar esse trabalho. Se alguém puder respondê-las ou me indicar artigos que ajudem nessas dúvidas, eu agradeço muito. Muito obrigado a todos.
  22. Estou com um problema na hora de deixa o site responsivo, preciso que quando o meu menu for clicado e a div header descer, as setas do slider que estão definidas com position absolute devem descer junto com o slider, não invadindo o espaço do menu. Se elas estivesse dentro do meu container slider funcionaria, porém estou utilizando o plugin jquery cycle e tudo que ponho dentro da container-slider se torna um elemento de slide. <div class="topoResponsive"> <div class="header"> <div class="container-logo"> <a href="index.php"><div class="logo"></div></a> </div> <div class="container-menu"> <img class="menuToogle" src="assets/img/menu-toogle.png" alt=""> <ul class="nav"> <li><a href="sobre-nos.php">Quem somos</a></li> <li><a href="pecas-agricolas.php">Peças agrícolas</a></li> <li><a href="pecas-inox.php">Peças Inox</a></li> <li class="mostrarMenu"><a href="contato.php">Contato</a></li> <li><a target="_blank" href="https://www.google.com.br/search?biw=1280&bih=566&tbm=nws&ei=AhK8WpKCAsiJwgSV3bPQBQ&q=agroneg%C3%B3cio&oq=agroneg%C3%B3cio&gs_l=psy-ab.3..0l10.3154.5498.0.5666.11.7.0.4.4.0.137.722.0j6.6.0....0...1c.1.64.psy-ab..1.10.737....0.HM95MZwK05g">Notícias</a></li> </ul> </div> </div> </div> <div class="slider"> <figure> <img src="assets/img/slide2.png" /> <figcaption> <p>Indústria e comércio de peças</p> <div class="btn-slider"><a href="pecas-inox.php">Clique e conheça</a></div> </figcaption> </figure> <figure> <img src="assets/img/slide1.png" /> <figcaption> <p>Solicite agora um orçamento!</p> <div class="btn-slider"><a href="contato.php">Entrar em contato</a></div> </figcaption> </figure> </div> <a class="arrowsSlider" id="prevSlider" href=""><img width="60px" src="assets/img/LeftArrow.png"/></a> <a class="arrowsSlider" id="nextSlider" href=""><img width="60px" src="assets/img/rightArrow.png"/></a> /* CONTAINER SLIDER */ .slider{ position: relative; height: auto; width: 100%; z-index: 1; margin: 0 auto; } .slider img { width: 100%; height: auto; } .arrowsSlider{ position: absolute; height: 100px; top: 50%; margin-top: -50px; z-index: 2; opacity: 0.5; transition: 0.5s; } .arrowsSlider:hover{ opacity: 1; } #nextSlider{ right: 0; } .slider figcaption{ position: absolute; text-align: center; color: #FFF; top: 50%; left: 50%; width: 400px; height: 150px; margin-left: -200px; margin-top: -75px; z-index: 2; } .slider figcaption p{ font-family: Myriad; font-size: 40px; font-weight: bold; } .btn-slider{ position: absolute; width: 210px; height: 40px; left: 50%; margin-left: -105px; border: 2px solid #FFF; transition: 0.5s; text-align: center; cursor: pointer; } .btn-slider a { font-family: Helvetica; font-weight: bold; color: #FFF; line-height: 40px; text-decoration: none; } .btn-slider:hover{ background: #FFF; } .btn-slider:hover a{ color: #4F4F4F; } PRINT DO PROBLEMA: https://imgur.com/a/FuYLB
  23. Olá, bom dia! As imagens do meu site ficam corretas, nas proporções definidas, quando testo localmente (inspecionado a página no navegador) , porém quando fiz um teste no servidor online e verifiquei em outros monitores "reais" as imagens ficam maiores que o tamanho máximo definido (e elas aumentam desproporcionalmente), em algumas resoluções. Por exemplo: eu testei em monitores 17 e 19 polegadas (ambos com a resolução padrão 1024 X 768 px, tbm testei outras resoluções nessa telas) e as imagens ficaram "esticadas" horizontalmente e achatadas verticalmente, mas nessa mesma resolução, no computador onde fiz essas páginas (com resolução padrão de 1366 X768 px tela de 15"), as imagens ficam corretas (simulando uma tela na resolução de 1024X768px). Em telas menores que 15" esta tudo certo tbm. Defini um tamanho máximo para as imagens, porém quando em telas maiores elas aumentam muito e desproporcionalmente (mesmo com resolução que já esta definida no css) : img{ width:100%; height:auto !important; max-width:400px; max-height:300px; } @media screen and (max-width: 1024px){ .img_textos{ width:100%; max-width:300px; } Teria alguma forma, de quando o site, chegar a resolução máxima definida (1366X768 px) as imagens e o site em geral não aumentar além do estabelecido para essa resolução (sendo esse o limite máximo)? Obrigada!
  24. Artes Ussler

    Posicionamento de Div's

    Olá Preciso de uma ajudinha para resolver uma questão de posicionamento de divs. Fiz umas imagens para ajudar a explicar. Nesta primeira aparecem as divs em seus locais padrões com a janela do navegador totalmente maximizada: Minha intenção agora é que a Div4 fique entre a div2 e div3 quando a tela for reduzida (um tablet, por exemplo), ficando assim: Será que alguém pode me ajudar a montar o css para isso? Ficarei grato por qualquer dica.
  25. giovannaalves

    Problemas no responsivo

    Um cliente pediu pra eu deixar o site dele responsivo, o site tá todo bagunçado, todo mal feito e esquisito, porém, fiz algumas coisas para deixar responsivo. O responsivo funciona bem quando diminuo a tela do navegador, mas quando testo no inspecionar ou no celular, ele simplesmente não funciona. Alguém me ajudaaaa
×

Important Information

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