Search the Community
Showing results for tags 'div'.
Found 173 results
-
Olá, sou programador iniciante e tenho uma dúvida que, imagino eu, ser simples, porém não estou conseguindo achar uma solução. Seguinte: no site a seguir, preciso que "Avaliação dos Clientes" e o quadro que a segue, fiquem logo em seguida da imagem do celular (sem aquele espaço em branco entre eles). A primeira "row" possui 3 divs - a com a imagem do celular, a com o nome do modelo, preço, e avaliação com as estrelas e a div com os detalhes do produto - porém, a ultima div, ocupa o dobro do espaço vertical das demais, sendo assim, aumentando o espaço da "row" e deslocando o quadro das avaliações mais para baixo. Eu já tentei colocar a div das avaliações dentro do "row" com as 3 outras divs, porém o que acontece é apenas aumentar o tamanho da "row" de cima, mas continuar o espaço em branco que quero preencher. O que posso fazer? (peço desculpas por qualquer erro em termos técnicos). Segue abaixo as imagens de como esta / como deveria estar e as divisões das divs
-
Bom dia. Estou com um problema com uma DIV, não esta espaçando da anterior, e não estou conseguindo arrumar, acredito estar passando pequeno detalhe. Se alguém puder me dar uma força agradeço. Ainda estou limpando o código! Div em questão: <?php if ($data['imovel']->imovel_preco_condominio >0): ?> <div class="heading-title heading-title-sm bg-white"> <h2>OUTROS VALORES</h2> </div> <div class="visao"> <div class="titulo">Condomínio</div> <div class="texto"> <?= Filter::moeda($data['imovel']->imovel_preco_condominio); ?> </div> </div> <?php endif; ?> <?php if ($data['imovel']->imovel_preco_iptu >0): ?> <div class="visao"> <div class="titulo">IPTU</div> <div class="texto"> <?= Filter::moeda($data['imovel']->imovel_preco_iptu); ?> </div> </div> <?php endif; Segue o código completo: <!DOCTYPE html> <style> .visao{ border: 5px solid #e3dfdf; width: 25%; float: left; box-sizing: border-box; margin-bottom: 60px; margin-top: 5px; } .visao-financ{ border: 5px solid #e3dfdf; width: 30%; box-sizing: border-box; margin-bottom: 60px; margin-top: 5px; margin-left: auto; margin-right: auto; } .visao-preco{ border: 5px solid #e3dfdf; width: 30%; box-sizing: border-box; margin-bottom: 60px; margin-top: 5px; margin-left: auto; margin-right: auto; } .titulo{ background: blue; color: #fff; text-align: center; font-size: 16px; } .titulo-financ{ background: blue; color: #fff; text-align: center; font-size: 20px; } .texto{ padding: 10px; text-align: center; color: black; font-size: 16px; } @media screen and (max-width: 850px) { .visao { width: 50%; } } @media screen and (max-width: 480px) { .visao { width: 50%; } } @media screen and (max-width: 480px) { .visao-preco { width: 100%; } } </style> <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,chrome=1"> <!--SEO--> <meta name="application-name" content="<?= $data['config']->config_nome; ?>" /> <meta name="description" content="<?= $data['config']->config_seo_desc; ?>" /> <meta name="keywords" content="<?= $data['config']->config_seo_keys; ?>" /> <meta name="author" content="<?= $data['config']->config_seo_autor; ?>"> <meta name="title" content="<?= $data['imovel']->tipo_nome; ?> em <?= $data['imovel']->cidade_nome; ?> - <?= $data['imovel']->bairro_nome; ?> | <?= $data['config']->config_nome; ?>" /> <link rel="canonical" href="<?= Http::base() ?>/detalhes-do-imovel/<?= $data['imovel']->cidade_url; ?>/<?= $data['imovel']->bairro_url; ?>/<?= $data['imovel']->imovel_id; ?>" /> <link rel="shortcut icon" href="<?= Http::base() ?>/midias/icon/<?= $data['config']->config_icon; ?>"> <title><?= $data['config']->config_nome; ?></title> <meta property="og:image" content="<?= Http::base(); ?>/midias/thumb.php?zc=1&w=1400&h=768&src=fotos/<?= $data['imovel']->foto_url; ?>" /> <meta property="og:type" content="article" /> <meta property="og:description" content="<?= strip_tags($data['imovel']->imovel_descricao); ?>" /> <meta property="og:url" content="<?= Http::base() ?>/detalhes-do-imovel/<?= $data['imovel']->cidade_url; ?>/<?= $data['imovel']->bairro_url; ?>/<?= $data['imovel']->imovel_id; ?>" /> <!-- Bootstrap core CSS --> <link href="<?= Http::base() ?>/view/site/css/bootstrap.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,800' rel='stylesheet' type='text/css'> <link href="<?= Http::base() ?>/view/site/css/font-awesome.min.css" rel="stylesheet"> <link href="<?= Http::base() ?>/view/site/css/nouislider.min.css" rel="stylesheet"> <link href="<?= Http::base() ?>/view/site/css/style-<?= $data['config']->config_color; ?>.css" rel="stylesheet"> <link href="<?= Http::base() ?>/view/site/css/style-custom.css" rel="stylesheet"> <link href="<?= Http::base() ?>/view/site/css/responsive.css" rel="stylesheet"> <link href="<?= Http::base() ?>/view/site/css/style-visao.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <?php if ($data['config']->config_ga != ""): ?> <?= $data['config']->config_ga; ?> <?php endif; ?> </head> <body> <?php require_once 'menu-topo.php'; ?> <!-- begin:header --> <div id="header" class="heading" style="background-image: url(<?= Http::base() ?>/midias/thumb.php?zcc=3&w=1024&h=768&src=contato/<?= $data['contato'][0]->contato_foto ?>);"> <?php if (Filter::check_agent('browser')) : ?> <?php require_once 'topo-busca.php'; ?> <?php endif; ?> </div> <!-- end:header --> <!-- begin:content --> <div id="content"> <div class="container"> <div class="row"> <!-- begin:article --> <div class="col-md-9 col-sm-9 col-xs-12 col-md-push-3"> <div class="row"> <div class="col-md-12 single-post"> <ul id="myTab" class="nav nav-tabs nav-justified"> <li class="active"><a href="#detail" data-toggle="tab"><i class="fa fa-university"></i> DETALHES DO IMÓVEL</a></li> <li class="hidden"><a href="#location" data-toggle="tab"><i class="fa fa-map-marker"></i> localização</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="detail"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <!-- faixa aceita financimento --> <div class="titulo-financ"><?= $data['imovel']->imovel_financ; ?></div> <!-- faixa aceita financimento --> <div id="slider-property" class="carousel slide" data-ride="carousel"> <?php $k = 0; ?> <ol class="carousel-indicators"> <?php foreach ($data['foto'] as $ims): ?> <?php if (file_exists(Http::base_dir() . DIRECTORY_SEPARATOR . "midias/fotos/$ims->foto_url")): ?> <li data-target="#slider-property" class="<?= ($k == 0) ? 'active' : '' ?>" data-slide-to="<?= $k++ ?>" > <?php if ($ims->foto_imovel): ?> <img src="<?= Http::base(); ?>/midias/thumb.php?zcc=1&w=30&h=30&src=fotos/<?= $ims->foto_url; ?>" alt="Foto" class="img-responsive" /> <?php endif; ?> </li> <?php endif; ?> <?php endforeach; ?> </ol> <div class="carousel-inner"> <?php $k = 0; ?> <?php foreach ($data['foto'] as $imf): ?> <?php if (file_exists(Http::base_dir() . DIRECTORY_SEPARATOR . "midias/fotos/$imf->foto_url")): ?> <div class="item <?php if ($k++ == 0): ?>active<?php endif; ?>"> <?php if ($imf->foto_imovel): ?> <img src="<?= Http::base(); ?>/midias/thumb.php?q=85&zc=1&w=785&h=520&src=fotos/<?= $imf->foto_url; ?>&m=marca/<?= ($data['config']->config_marca != "") ? $data['config']->config_marca : ''; ?>" alt="Foto" class="img-responsive"/></td> <?php endif; ?> </div> <?php endif; ?> <?php endforeach; ?> </div> <a class="left carousel-control" href="#slider-property" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slider-property" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <div class="text-center"> <span class='st_facebook_large' displayText='Facebook'></span> <span class='st_googleplus_large' displayText='Google +'></span> <span class='st_linkedin_large' displayText='LinkedIn'></span> <span class='st_twitter_large' displayText='Tweet'></span> <span class='st_email_large' displayText='Email'></span> <span class='st_sharethis_large' displayText='ShareThis'></span> </div> <h1><?= $data['imovel']->bairro_nome; ?> - <?= $data['imovel']->cidade_nome ?></h1> <?= $data['imovel']->tipo_nome; ?> / Ref.: <?= $data['imovel']->imovel_ref; ?> - <?= $data['imovel']->imovel_financ; ?> <br/><br/> <div class="heading-title heading-title-sm bg-white"> <h2>PREÇO DE <?= $data['imovel']->negocio_nome; ?></h2> </div> <div class="visao-preco"> <div class="titulo">R$</div> <div class="texto"> <?php if ($data['imovel']->imovel_preco > 0): ?> <?= Filter::moeda($data['imovel']->imovel_preco); ?> <?php endif; ?> <?php if ($data['imovel']->imovel_preco_locacao > 0): ?> <?= Filter::moeda($data['imovel']->imovel_preco_locacao); ?> <?php endif; ?> <?php if ($data['imovel']->imovel_preco_temp > 0): ?> <?= Filter::moeda($data['imovel']->imovel_preco_temp); ?> <?php endif; ?> </div> </div> <div class="heading-title heading-title-sm bg-white"> <h2>VISÃO GERAL</h2> </div> <div class="visao"> <div class="titulo">Quarto</div> <div class="texto"> <?= $data['imovel']->imovel_dormitorio; ?> </div> </div> <div class="visao"> <div class="titulo">Banheiro</div> <div class="texto"> <?= $data['imovel']->imovel_banheiro; ?> </div> </div> <div class="visao"> <div class="titulo">Suítes</div> <div class="texto"> <?= $data['imovel']->imovel_suite; ?> </div> </div> <div class="visao"> <div class="titulo">Vaga</div> <div class="texto"> <?= $data['imovel']->imovel_vaga; ?> </div> </div> <div class="heading-title heading-title-sm bg-white"> <h2>ÁREA</h2> </div> <div class="visao"> <div class="titulo">Área</div> <div class="texto"> <?= $data['imovel']->imovel_area; ?> m<sup>2</sup> </div> </div> <div class="visao"> <div class="titulo">Área Total</div> <div class="texto"> <?= $data['imovel']->imovel_atotal; ?> m<sup>2</sup> </div> </div> <?php if ($data['imovel']->imovel_preco_condominio >0): ?> <div class="heading-title heading-title-sm bg-white"> <h2>OUTROS VALORES</h2> </div> <div class="visao"> <div class="titulo">Condomínio</div> <div class="texto"> <?= Filter::moeda($data['imovel']->imovel_preco_condominio); ?> </div> </div> <?php endif; ?> <?php if ($data['imovel']->imovel_preco_iptu >0): ?> <div class="visao"> <div class="titulo">IPTU</div> <div class="texto"> <?= Filter::moeda($data['imovel']->imovel_preco_iptu); ?> </div> </div> <?php endif; ?> <table class="table table-bordered"> <tr> <td width="20%"><strong>Referência</strong></td> <td><?= $data['imovel']->imovel_ref; ?></td> </tr> <tr> <td><strong>Tipo</strong></td> <td><?= $data['imovel']->tipo_nome; ?></td> </tr> <tr> <td><strong>Cidade</strong></td> <td><?= $data['imovel']->cidade_nome; ?></td> </tr> <tr> <td><strong>Bairro</strong></td> <td><?= $data['imovel']->bairro_nome; ?></td> </tr> <?php if ($data['imovel']->imovel_endereco != "" && $data['imovel']->imovel_mapa == 1): ?> <tr> <td><strong>Endereço</strong></td> <td><?= $data['imovel']->imovel_endereco; ?></td> </tr> <?php endif; ?> <tr> <td><strong>Banheiro(s)</strong></td> <td><?= $data['imovel']->imovel_banheiro; ?></td> </tr> <tr> <td><strong>Quarto(s)</strong></td> <td><?= $data['imovel']->imovel_dormitorio; ?></td> </tr> <tr> <td><strong>Suíte(s)</strong></td> <td><?= $data['imovel']->imovel_suite; ?></td> </tr> <tr> <td><strong>Vaga(s)</strong></td> <td><?= $data['imovel']->imovel_vaga; ?></td> </tr> <tr> <td><strong>Área</strong></td> <td><?= $data['imovel']->imovel_area; ?> m<sup>2</sup> </td> </tr> <tr> <td><strong>Área Total</strong></td> <td><?= $data['imovel']->imovel_atotal; ?> m<sup>2</sup> </td> </tr> <tr> <td><strong>Preço de <?= $data['imovel']->negocio_nome; ?></strong></td> <?php if ($data['imovel']->imovel_preco > 0): ?> <td><?= Filter::moeda($data['imovel']->imovel_preco); ?></td> <?php endif; ?> <?php if ($data['imovel']->imovel_preco_locacao > 0): ?> <td><?= Filter::moeda($data['imovel']->imovel_preco_locacao); ?></td> <?php endif; ?> <?php if ($data['imovel']->imovel_preco_temp > 0): ?> <td><?= Filter::moeda($data['imovel']->imovel_preco_temp); ?></td> <?php endif; ?> </tr> <?php if ($data['imovel']->imovel_preco_condominio > 0): ?> <tr> <td><strong>Preço do Condomínio</strong></td> <td><?= Filter::moeda($data['imovel']->imovel_preco_condominio); ?></td> </tr> <?php endif; ?> <?php if ($data['imovel']->imovel_preco_iptu >0): ?> <tr> <td><strong>Preço do Iptu</strong></td> <td><?= Filter::moeda($data['imovel']->imovel_preco_iptu); ?></td> </tr> <?php endif; ?> </table> <?php if (isset($data['opcoes'][0])): ?> <br/> <div class="heading-title heading-title-sm bg-white"> <h2>CARACTERÍSTICAS</h2> </div> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="row"> <ul> <?php foreach ($data['opcoes'] as $imov): ?> <?php $opc = explode(",", $data['imovel']->imovel_opcao); ?> <?php if (in_array($imov->opcao_id, $opc)): ?> <li style="list-style-type: none"><i class="fa fa-check"></i> <?= $imov->opcao_nome; ?></li> <?php endif; ?> <?php endforeach; ?> </ul> </div> </div> <?php endif; ?> </div> <?php if ($data['imovel']->imovel_descricao != ""): ?> <br/> <div class="heading-title heading-title-sm bg-white"> <h2>DESCRIÇÃO</h2> </div> <p><?= $data['imovel']->imovel_descricao; ?></p> <?php endif; ?> <br/> <div class="heading-title heading-title-sm bg-white"> <h2>LOCALIZAÇÃO</h2> </div> <div id="map"></div> </div> </div> </div> <br/><br/> <div class="heading-title heading-title-sm bg-white"> <h2>DÚVIDAS SOBRE O IMÓVEL?</h2> </div> <div class="pane"> <form role="form" method="post" enctype="multipart/form-data" action="<?= Http::base() ?>/atendimento/enviar/"> <input type="hidden" name="imovel_id" id="imovel_id" value="<?= $data['imovel']->imovel_id ?>"> <div class="form-group"> <label for="name">Nome:</label> <input type="text" name="nome" id="nome" class="form-control input-lg" placeholder="Informe o nome"> </div> <div class="form-group"> <label for="email">E-mail:</label> <input type="email" name="email" id="email" class="form-control input-lg" placeholder="Informe o e-mail"> </div> <div class="form-group"> <label for="telp">Telefone:</label> <input type="text" name="tel" id="tel" class="form-control input-lg" placeholder="Informe o telefone"> </div> <div class="form-group"> <label for="message">Messagem:</label> <textarea name="mensagem" id="mensagem" class="form-control input-lg" rows="7" placeholder="Tipo de mensagem">Olá, Gostaria de conhecer este imóvel <?= $data['imovel']->imovel_ref ?> que encontrei na <?= $data['config']->config_nome; ?>, por favor entre em contato.</textarea> </div> <div class="form-group"> <input type="submit" name="submit" value="Enviar Mensagem" class="btn btn-primary btn-lg"> </div> <div class="hide"> <input type="text" name="assunto" id="assunto" value="Informações sobre imóvel Ref. <?= $data['imovel']->imovel_ref ?> em <?= $data['imovel']->cidade_nome; ?>" /> > </div> </form> </div> </div> </div> </div> </div> <!-- end:article --> <!-- begin:sidebar --> <div class="col-md-3 col-sm-3 col-xs-12 col-md-pull-9 sidebar"> <?php if (isset($data['imovel_qt_tipo'][0])) : ?> <div class="widget widget-sidebar widget-white"> <div class="widget-header text-center"> <h4>Outros</h4> </div> <ul class="list-check"> <?php foreach ($data['imovel_qt_tipo'] as $tipo) : ?> <li><a href="#"><?= $tipo->tipo_nome; ?></a> (<?= $tipo->total; ?>)</li> <?php endforeach; ?> </ul> </div> <?php endif; ?> <div class="widget-sidebar widget-white"> <div class="widget-header text-center"> <h4>Imóveis Parecidos</h4> </div> <?php foreach ($data['imovel_parecido'] as $imp): ?> <div class="col-md-12"> <div class="post-container"> <a href="<?= Http::base() ?>/detalhes-do-imovel/<?= $imp->cidade_url; ?>/<?= $imp->bairro_url; ?>/<?= $imp->imovel_id; ?>/"> <?php if (file_exists(Http::base_dir() . DIRECTORY_SEPARATOR . "midias/fotos/$imp->foto_url")): ?> <img src="<?= Http::base(); ?>/midias/thumb.php?q=85&zc=1&w=280&h=180&src=fotos/<?= $imp->foto_url; ?>" alt="Foto" class="img-responsive"/> <?php else : ?> <img src="<?= Http::base(); ?>/midias/thumb.php?q=85&zc=1&w=280&h=180&src=img/sem_foto.jpg" alt="Foto" class="img-responsive"/> <?php endif; ?> </a> <h5><?= $imp->cidade_nome; ?></h5> <h6> <a href="<?= Http::base() ?>/detalhes-do-imovel/<?= $imp->cidade_url; ?>/<?= $imp->bairro_url; ?>/<?= $imp->imovel_id; ?>/"><?= $imp->tipo_nome; ?> - <span> R$ <?php if ($imp->imovel_preco != 0.00): ?> <?= Filter::moeda($imp->imovel_preco); ?> <?php endif; ?> <?php if ($imp->imovel_preco_locacao != 0.00): ?> <?= Filter::moeda($imp->imovel_preco_locacao); ?> / mês <?php endif; ?> <?php if ($imp->imovel_preco_temp != 0.00): ?> <?= Filter::moeda($imp->imovel_preco_temp); ?> / dia <?php endif; ?> </span> </a> </h6><br/> <div class="post-content"> <div class="post-meta text-center"> <span><i class="fa fa-home"></i> <?= $imp->imovel_area; ?> m<sup>2</sup> / </span> <span><i class="fa fa-hdd-o"></i> <?= $imp->imovel_dormitorio; ?> / </span> <span><i class="fa fa-male"></i> <?= $imp->imovel_banheiro; ?> wc / </span> <span><i class="fa fa-car"></i> <?= $imp->imovel_vaga; ?></span> </div> </div> </div> </div> <?php endforeach; ?> </div> </div> </div> </div> <!-- end:content --> <!-- end:footer --> <?php require_once "view/site/recentes.php" ?> <?php require_once "view/site/news.php" ?> <?php require_once "view/site/parcerias.php" ?> <?php require_once "view/site/footer.php" ?> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script type="text/javascript">var baseUriMap = null;</script> <script type="text/javascript">var baseUri = '<?= Http::base() ?>';</script> <script src="<?= Http::base() ?>/view/site/js/jquery.js"></script> <script src="<?= Http::base() ?>/view/site/js/bootstrap.js"></script> <script src="//maps.google.com/maps/api/js?language=pt-BR&key=<?= $data['config']->config_key_map ?>"></script> <script src="<?= Http::base() ?>/view/site/js/gmap3.min.js"></script> <script src="<?= Http::base() ?>/view/site/js/jquery.easing.js"></script> <script src="<?= Http::base() ?>/view/site/js/jquery.jcarousel.min.js"></script> <script src="<?= Http::base() ?>/view/site/js/imagesloaded.pkgd.min.js"></script> <script src="<?= Http::base() ?>/view/site/js/masonry.pkgd.min.js"></script> <script src="<?= Http::base() ?>/view/site/js/jquery.backstretch.js"></script> <script src="<?= Http::base() ?>/view/site/js/jquery.nicescroll.min.js"></script> <script src="<?= Http::base() ?>/view/site/js/nouislider.min.js"></script> <script src="<?= Http::base() ?>/view/site/js/script.js"></script> <script src="<?= Http::base() ?>/view/site/js/number.js"></script> <script src="<?= Http::base() ?>/view/site/js/main.js"></script> <script type="text/javascript"> $('#menu-home').addClass('active'); <?php if ($data['imovel']->imovel_mapa == 2) : ?> <?php $data['imovel']->imovel_endereco = $data['imovel']->bairro_nome . "," . $data['imovel']->cidade_nome; ?> <?php endif; ?> <?php if ($data['imovel']->imovel_endereco != "") : ?> $("#map").gmap3({ map: { options: { center: [<?php echo $data['imovel']->imovel_lat; ?>, <?php echo $data['imovel']->imovel_lon; ?>], address: "<?php echo $data['imovel']->imovel_endereco; ?>", zoom: 18, scrollwheel: false } }, marker<?php echo ($data['imovel']->imovel_mapa == 2) ? 's' : '' ?>: { latLng: [<?php echo $data['imovel']->imovel_lat; ?>, <?php echo $data['imovel']->imovel_lon; ?>], options: { } } }); <?php endif; ?> if ($('.carousel-indicators li').length <= 0) { $('.carousel-control').remove(); } </script> <!-- Colors DEMO Remover --> <script type="text/javascript">var switchTo5x = true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({publisher: "c44b1724-22ab-4433-80d0-3328ed2847d5", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script> </body> </html> Segue a página para analise: https://gois.weblina.com.br/imobiliaria/detalhes-do-imovel/praia-grande/aviacao/23/casa-para-temporada/ No aguardo de uma luz! Obrigado!
-
O div está desalinhado, não entendo o motivo. Há espaço suficiente pra ele encaixar, não há margin impedindo-o, seja dele proprio ou de outros divs. E estes 3 estão configurados com display: inline-block; Estou deixando o código aqui, porém é preciso abrir a tela em pelo menos 1200px para ve-lo desta maneira: https://jsfiddle.net/pjygtm2o/
-
O negócio é o seguinte: estou criando apenas um arquivo html bem simples e básico para os atendentes utilizarem para agilizar o serviço deles em vez de inserir manualmente. Então, estou com uma dificuldade para tentar achar o problema que está ocasionando o div sumir após selecionar a segunda opção para baixo (tenta selecionar Beltrano ou Carlitos) na seleção, apenas a primeira opção Fulano está funcionando (outro detalhe: no outro arquivo que tenho segue a mesma lógica, mas é arquivo teste apenas e funciona de escolher qualquer uma das opções normalmente, mesmo sendo um arquivo-teste). Veja o código abaixo e me diz onde tá o erro que está causando?? PS: estou utilizando o Chrome apenas, a pedido da empresa. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>SCRIPTS - RECEPÇÃO</title> <style type="text/css"> .carimboExecutador{ background: #ff0000; } .box{ color: #fff; padding: 20px; display: none; margin-top: 20px; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("select").change(function(){ $(this).find("option:selected").each(function(){ var optionValue = $(this).attr("value"); if(optionValue){ $(".box").not("." + optionValue).hide(); $("." + optionValue).show(); } else{ $(".box").hide(); } }); }).change(); }); function copiarTexto5() { var textoCopiado5 = document.getElementById("link5"); textoCopiado5.select(); document.execCommand("Copy"); } <!-- function copiarTexto() { --> <!-- var textoCopiado = document.getElementById("link"); --> <!-- textoCopiado.select(); --> <!-- document.execCommand("Copy"); --> <!-- } --> function selecionaAtendente() { var puxa = $( "#listaAtendente" ).val(); var str = document.getElementById("link5").value; var n = str.replace(/XX|FULANO|BELTRANO|CARLITOS/gi,puxa); document.getElementById("link5").value=n; } </script> </head> <body> <!-- DIV PARA EXIBIR LISTA DE OPÇÕES --> <div> <h4><font face="arial" color="red">ESCOLHA A SCRIPT:</font></h2> <select> <option disabled selected>Clique aqui para exibir a lista</option> <option disabled></option> <option value="carimboExecutador">Carimbo - Identificação Executador</option> </select> </div> <!-- CLASSES PARA EXIBIR DIVS SELECIONADOS --> <div class="carimboExecutador box"> <h2><font face="arial" color="white">CARIMBO - IDENTIFICAÇÃO EXECUTADOR</font></h2> <b><font face="arial" color="white">Selecione o Responsável:</font></b> <select id="listaAtendente"> <option value="FULANO">Fulano</option> <option value="BELTRANO">Beltrano</option> <option value="CARLITOS">Carlitos</option> </select> <button onclick="selecionaAtendente()">Preencher Técnico</button> <br/><textarea rows="4" cols="90" id="link5" name="link5" readonly> NOME: XX CARGO: ATENDENTE DE TELEMARKETING </textarea> <br/><button onClick="copiarTexto5()">Copiar Texto</button> </div> </body> </html>
-
Como centralizar o texto de uma div em cima de outra div com imagem
thenerb posted a topic in HTML e CSS
Eu estou fazendo um html com uma imagem de fundo com o atributo background e utilizei a tag div com o intuito de colocar uma imagem centralizada e dentro dessa imagem e texto, porém o texto não está sobrepondo a imagem,segue o código: <!DOCTYPE.html> <html> <head> <title>testando</title> <link rel='icon' href='favicon (2).ico' type='image/x-icon' > <meta charset=utf-8> </head> <body background="_Space Love_, de Scott Brian madeiras.jpg" > <font size="4" color="lavender" face="bradlay hand ITC regular"> <p style="text-shadow: 0.1em 0.1em 0.15em #ffffff">datas <br/> <div style="position:relative; z-index:-1 " align="center" > <img width="45%" height="1000px"src="img_como_colocar_fundo_preto_nas_fotos_16171_orig.jpg" /> </div> <div style="position:relative; z-index:1; width="100%";heght="100%" align="center"> <p align="center"style="text-shadow: 0.1em 0.1em 0.15em #ffffff "> teste </p> </div> </font> </body> </html> -
tenho uma DIV que possui um while em php, esse while carrega 12 posts(DIV), e quero que quando acesse o site, a pagina carregue normalmente mas dentro da div aparece um loader e apenas mostre os posts quando todos estiverem carregados! isso é possivel?
-
Olá pessoal, boa tarde. Tem alguma forma da DIV pai acompanhar a altura da ul filho? <div class="navPages-container" > <div class="container"> <nav class="navPages" style="text-align:left;"> <ul class="navPages-list"> <li class="navPages-item" style="z-index:3; width:122px;" onmouseover="mostra_fundo();" onmouseout="esconde_fundo();"><a class="navPages-action has-subMenu" href=""><i class="fa fa-list"></i> Categorias</a> <div id="menu2"> <ul class="parent-menu"> <li onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'"><a href="#1">Home & Kitchen</a> <div class="categoria"> <ul> <li><a href="#11">item1</a></li> <li><a href="#12" onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'">item2</a></li> <li><a href="#13"><i class="fa fa-list"></i> <span>Item 1</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:35px;"></i></a> <div class="subcategoria"> <ul > <li><a href="#111">item</a></li> <li><a href="#112">Even more</a></li> <li><a href="#113">item</a></li> <li><a href="#114">item</a></li> <li><a href="#115">item</a></li> </ul> </div> </li> <li><a href="#14">item4</a></li> <li><a href="#15">item5</a></li> <li><a href="#16">item6</a></li> </ul> </div> </li> #menu2{position:absolute;z-index:3;margin-top:16px; width:1170px; margin-left:-19px;background:#fff;box-shadow:0 1px 10px rgba(0,0,0,.1);border:1px solid #d0d0d0;border-radius:0 0 3px 3px; min-height:300px;display:none;font-size:14px;font-weight: bold;} .parent-menu{list-style-type:none;padding:15px 0px;width:270px;float:left;margin-top:0;position:absolute;line-height:35px;} .parent-menu li:hover{background:#ccc;cursor:pointer;} .categoria{display:none;width:270px;left:255px;line-height:35px;list-style-type:none;position: absolute;top: 15px;a {line-height: 35px;}} .categoria ul li:hover{background:#ccc;cursor:pointer;} .categoria ul{list-style-type:none;width:270px;} .categoria ul li{list-style-type:none;width:270px;} .subcategoria{display:none;width:270px;left:270px;line-height:35px;list-style-type:none;position: absolute;top: 0px;a {line-height: 35px;}} .subcategoria ul{list-style-type:none;width:270px;} .subcategoria ul li{list-style-type:none;width:270px;} .subcategoria ul li:hover{background:#ccc;cursor:pointer;} .navPages-item:hover #menu2{display:block;} .parent-menu li:hover .categoria{display:block;} .categoria ul li:hover .subcategoria{display:block;} #menu2 ul a { margin: 0px; display: block; width: 100%; height: 100%; } #menu2 ul li a { margin: 0px; display: block; width: 100%; height: 100%; }
-
Boa noite, estou tendo a seguinte questão, estou precisando posicionar elementos (divs) um do lado do outro de forma que fiquem responsivos então os mesmos desçam em fiquem um em baixo do outro em telas menores. Ou seja, quando em tela grande de pc um do lado do outro, em telas menores móveis um em cima do outro. O recomendado pra isso seria usar float, porém preciso que ao ficar um em cima do outro os elementos fiquem centralizados na tela e a propriedade float sempre joga os elementos pra direita ou pra esquerda, não deixa ficar centralizado. Preciso então posicionar um do lado do outro sem uso de float ou encontrar outra solução, segue código abaixo. Desde já agradeço. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <div class="blocos_caracteres"> <div class="blocos_caracteres_content_1"> <p>oi</p> </div> <div class="blocos_caracteres_content_2"> <p>oi</p> </div> <div class="blocos_caracteres_content_3"> <p>oi</p> </div> <div class="blocos_caracteres_content_4"> <p>oi</p> </div> </div> </body> </html> /****reset****/ html { margin:0; padding:0; border:0; height:100%; } body { margin:0; padding:0; border:0; height:100%; } ul, ol, li {list-style:none;} /****reset****/ .blocos_caracteres {width:94%; margin: 0 auto; } .blocos_caracteres_content_1 {width:25%; height:300px; min-width: 250px; background-color: yellow; float: left; } .blocos_caracteres_content_2 {width:25% ; height:300px; min-width: 250px; background-color: green; float: left; } .blocos_caracteres_content_3 {width:25% ; height:300px; min-width: 250px; background-color: blue; float: left;} .blocos_caracteres_content_4 {width:25% ; height:300px; min-width: 250px; background-color: red; float: left;}
-
Galera, tenho um carrossel no meu arquivo, porém queria que elas mudassem aleatóriamente a cada refresh na página, pois ela s´fica pela ordem normal. <div> <div> <div class="loop owl-carousel owl-theme"> <div> <img src="imagens/jpeg.01"> </div> <div> <img src="imagens/jpeg.02"> </div> <div> <img src="imagens/jpeg.03"> </div> <div> <img src="imagens/jpeg.01"> </div> <div> <img src="imagens/jpeg.05"> </div> <div> <img src="imagens/jpeg.07"> </div> <div> <img src="imagens/jpeg.07"> </div> </div>
-
Bom dia! Teria como alguém me ajudar? Sou bem iniciante nos códigos e acabou me surgindo uma duvida/problema a qual estou tentando resolver desde hoje cedo... Preciso criar um contêiner dentro de outro contêiner igual a imagem 1. Só que ele está ficando igual a imagem 2. Estou utilizando o bootstrap para tentar arrumar isso de uma forma que também traga a responsividade. Basicamente eu criei um container fluid e dentro dele tinha outro container, só que não estou conseguindo posicionar ambos corretamente!
-
Senhores, me ajudem pelo amor de Deus!!! Estou montando uma "Base de Documentos" onde eu trabalho. Essa base é dividida por tipo de Documento (CNH/RG/OUTROS) e ano de expedição (2019/2018/2017...). As máscaras principais (HOME's) já foram feitas, o problema é que não consigo vincular esses botões dos anos em DIV's diferentes. Alguém, em nome de Jesus Cristo, me ajuda a criar uma regra que, ao clicar no ano 2018, doc aparece na DIV ao lado com a barra de ZOOM??? Porque eu já estou ficando louco!!! <!-- CÓDIGO DO SITE --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="estilo.css" /> <title>ACRE - RG</title> </head> <body> <!-- CABEÇALHO COM MENUS --> <header> <div class="container"> <div class="zoom"> <img src="logo.png" class="img-responsive" height="95px" width="130px" border="2px"> <div id="menu"> <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/Base%20Documental.html">HOME</a> <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/RG.html">RG</a> <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/CNH.html">CNH</a> <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/OUTROS.html">OUTROS</a> </div> </div> </div> </header> <!-- O CORPO DO SITE --> <div class="container2"> <fieldset> <center><h2><i> Estado do ACRE - RG</i></h2></center> </fieldset> </div> <div class="container3"> <!-- COLUNA DOS ANOS --> <div class="container4"> <div class="col-lg-2 col-md-2 col-sm-2"> <div style="height: calc(100vh - 230px); overflow-y: scroll; overflow-x: hidden; right: 16px"> <div class="btn-group-vertical" role="group" aria-label="..." <div class="zoom"> <button class="btn ng-scope btn-default" ng-class="{'btn-primary': analyser.selectedDocModel.guid === docModel.guid, 'btn-default': analyser.selectedDocModel.guid !== docModel.guid}" ng-repeat="docModel in analyser.filteredDocModels" ng-click="analyser.selectDocModel(docModel)" ng-show-img="areaimagem" style="-webkit-user-drag: none" class="ng-scope" img src="AM.01.jpg" class="img-responsive" href="AM.01.jpg" size="80%"> <small class="ng-binding">RG</small> <br> <small class="ng-binding">AM- 2019</small> </button> </div> </div> </div> </div> </div> <!-- O RODAPÉ Do SITE --> <footer> <span> <b>BASE DOCUMENTAL</b> - ©<i>Leandro do Nascimento Martins</i></span> </footer> </div> </div> </div> </body> </html> <!-- ARQUIVO ESTILO.CSS --> /* PADRÃO CSS */ /* eliminando configurações dos browsers*/ * {margin: 0; padding: 0; font-family: verdana, helvetica, arial;} /* TODAS AS TAG's DECLARADAS */ /* PARA UMA "TAG - PARTE" NORMAL, USA-SE APENAS O NOME */ p {color: silver; font-size: 15px; text-align: center; font-family: arial, "Times new roman"; text-shadow: 1px 1px 1px #111111;} body {background-color: #E8E8E8; width: 100%;} header {background-color: #08298A; height: 100px; padding: 2px; width: 100%;} footer {clear: both; color: white; background-color: #08298A; height: 40px; text-align: center ; padding: 10px; text-shadow: 1px 1px 1px black;} h1 {color: SILVER; text-align: center; margin: 0 0 50px 0; text-shadow: 2px 2px 2px #111111;} h2 {color: SILVER; text-align: center; margin: 5px 0 5px 0; text-shadow: 2px 2px 2px #111111;} /* TODAS AS ID's */ /* PARA "IDENTIFICAÇÃO - ID" DA DIV USA-SE .#. HASHTAG */ #div_principal {background-color: white; clear: both; background-size: 65%; min-height: 485px; padding: 40px 0 40px 0; margin: 1% 1% 1% 1%; width: 100%;} #logo {float: left; margin: 0 20px 0 10px;} #menu {float: right; margin-top: 40px; text-transform: uppercase;} #menu a {padding: 32px 20px; text-decoration: none; color: white; border-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; cursor: pointer; transition: background-color 1s;} #menu a:hover {background-color: white; color: black;} #btn-default {text-decoration: none;} /* CLASS */ /* PARA CLASSES-CONTAINER's DIFERENTES USA-SE O PONTO . */ .efeito {background-color: rgba(0, 0, 0, 0.3); padding: 100px 0 100px 0;} .container {width: 100%; /* largura */ margin: auto; /* ajuste automatico independente de resolução*/} .container2 {width: 97%; /* largura */ margin: auto; /* ajuste automatico independente de resolução*/ background-color: white;} .container3 {width: 95%; margin: auto; background-color: #FFFAFA; clear: both;} .container4 {width: 10%; float: left; background-color: #FFFAFA; clear: both; } .container5 {background-color: ; float: left;} .col-lg-2 {width: 95%; } .col-md-2 {width: 50px;} .col-sm-2 { width: 79px;} .col-lg-10 { width: 80%; }
-
Estava tentando criar um leiaute com o formato GRID, mas me deparei com um problema. Não consigo colocar DIV dentro de uma DIV do leiaute do GRID. Queria saber como faço isso. Abaixo segue exemplo onde no div "col2" queria colocar duas div, uma do lado da outra: CSS .gridcontainer { display: grid; justify-content: center; grid-template-columns: 1fr 3fr 3fr 3fr 1fr; grid-gap: 3px; } .gridcontainer > div { /*text-align: center;*/ padding: 10px; /*font-size: 20px;*/ } .esquerda { grid-row: 1 / 5; } .direita { grid-row: 1 / 5; grid-column: 5 / 5; } .principal { grid-column: 2 / 5; background-color: #ffffff; padding-left: 10px; } HTML <div class="gridcontainer"> <div class="principal"> <p>texto</p> </div> <div class="col1"> <p>texto</p> </div> <div class="col2"> <div class="esquerda"> <img src="..."> <p>Imagem legenda</p> </div> <div class="direita"> <p>Texto</p> </div> </div> </div>
-
Amigo, estou com um probleminha e não consigo resolver... já revirei a internet inteira, mas não encontrei nada parecido com o que preciso. A questão é o seguinte. Queria executar um comando JS assim que uma div aparecer na tela. Abaixo estou deixando os codes <script src="js/jquery.min.js" type="text/javascript"></script> <style> #progress { width:100%; height:20px; border: solid #808080 2px; border-radius: 5px; background-image: linear-gradient( 90deg, green, yellow, red ); } #processador{ width: 0%; height: 16px; background-color: rgba(0, 0, 0, 0.5); } #memoria{ width: 0%; height: 16px; background-color: rgba(0, 0, 0, 0.5); } #hd{ width: 0%; height: 16px; background-color: rgba(0, 0, 0, 0.5); } </style> Processador <span data-bind="Usage"><div id="progress"><div id="processador"></div></div><div style="text-align:right;">20%</div></span> Memória <span data-bind="Usage"><div id="progress"><div id="memoria"></div></div><div style="text-align:right;">50%</div></span> Hard Disk <span data-bind="Usage"><div id="progress"><div id="hd"></div></div><div style="text-align:right;">80%</div></span> JS <script type="text/javascript"> $("#processador").html(function(){ alert("ok"); var width = 1; var id = setInterval(frame, 10); var id2 = setInterval(frame2, 10); var id3 = setInterval(frame3, 10); function frame() { if (width >= 20) { clearInterval(id); } else { width++; document.getElementById("processador").style.width = width + '%'; } } function frame2() { if (width >= 50) { clearInterval(id2); } else { width++; document.getElementById("memoria").style.width = width + '%'; } } function frame3() { if (width >= 80) { clearInterval(id3); } else { width++; document.getElementById("hd").style.width = width + '%'; } } }); </script> A "animação" em si, está funcionando perfeitamente, porém ao carregar a página e não no momento em que a DIV aparece na tela
-
Olá pessoal, sou novo em javascript e Jquery, podem me ajudar com o seguinte problema? Tenho um select com algumas opções. Umas dessas opções possui o valor "outro". Quando o usuário selecionar esta opção, preciso que apareça um campo de texto para que ele especifique e um botão "+" Ao preencher o campo e clicar em "+" O valor precisa ser inserido no select como uma nova option e selected. Segue o código: <!DOCTYPE html> <html lang="pt-Br"> <head> <meta charset="UTF-8"> <title>Select com opção de novo valor</title> <script> // Toda vez que uma opção for selecionada, teste se é "outro" // Se for, mostre o campo para que o usuário informe o novo valor // O novo valor deve ser enviado ao servidor como se fosse uma option selected neste select </script> </head> <body> <select name="grupo" id="gruposSelect" onchange="novoValor(gruposSelect, divOculta);"> <option value="">Todos</option> // Código PHP que gera opções <option value="outro">Outro</option> </select> <div id="divOculta" style="display:none;"> <input type="text" name="grupo" id="novoGrupo" /> </div> </body> </html> Desculpem se eu estiver violando alguma regra ou falta de clareza, este é o primeiro fórum que participo e meu primeiro post Obrigado
-
Boa noite pessoal, preciso fazer com que seja carregado somente a informação dentro de uma determinada div, pois ela deve atualizar quando for alterada a informação no BD. Carregar a pagina inteira a cada 5 segundos seria ruim pois provavelmente o usuário estranharia, fiz da seguinte forma, conforme os prints. Deu certo, porém a informação foi alterada a partir da alteração feita no banco de dados, porém, dentro da div, apareceu outra página igual, gerando duplicidade sobreposta. Aguardo sugestões. nox
-
Olá. Preciso ocultar uma DIV que está dentro de um IFRAME, porém não consigo. Esta DIV está identificada por um ID, porém mesmo montando um CSS especifico para ocultar ela, a mesma continua aparecendo. Estou usando o seguinte CSS. <style type="text/css"> #topo-conteudo { display: none } </style> Alguém poderia me dar uma luz de como posso ocultar está DIV? Meu IFRAME carrega uma página de outro site.
-
Olá, eu criei uma página de publicidade, porém não fluiu como eu queria, então coloquei essa página em uma DIV, alguém poderia me informar se irá funcionar caso eu faça um sistema para ocultar essa DIV depois de 10 segundos? <!--- Publicidade ------> <div id="publicidadediv"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title><?= $config['hotelName'] ?> - Publicidade</title> <script src="/templates/GalaxyServers/client/js/jquery-latest.js" type="text/javascript"></script> <script src="/templates/GalaxyServers/client/js/jquery-ui.js" type="text/javascript"></script> <script src="/templates/GalaxyServers/client/js/spacehotel2018.js"></script> <script src="/templates/GalaxyServers/client/js/flash_detect_min.js"></script> <script src="/templates/GalaxyServers/client/js/client.js" type="text/javascript"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="icon" type="image/png" href="<?= $config["favicon"];?>"> </head> <body> <body style="background-color:black;"> <center><img src="https://i.imgur.com/kHdzpqq.png" style="width:396px;height:91px;"></center> <center><?php $imagens = array(); $imagens[] = '<a href="https://hobbyhotel.club/hotel?room=255" target="_blank"><img src="https://i.imgur.com/O0gSito.png" style="width:330px;height:250px;"></a>'; $imagens[] = '<a href="https://hobbyhotel.club/hotel?room=255" target="_blank"><img src="https://i.imgur.com/O0gSito.png" style="width:330px;height:250px;"></a>'; $chave = array_rand($imagens); $imagem = $imagens[$chave]; echo $imagem; ?></center> <center><img src="https://i.imgur.com/9FH4A5O.png" style="width:396px;height:91px;"></center> </body> </div> <!--- Publicidade ------> Gostaria de sabem também como faço para ocultar tudo isso após X segundos...
-
ola pessoal eu queria por exemplo, eu tenho + de 4 mil visitas por dia no site mas nem todos dão um click para eu ganhar eu uso PoPADS.NET e por isso eles tende clicar..... Queria algo que podece usar no codigo index ou nas postagens dentro de uma div ou algo parecido e que automaticamente daria um click dentro da pagina em qualquer lugar para abrir o anuncio....
-
ola pessoal eu queria por exemplo, eu tenho + de 4 mil visitas por dia no site mas nem todos dão um click para eu ganhar eu uso PoPADS.NET e por isso eles tende clicar..... Queria algo que podece usar no codigo index ou nas postagens dentro de uma div ou algo parecido e que automaticamente daria um click dentro da pagina em qualquer lugar para abrir o anuncio....
-
Boa noite pessoal, preciso fazer com que seja carregado somente a informação dentro de uma determinada div, pois ela deve atualizar quando for alterada a informação no BD. Carregar a pagina inteira a cada 5 segundos seria ruim pois provavelmente o usuário estranharia, fiz da seguinte forma, conforme os prints. Deu certo, porém a informação foi alterada a partir da alteração feita no banco de dados, porém, dentro da div, apareceu outra página igual, gerando duplicidade sobreposta. Aguardo sugestões.
-
Tenho isso: <div> DIV 1 </div> <div> DIV 2 </div> <div> DIV 3 </div> <div> DIV 4 </div> <div> DIV 5 </div> Preciso aplicar um estilo a partir da DIV 2 até a DIV 5. Como faço? Obrigado.
-
Ler XML com jquery e Atualizar dados na DIV sem Refresh na Pagina
ozielusa posted a topic in Javascript
Bom dia Pessoal. Sou Leigo em Jquery e estou precisando da ajuda de vocês para o seguinte: Tenho este arquivo XML que é gerado e atualizado automaticamente por um software a cada vez que uma música termina e outra se inicia (Este arquivo é enviado automaticamente via FTP para o servidor a cada nova atualização). <?xml version="1.0" encoding="utf-8"?> <Schedule System="Jazler"> <Event status="happening" startTime="09:19:18" eventType="song"> <Announcement Display="Now On Air:"/> <Song title="Rachel Malafaia"> <Artist name="03"> </Artist> <Jazler ID="131"/> <PlayLister ID=""/> <Media runTime="00:03:55"/> <Expire Time="09:23:12"/> </Song> </Event> </Schedule> Preciso que a página do site leia este arquivo com a estrutura acima (que é gerada automaticamente) e atualize as informações de <Song Title>, <Artist name>, etc... em uma tag <li> na página HTML, mas preciso que essa atualização ocorra em tempo real sem a necessidade de recarregar (Refresh) a página. (Por isso gostaria que fosse com JQuery), mas como sou leigo no assunto, gostaria da ajuda dos colega sobre como fazer isso, pois os exemplos que tenho achado na internet eu não estou conseguindo fazer funcionar. Obrigado e forte abraço a todos. -
Pessoal preciso muito da ajuda de vocês de quem entende de página HTML e CSS, estou precisando de ajuda para terminar uma página do TCC que um amigo começou e ai por motivos de estar sem internet e morar em outro pais na o conseguimos terminar. Preciso apenas adicionar 3 botoes na página. Quem consegue me explicar ou me ensinar por acesso remoto ou algo assim, estou desesperada pois não tenho noção de WEB minha área de atuação é outra. Quem puder entrar em contato (16)9960766-82 Muito obrigada
-
Olá, pessoal, boa tarde !! Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !! Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando: <!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Me ajudem por favor ! Obrigado !!
-
CSS Animation - DIV from top:200px to top:0px
Carlos Web Soluções Web posted a topic in HTML e CSS
Eu preciso de alguma ajuda para resolver algumas dúvidas !! Se puder me ajudar eu agradeço !! Primeiro visite o link: http://terezanininha.com.br/CSS/Animations/Pagina_1_TryIt_3.html Veja o 'Código Fonte' pelo navegador !! O que estou tentando fazer ?? Eu quero que o elemento div, faça movimento de animation, vindo from {top:200px} to {top:0px} e paralisar no topo !! Neste exemplo, eu encontrei dois erros: - Primeiro Erro: Quando o div automaticamente começa a se movimentar, seu eu colocar o mouse sobre ele, antes de terminar o movimento, o div dá uma pulada direto para o topo !! "Eu não quero isso" !! Eu quero que se eu colocar o ponteiro do mouse sobre o div, que ele não dê esta subida repentina para o topo !! Que faça o movimento para o topo sem interrupção, mesmo se antes eu puser o ponteiro do mouse !! - Segundo Erro: Depois que o div cheguar ao topo, Se eu colocar o mouse nele, o fundo muda de cor, por animation ! Mas após isso, quando eu retiro o ponteiro do mouse, o div novamente cai para top:200px e começa o movimento para top:0px novamente ! O que eu quero é: que o div mova somente "uma vez" and "pare" em top:0px !! Depois de parar em top:0px, que fique intacto pra sempre e apenas faça o movimento de mudar a cor do fundo com o passar do mouse !! I tentei procurar na internet mas não achei algo que resolvesse esses dois problemas descritos acima ! Se possível, alguém poderia me dar uma ajuda testada que realmente funcione ?? Agradecido Carlos
