Biel.
-
Total de itens
732 -
Registro em
-
Última visita
Sobre Biel.
- Data de Nascimento 11/29/1997
Últimos Visitantes
4679502 visualizações
-
Boa noite a todos. direto ao ponto. Pessoal gostaria que ao redimensionar o browser a div aluno também fosse redimensionada SEM QUEBRAR e que permanecesse ao lado da div aprendiz Nota: Pessoal a div aluno tem que ter 200px sempre. Gostaria de obter o resultado desejado sem usar flexbox .Obrigado <!DOCTYPE html PUBLIC> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #principal_PAI{ padding:10px 10px 10px 10px; margin:0 auto; background-color:#090; height:400px; } #aprendiz{ min-width:200px; max-width:200px; height:100px; float:left; background-color:#FFF; } #aluno{ max-width:1024px; height:100px; float: left; background-color:#CCC; } </style> </head> <body> <div id="principal_PAI"> <div id="aprendiz">div aprendiz</div> <div id="aluno"> div aluno div aluno div aluno div aluno div aluno div aluno div aluno div aluno div aluno div aluno div aluno div aluno div aluno </div> </div> </body> </html>
-
obrigado william!
-
Pessoal o menu accordion abaixo está funcionando normalmente. Gostaria que o conteúdo das páginas fosse exibido quando o quando o cursor for pressionado e não quando o cursor passar sobre os links. Alguém tem alguma ideia aonde tenho que mexer no código ? <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> *{margin:0; padding:0; font-family:Verdana, Tahoma ;} body{ background-color:#CCC;} div#lateral{ margin:40px; max-width:240px; background-color:#999; border-radius:5px; padding:10px; } div.tete{ max-width:240px; } a.aprendiz:link, a.aprendiz:visited{ font-size:16px; font-weight:bold; margin-bottom:4px; background-color:#89B889; padding:10px 10px 10px 10px; display:block; text-decoration:none; } div.info{ max-width:240px; height:0px; overflow: hidden; -webkit-transition: height 1s; background-color:#FFF; padding-left:10px; } div.tete:hover div.info{ height:auto; } /* div.tete:target{ } */ ul{ padding:10px;} </style> </head> <body> <div id="lateral"> <!-----------------------------------------------> <div class="tete"> <a href="" class="aprendiz">pagina 1</a> <div class="info"> conteúdo da página 1<br> conteúdo da página 1<br> conteúdo da página 1<br> </div> </div> <!-----------------------------------------------> <div class="tete"> <a href="" class="aprendiz">pagina 2</a> <div class="info"> conteúdo da página 2 <br> conteúdo da página 2 <br> conteúdo da página 2 <br> </div> </div> <!-----------------------------------------------> <div class="tete"> <a href="" class="aprendiz">pagina 3</a> <div class="info"> conteúdo da página 3<br> conteúdo da página 3<br> conteúdo da página 3<br> </div> </div> <!-----------------------------------------------> <div class="tete"> <a href="" class="aprendiz">pagina 4</a> <div class="info"> conteúdo da página 4<br> conteúdo da página 4<br> conteúdo da página 4<br> </div> </div> <!-----------------------------------------------> </div> </body> </html>
-
titenq, obrigado por postar. Gostaria de obter o mesmo resultado do que você postou com position: fixed; e não position: relative;
-
Pessoal como faço para posicionar a div aprendiz na parte inferior da div principal. Nota: Gostaria de saber se tem como fazer isso sem usar Unidades de tamanho % em px ou qualquer outra <style> .principal{ width:500px; margin:0 auto; height: 200px; background-color:#990; } .aprendiz{ width:200px; height:50px; background-color:#CCC; position: fixed ; } </style> <div class="principal"> <div class="aprendiz"></div> </div>
-
Direto ao ponto. Pessoal, gostaria de exibir na tela o código javascript e HTML e não o resultado do código. Muitos exibem na tela o código javascript e HTML colocando span style pra tudo quanto é lado. Gostaria de exibir na tela o código javascript e HTML de uma forma prática ou menos gambiarrenta. Alguém tem alguma dica, idéia de como fazer isso? Obrigado amigo! <p id="aprendiz"></p> <script> var stringExemplo = "Aprendendo JavaScript"; var quantidade = stringExemplo.length; document.getElementById("aprendiz").innerHTML = quantidade; </script>
-
Obrigado ted K' . Vou ver com calma o que cada palavra faz. Valeu!
-
Olá Ted K' . Obrigado por sua pergunta! O código que postei gostaria que fosse complementado com códigos essenciais e não códigos desnecessários. Na internet tem praticamente tudo pronto que funciona normalmente. O problema é que essas COISAS que tem pronto e que funciona normalmente tem muito mais códigos desnecessários do que códigos essenciais. Códigos desnecessário atrapalha o aprendizado, atrapalha entender a lógica, você perde muito tempo tentando entender o impossível. E o pior: Quando você precisar mexer no código será um verdadeiro dilema! Por esses e outros motivos que é bom ter apenas o que realmente é necessário. Se você sabe resolver o meu problema com códigos essenciais e não códigos desnecessários, ficaria muito grato. Obrigado!
-
Direto ao ponto. Pessoal abaixo temos página 1 página 2 e página 3 . Quando clico na página 1 o conteúdo da página 1 é EXIBIDO normalmente e quando clico novamente na página 1 o conteúdo da mesma fica OCULTO . Gostaria que a página 2 e página 3 tivesse o mesmo resultado que a página 1. Nota: Estou tentando adicionar laço de repetição for no código abaixo para obter o resultado desejado, mas não estou conseguindo. <!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> .section{ width:500px; background:#C1C1C1;} #aprendiz { width: 100%; background-color:transparent; display:none; } .cabH1{ color:#09F; font-size:22px; font-weight:bold; cursor:pointer; background-color:transparent; } </style> </head> <body> <div class="section"> <h1 class="cabH1" onClick="exibe_e_oculta()">página 1</h1> <div id="aprendiz"> conteúdo da página 1 </div> </div> <div class="section"> <h1 class="cabH1" onClick="exibe_e_oculta()">página 2</h1> <div id="aprendiz"> conteúdo da página 2 </div> </div> <div class="section"> <h1 class="cabH1" onClick="exibe_e_oculta()">página 3</h1> <div id="aprendiz"> conteúdo da página 3 </div> </div> <script> function exibe_e_oculta() { var x = document.getElementById("aprendiz"); if (x.style.display == "none") { x.style.display = "block"; } else if (x.style.display == "block") { x.style.display = "none"; } else { x.style.display = "block"; } } </script> </body> </html>
-
Boa tarde a todos. Direto ao ponto. Pessoal gostaria que ao pressionar uma categoria qualquer todo seu conteúdo fosse exibido <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> *{margin:0; padding:0; } body{ font-family:Verdana; background-color:#EBEBEB;} .aprendiz{ max-width:400px; height: auto; background-color:#F6F6F6; border-radius:5px; } .tete{ width: auto; height: 0px; background-color:#9CF; color:#900; overflow:hidden; -webkit-transition: height 1s; } .categoria{ padding:10px 6px; background-color:#24c06f; display:block; } </style> </head> <body> <div class="aprendiz"> <!-----------------------------------------------> <span class="categoria">camisa P</span> <div class="tete"> camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa Pcamisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P camisa P </div> </div> </div> <br> <div class="aprendiz"> <!-----------------------------------------------> <span class="categoria">camisa M</span> <div class="tete"> camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M camisa M </div> </div> </div> </body> </html>
-
Boa noite a todos. direto ao ponto. Pessoal gostaria que ao encostar o cursor no menu cores | blusas o submenu fosse exibido. Não sei o que está faltando ou aonde estou errado. Vejam: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> * {margin:0;padding:0;} body{background: #f0f6fa ; font-size:20px; color:#343434; font-family:Verdana; } #menu{width: 600px; height:40px; margin:0 auto;} #menu li { color:#000; list-style:none; font-weight:bold; font-size:15px; } #menu li a { background:#FF0; line-height:30px; float:left; margin-left:2px; padding:0px 10px; text-decoration:none; } #menu li a:hover { background:#90F; /* roxo */ color:#FFF; /* branco */ } #box { border:2px solid #D40000; width:300px; background: #fff; display: none; /* position: absolute;*/ } #box .sub { background: #fff; } #box .sub li { font-size: 1.0em; font-weight: bold; background: #fff; } #box .sub li a { display: block; line-height:28px; padding:0 4px; color: #596774; width: 200px; border-bottom:1px dashed #666; margin:0 6px; } #box .sub li a:hover { background: #C60; /* laranja escuro */ color: #FFF; /* branco */ } </style> <title></title> </head> <body> <div id="menu"> <ul> <!-- ====================================================== --> <li><a href="#">cores</a> <div id="box"> <ul class="sub"> <li><a href="#">verde</a></li> <li><a href="#">azul</a></li> <li><a href="#">cinza</a></li> </ul> </div> </li> <!-- ====================================================== --> <li><a href="#" >blusas</a> <div id="box"> <ul class="sub"> <li><a href="#">blusa p</a></li> <li><a href="#">blusa m</a></li> <li><a href="#">blusa g</a></li> </ul> </div> </li> <!-- ====================================================== --> </ul> </div> </body> </html>
-
Boa tarde a todos. Direto ao ponto. Pessoal abaixo temos divUm e divDois. Quando a divDois encosta na divUm a divDois é jogada pra baixo. Gostaria que a divDois não quebrase/jogada pra baixo <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>.</title> </head> <style> *{margin:0; padding:0} #principal{max-width:1000px; margin:0 auto; height:auto;} #divUm{ width:300px; height:200px; float:left; background:#C1C1C1; } #divDois{ width:300px; height:200px; float:right; background:#979797; } .clear{ clear:both; height:10px; background:#646464;} </style> </head> <body> <div id="principal"> <div id="divUm">divUm</div> <div id="divDois">divDois</div> <div class="clear"></div> </div> </body> </html>
-
the Lars não funcionou. #img coloco aonde para que a coisa funcione? Note que postei (duas imagens) com tamanho diferentes. Se você puder pegar todo o código que postei e fazer os devidos ajustes para que a coisa funcione dar forma que quero, ficaria muito grato. Obrigado!
-
Boa tarde a todos. Direto ao ponto. Pessoal quando redimensiono o browser firefox a img_dois é jogada pra baixo. Gostaria que a img_dois não fosse jogada pra baixo quando o browser fosse redimensionado Estou usando responsive design mode do firefox para redimensionar a tela <!DOCTYPE html > <html > <head> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css" media="screen"> *{padding:0;margin:0;} #topo_VJTSR{width: auto; float:left; background:#360;} #topo_DCFWS{width:auto; float: left; background:#360; } .img_um{width:470px; height:135px; } /* 470 + 179 = 649px */ .img_dois{width:179px; height:135px; } @media (max-width:470px) { .img_um {width: 100%; height: 100%; } } @media (max-width:179px) { .img_dois {width: 100%; height: 100%; } } </style> </head> <body> <div id="topo_VJTSR"> <img src="imagem1.png" class="img_um" /></div> <div id="topo_DCFWS"><img src="imagem2.png" class="img_dois" /></div> </body> </html>
-
Omar ainda não é isso. Faça o seguinte: tire o margin-left:30px do exemplo que postei e sem seguida redimensione a tela até chegar a 100px .. Você notará que a imagem/logo é redimensionada de forma suave, sem nenhum tranco . É isso que quero fazer , mas não estou conseguindo . Quero que o margin-left:30px; exista antes de chegar nos 500px e depois também Nota: Estou usando responsive design mode do firefox para redimensionar a tela para fazer os ajustes no css
