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 62 results

  1. 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; }
  2. 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?
  3. 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>
  4. 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>
  5. 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>
  6. 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>
  7. 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>
  8. 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>
  9. 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!
  10. 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?
  11. 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?
  12. 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)
  13. 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.
  14. 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
  15. 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.
  16. 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
  17. 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!
  18. 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.
  19. 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
  20. MateusFreitas01

    Orientação Landscape com Bootstrap

    Poderiam me dizer se existe alguma forma de fazer a orientação em landscape utilizar as classes do padrão sm do Bootstrap ao invés de xs? Obrigado.
  21. meu site no Google Chrome fica normal, mas no firefox ele quebra
  22. Coloco 3 imagens com links no inicio do site, coloquei pra ser responsivo, mas quando diminuo a tela ela fica toda bugada, as imagens acabam ficando uma por cima da outra. E preciso que as imagens fiquem no centro da tela, uma do lado da outra, e quando a tela diminuir elas simplesmente continuem uma do lado da outra. <div class="row"> <div class="col-xs-4 col-md-4 col-sm-4"> <ul> <li class="lipostagem"><a href="PostagemTeste.html"><img class="img2 img-responsive" src="img/azul/teste.png" alt="Sucesso"> <span class="post">Postagem</span></a></li> </ul> </div> <div class="col-xs-4 col-md-4 col-sm-4"> <ul> <li class="liviagem"><a href="#"><img class="img2 img-responsive" src="img/cinza/cinza1.png" alt="Sucesso"><span class="viagem">Viagem</span></a></li> </ul> </div> <div class="col-xs-4 col-md-4 col-sm-4"> <ul> <li class="lientregue"><a href="EntregueCerto.html"><img class="img2 img-responsive" src="img/cinza/cinza1.png" alt="Sucesso"><span class="entregue">Entregue</span></a></li> </ul> </div> </div> CSS: .img1{ float: right; } .img2{ float: none; } .img3{ float: right; } .flex-centralizado { display: flex; justify-content: center; } li{ list-style-type: none; }
  23. Fernando_Henrique

    Página de redirecionamento não responsiva

    Boa tarde amigos, estou tentando fazer uma página html para que ao ser acessada redirecione para outra página, mas mantenha a url dela. Para isso usei um frame. Bom, de começo funcionou legal, porém ao testar no navegador do celular a página deixa de ficar responsiva, nisso acredito que seja por conta do frame. Deixo abaixo o código usado para que possam me ajudar. Desde já. Agradeço. <frameset rows="0,*" border="0"> <frame name="header" scrolling="no" noresize target="main"> <frame name="main" src="http://meusite.com.br/"> <noframes> <body> </body> </noframes> </frameset>
  24. Estou com muita dificuldade em deixar todas as thumbnail do index com o mesmo tamanho e responsivas. Encontrei o BFI_Thumb.php e ele funciona perfeitamente porém não deixa as imagens responsivas. ps: sou nova em PHP/HTML/Css.
  25. do_morro

    Ajustar duas DIVs

    Bom dia, Sou novo por aqui. Inicialmente gostaria de parabenizar pelo trabalho desse forum. Estou criando um site que tem dois problemas básicos. O primeiro é que o logotipo à esquerda precisa diminuir de tamanho quando o site for aberto em um celular, pois senão o logo fica em cima do banner. E o segundo é que no desktop o banner não fica alinhado com a div de baixo. Se mexo em um não fica bom no outro. Estou tentando inserir regras para o css ficar responsivo mas parece que não obedece. O site é o http://www.credifree.com.br/teste4/index.html Alguém pode me dar uma luz? Obrigado Paulo
×

Important Information

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