Pesquisar na Comunidade
Mostrando resultados para as tags ''Responsivo''.
Encontrado 7 registros
-
Boa noite galera! Tudo bom com vocês? Espero que sim! Eu estou num projeto de criar um Menu responsivo para um site. Mas não estou conseguindo finalizar o último passo e não faço a menor IDEIA de onde que eu to errando. Sou novo no Fórum, nem sei se era aqui que eu deveria postar isto. Se não for peço humildes desculpas, é que eu estou realmente desesperado já faz alguns dias que to nessa e não consigo resolver. Eu atribui o <Label> a um <Input>, na hora que eu dou check-in no <Label> deveria chamar o <Input:Checked>, mas nada ta acontecendo. Alguém tem uma luz???? Aqui ta o HTML: <!DOCTYPE html> <html lang="en"> <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"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> <title>NAVIGATION</title> </head> <body> <div class="container"> <nav> <div class="logo"> <h4>The Nav</h4> </div> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Projects</a></li> </ul> <input type="checkbox" id="bt_menu"> <label for="bt_menu">☰</label> </nav> </div> </body> </html> E aqui ta o CSS: *{ margin: 0px; padding:0px; box-sizing: border-box; } .container{ width: 100%; min-height: 70px ; border-style: solid; border-color: mediumblue; border-width: medium; } nav{ display: flex; justify-content: space-around; align-items: center; min-height: 70px; background-color: gray; font-family: 'poppins', sans-serif; } .logo{ color: rgb(226, 226, 226); text-transform: uppercase; letter-spacing: 5px; font-size: 20px; } .nav-links{ display: flex; justify-content: space-around; width: 30%; } .nav-links a{ color: rgb(226, 226, 226); text-decoration: none; letter-spacing: 3px; font-weight: bold; font-size: 14px; } .nav-links li{ list-style: none; } input{ /*display: none;*/ } label[for="bt_menu"]{ padding: 5px; background-color: gray; color: white; font-family: Arial; font-size: 30px; align-items: center; cursor: pointer; width: 50px; height: 50px; display: none; } @media(max-width:1024px){ .nav-links{ width: 60%; } } @media(max-width:768px){ #bt_ menu:checked ~ .nav-links{ margin-right: 0%; } body{ /*overflow-x: hidden;*/ } .nav-links{ position: absolute; right: 0px; height: 92vh; top:13vh; background-color: gray; display: flex; flex-direction: column; align-items: center; width: 50%; margin-right: -50%; transition: all 0.5s ease-in; } .nav-links li{ /*opacity:0;*/ } label[for="bt_menu"]{ display: block; } .nav-active{ transform: translateX(0); } }
-
Como faço para transformar uma galeria normal para uma responsiva? Segue o código: <!--CSS--> .div-galeria{ width:10%; height:10%px; overflow:scroll; border-style:solid; border-color:#000000; } .div-img-pr{ width:10%; height:50%; background-repeat:no-repeat; background-position:center; background-size:auto; border-style:solid; border-color:#000000; } <!--Galeria de fotos--> <div class="localgaleria"> <script> function div_tr_gt(u){ var gth_y = 'url('+u+')'; document.getElementById('i-div-imgh').style.backgroundImage = gth_y; } </script> <?php $pasta = 'imagens/fotos/cachacaria'; if ($handle = opendir($pasta)) { /* Esta é a forma correta de varrer o diretório */ while (false !== ($file = readdir($handle))) { /* Resolvido o bug aqui.. */ if ($file != "." && $file != "..") { echo' <div id="i-div-imgh" class="div-img-pr" style="background-image:url('.$pasta.'/'.$file.');"></div>'; break; } } closedir($handle); } echo'<div class="div-galeria"> <table> <tr>'; foreach(glob(''.$pasta.'/{*.jpg,*.gif}', GLOB_BRACE) as $image) { $img_p = "'"; $file = $fotos[] = $image; $gty_array = array("",$img_p,$file,$img_p); $rtyyui = implode("",$gty_array); echo'<td><img onClick="div_tr_gt('.$rtyyui.');" src="'.$fotos[] = $image.'" width="50px" height="50px"></td>'; } echo'</tr></table></div>'; ?> </div>
-
Eu tenho um projeto de site que tem que usar um sistema em ASP. NET Daí eu não quero usar uma versão mobile e uma desktop por causa de ser muito trabalhoso Então eu queria saber como como fazer para o site detectar quando é mobile e quando é desktop para aplicar o tamanho do site sendo tal site responsivo . Quando estiver no desktop é o menu completo e quando é mobile ele aparece o menu minimizado igual ao do site do G1 olha o link. http://g1.globo.com/index.html por exemplo Grato ...
-
O crescente aumento dos dispositivos móveis como tablet e smartphones revolucionou a forma com que os webdesigners programam os sites. Atualmente, ao criar um site deve-se pensar em pelo menos três resoluções diferentes, uma voltada ao smartphone, outra ao tablet e uma terceira para os notebooks e desktops. Nesse contexto, durante o desenvolvimento de um website vem sempre a dúvida na cabeça, como desenvolvo um website para dispositivos móveis? O que fazer? Fazer um site responsivo ou um site mobile? Antes de entrarmos na discussão, cabe conceituarmos dois termos muito falados quando o assunto é websites para dispositivos móveis. Diferença entre site responsivo e mobileVersão mobile:Consiste em criar um site único para notebooks e desktops e outro site exclusivo para celulares. Em suma, podemos dizer que serão criados dois websites, ou seja, teremos duas páginas distintas para cada link do site. Por exemplo teremos www.umsitea.com.br para desktop e mobile.umsitea.com.br para mobile. Em termos de programação, a diferença é que implementaremos uma biblioteca do JQuery conhecida como SiteMobile. Veja no código abaixo um exemplo: Vantagens da versão mobile: Maior liberdade no design: na medida em que você tem um site exclusivo para cada versão, você pode alterar com maior liberdade.Menor possibilidade de erros: desenvolvendo um site exclusivo, você investe todo o conhecimento naquela versão, assim as possibilidades de erro são menores e mesmo que elas ocorram, não vão atrapalhar a versão desktop.Requer menos conhecimento em programação: para desenvolver um site mobile, o programador não necessita ter um conhecimento muito aprimorado em HTML e CSS. O mesmo site que ele já faz para desktop ele fará bem parecido, porém com tamanho de fonte e ícones em tamanhos diferenciados.Versão responsiva: A versão de um site responsivo consiste numa série de ferramentas de programação no sentido de estilizar seu website para as diversas resoluções. A versão responsiva exige do programador um conhecimento profundo sobre HTML e CSS. A utilização de media queries é fundamental. Alguns exemplos do que aplica-se no site responsivo: Reparem nos detalhes, primeiro o uso de @media queries, ou seja, a mesma class container recebe atributos diferentes para resoluções diferentes. Segundo, a maior parte das divs recebe float: left e position: relative, esqueça position: absolute para sites responsivos, e as medidas são setadas em porcentagens. Além disso o html recebe no cabeçalho a meta name=viewport que tem a função de apoiar a abertura do site em todos os dispositivos conforme estipulado pelo CSS. Vantagens da versão responsiva: Melhor indexação pelos mecanismos de busca: os websites com a versão responsiva são melhor indexados pelos motores de busca como (Google, Yahoo e Bing). Eu comprovo isso com o alerta exibido pela ferramenta WebmasterTools do Google em relação a primeira versão do nosso site www.webdesignemfoco.com que possua uma versão mobile, ao contrário do que é hoje em que o site é responsivo. Reparem no alerta: Logo fica claro que os mecanismos de busca não gostam da idéia de se redirecionar um site para outro como ocorre nas versões mobile. Menor trabalho na confecção: fica claro que desenvolver um website é bem mais fácil que dois, então a versão responsiva é menos trabalhosa.Fácil manutenção: enquanto no site mobile é necessário alterar um texto duas vezes, por exemplo, afinal são dois websites, na versão responsiva tudo que alterar no site já será alterado automaticamente em todas as versões.Qual dos dois é melhor?Veja abaixo um comparativo feito pelos programadores da Webdesign em Foco. Mobile Responsivo Indexação no Google 7 10 Manutenção 5 10 Facilidade na solução de erros 9 8 Trabalho para confecção do website 5 9 TOTAL 26 37 Conclusão Apesar do site responsivo exigir do programador um conhecimento mais apurado no tocante a HTML e CSS, ele é o modelo ideal na atualidade. Vídeo-aula Confira também nossa vídeo-aula explicativa sobre esse tema:
-
Olá pessoal, tudo bem? Gostaria da ajuda de todos com o meu problema. Estou fazendo um site do zero, sei HTML, CSS e PHP do médio para o avançado, mas eu não me dou muito bem com o JS, e queria fazer um menu off-canvas igual a este aqui : http://foundation.zurb.com/docs/components/offcanvas.html O tipo do menu é o (Off-Canvas Multilevel Menu), que para o meu projeto seria o mais apropriado. PS: O site é responsivo Obrigado desde já.
-
RESOLVIDO!
-
Olá pessoal! Preciso da ajuda de vocês. É o seguinte: Tenho um Script com uma tabela para exibição em sequencia aleatória de imagens. Vou usá-la no seguinte site: http://ilhasexy.site...is-maranhao.html Porém, essa tabela (script) está hospedada no seguinte endereço: http://guiavirtualdocohatrac.com.br/. Para colocá-la no site no qual pretendo exibi-la, utilizei o seguinte iframe: <iframe width='658px' height='1200px' frameborder='0' src='http://guiavirtualdocohatrac.com.br'></iframe> Até aí tudo bem. O problema é que o site é responsivo (podem acessá-lo em dispositivos móveis para conferir), mas, nem o script, nem o iframe são responsivos. É ai que reside o problema, preciso que a tabela se comporte de modo responsivo no site. Assim, preciso que me ajudem a fazer com que esse iframe seja responsivo, ou o script seja responsivo. Espero que eu tenha sido claro! Aguardo o socorro de vocês!
