Jump to content
leandro32

Botão que chama Imagem em DIVs Diferentes

By leandro32, in HTML e CSS

Recommended Posts

leandro32    0

leandro32
Posted

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> - &copy;<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%; }

Viaualização.jpg

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing HTML e CSS

  • Similar Content

    • GOD
      Div Noticias com RSS
      By GOD
      Quero um código div ou qualquer outra forma, para atingi esse resultado do link
       https://drive.google.com/file/d/0B8Ssi9zuKdQWMExWeVpGUXN0MlRsUzdmdGRuTFl2eU1yejB3/viewocal
       
      Para ficar nesse local.
      https://drive.google.com/file/d/0B8Ssi9zuKdQWeGZSSnVBaFBxM1FUN1hEeWdrRzhTNWI0Q01Z/view
       
      Meu objetivo é que em cada quadro da div, fique uma noticia de um site especifico, que pretendo colocar através de plugin rss.
       
       
      Enfim espero uma ajuda sobre como posso fazer isso
       
       
    • clovis.sardinha
      Problema de imagem
      By clovis.sardinha
      Pessoal, não tenho certeza se coloco a dúvida aqui ou no html. Envolve os dois. 
      Eu tenho um site muito antigo, php 5.2, e resolvi mudar a página principal colocando um efeito parallax.
      No servidor local o site roda normalmente, mas no servidor da localweb as imagens do parallax não aparecem.
      a página mostrada é esta:
      <div class="container-fluid"> <!-- começo do parallax --> <div class="caixa1"> <div class="conteudo-titulo"> <!-- <span class="titulo">TECNOCLEAN - SEGURANÇA E EFICIÊNCIA</span> --> </div> </div> <div class="conteudo"> <h3>A EMPRESA</h3> <p style="width: 80%; margin: auto; text-align: justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida dolor sed mattis mollis. Morbi sodales euismod rhoncus. Suspendisse potenti. Integer hendrerit vitae lectus at feugiat. Quisque libero neque, imperdiet a est congue, elementum ultrices diam. Sed ut felis scelerisque, volutpat justo ut, congue quam. Ut non vestibulum erat, vel semper dolor. Nulla facilisi. Sed convallis at lacus quis venenatis..<br> </p> </div> <div class="caixa2"> <div class="conteudo-titulo" > <!-- <span class="titulo">NOSSO DIFERENCIAL</span> --> </div> </div> <div > <div> <ul class="list-group list-group-flush text-center font-weight-bold"> <li class="list-group-item"><h3>Tradição</h3> 26 anos de experiência</li> <li class="list-group-item"><h3>Confiabilidade</h3> mais de mil clientes</li> <li class="list-group-item"><h3>Segurança</h3> técnica e equipamentos</li> <li class="list-group-item"><h3>Garantia</h3> produtos de qualidade</li> <li class="list-group-item"><h3>Rapidez</h3> equipe especializada</li> </ul> </div> </div> <div class="caixa3"> <div class="conteudo-titulo"> <!-- <span class="titulo">CLIENTES</span> --> </div> </div> <div class="caixa4"> <div class="conteudo-titulo"> <!-- <span class="titulo">EQUIPAMENTOS</span> --> </div> </div> </div> </div> </div> O Css é este:
      /* Efeito Parallax -------------------------------*/ .caixa1, .caixa2, .caixa3, .caixa4 { position: relative; height: 100%; opacity: 0.9; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } .caixa1 { background-image:url(../imagens/principal.png); } .caixa2 { background-image: url(../imagens/insetos.png); } .caixa3 { background-image: url(../imagens/logos/clientes.png); } .caixa4 { background-image: url(../imagens/equipamentos.png); } .conteudo-titulo { position: absolute; left: 0; top: 45%; width: 100%; text-align: center; } .conteudo-titulo span.titulo { color: #fff; background-color: #111; padding: 18px; font-size: 25px; letter-spacing: 5px; text-transform: uppercase; }  
      Coloquei o arquivo com a estrutura do site e o erro que aparece na url. (um css que não deveria aparecer e dá página não encontrada)
      Coisa interessante: tanto faz colocar ../imagens/foto.png  ou imagens/foto.png e funciona no local e não no servidor.
      Se alguém tiver alguma dica para eu resolver ou testar este erro, agradeço.
       
       

       

    • TkCode
      Criação de código para calcular valores de uma tabela
      By TkCode
      Estou tentando desenvolver um código para calcular o valor final de custas de imoveis.
      Exemplo: Entro com um valor de R$50.000,00. Tem o ITBI que é 2% sob os R$50.000,00 + o valor de custas que é o valor de uma tabela (essa tabela tem valores que de R$0,01 até R$17.800,90 é uma valor, e assim sucessivamente)
       
      Então teria que calcular os 2% (do valor informado) + o valor da tabela, dando um resultado final com o valor total (2%+ValorTabela).
       
      Alguem teria como me dar uma dica de como resolver isso?
      Desde já agradeço!
    • rcsbnu27
      Página em html, css e javascript
      By rcsbnu27
      Estou tentando ajudar um amigo a desenvolver seu site pessoal ele me passou um modelo, onde não estou conseguindo fazer um link de menu quando clicar nos anos iniciais ir para as turmas dos anos iniciais no menu atividade educacionais, segue em anexo o código. Endereço para ter ideia do que estou falando: https://www.profrodrigo.com/temporario/index.html. Nesta parte:
      HTML
      <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#anosiniciais" > <img src="images/anos/anosiniciais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#anosfinais" > <img src="images/anos/anosfinais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div> </div> </div> <div class="section news-section" id="anosiniciais"> <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/pres.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/1sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/2sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/3sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/4sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div>

      <div class="section news-section" id="anosfinais">
      <div class="container">
      <div class="row">
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/5sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.ebmalbertostein.com" target="_blank">
      <img src="images/turmas/6sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.profgarrido.com" target="_blank">
      <img src="images/turmas/7sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/8sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/9sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      </div>
      </div>
      </div>
    • lezão
      Transformar table em div
      By lezão
      Ola pessoal!
      Td bem com vcs?
       
      Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar?
      <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
       
       
       
×

Important Information

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

  I accept