Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

DinhoPHP

Div flutuante

Recommended Posts

Olá gente!

No site que estou trabalhando, preciso fazer guia de favoritos que fica posicionada sempre à direita e ao ser clicada, exibe os imóveis favoritos, como no site do Zap Imóveis. Estou com dificuldades de como fazê-la ficar visível a todo tempo. Dei uma interrompida no código (por motivo de força maior) e pouco tenho ainda,  mas deixarei o código. Caso alguém saiba até o que devo pesquisar, por favor, me avise.

 

O resultado pode ser visto clicando aqui!

 

home.php

<?php
		require_once("include/head.php");
	?>
 
	<body>
		<div style="display:none;" class="tips"><?=__FILE__?></div>

		<div class="tail-top">   
			<?php
				require_once (DIR_BLOCO . "/header_home.php");
				//require_once(DIR_BLOCO . "/bloco_busca_topo.php");
			?>
			<div class="ImageTop"> 
				<?php
				 require_once(DIR_BLOCO . "/bannerhome.php");  
				?>
				<?php require_once(DIR_BLOCO . "/bloco_busca_home.php"); ?>
			</div>

            <div class="mainhome">

                <?php
					require_once(DIR_BLOCO . "/autenticacao.php");  
					/*require_once(DIR_BLOCO . "/box_mapa.php");*/    					
					require_once(DIR_BLOCO . "/bloco_anuncios_destaques.php");  
					require_once(DIR_BLOCO . "/bloco_banners_meio.php"); 
					require_once(DIR_BLOCO . "/bloco_cidades_destaque.php"); 
					require_once(DIR_BLOCO . "/bloco_noticias_destaques.php");
					require_once(DIR_BLOCO . "/bloco_botao_anuncie_rodape.php");  
				 ?>

			</div>

		</div>

        <div id="show_favorite" class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">

            <?php
            require_once(DIR_BLOCO . "/bloco_favorite_div.php"); /*AQUI É O ARQUIVO DA DIV FAVORITOS*/
            ?>

        </div>

		<?php require_once(DIR_BLOCO . "/rodape.php"); ?>
	</body>
</html>

 

bloco_favorite_div.php

<div style="display:none;" class="tips"><?=__FILE__?></div>

<div id="box_favorite" style="background-color: #00307d;">
    <i class="fa fa-heart-o 1g" aria-hidden="true"></i>

        <div id="content_btn_favorite" class="col-md-4">

            <h2>FAVORITOS</h2>

            <div id="content_divs_favorite">

                <div id="divs_favorite">

                </div>

            </div>

        </div>
</div>

css_div_favorite.php

/* DIV DOS FAVORITOS */

#show_favorite{
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    border-color: red;
    height: 500px;
    width: max-content;
}

#box_favorite{

}

#content_btn_favorite{

}

#content_divs_favorite{

}

#divs_favorite{

}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu gosto de fazer assim:

Como todo elemento é uma box porque não tratar tudo como box?

Basta criar os contêineres por linha, dividir seus tamanhos em proporção a tela.

Assim fica fácil posicionar elementos, basta colocar o que quiser dentro de cada box já posicionada.

O mesmo pode ser feito internamente a cada box dividida, ou seja dividir ou alinhar da forma que bem desejar.

Veja isso:

Spoiler

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box
	}
	.box-mae {
		position: relative
	}
	.box-mae:before, .box-mae:after {
		content: "";
		display: table;
		clear: both
	}
	.esquerda, .direita {
		float: left;
		padding: 10px;
		display: inline-block
	}
	.esquerda {
		width: 70%;
		background-color: red
	}
	.direita {
		width: 30%;

		background-color: blue
	}

</style>

<div class="box-mae">
	<div class="esquerda">
		coloque o que quiser aqui dentro
	</div>
	<div class="direita">
		coloque o que quiser aqui dentro
	</div>
</div>

 

Lógico coloquei cor de fundo só para demonstrar suas delimitações. Com a aplicação de media dar para se criar responsivo suavemente usando essa técnica

 

Bem foi mais ou menos isso que entendi, se não for poderia explicar melhor esse negócio de clicar e exibir, não é para sempre está visível?

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 03/12/2017 at 07:23, Omar~ disse:

Eu gosto de fazer assim:

Como todo elemento é uma box porque não tratar tudo como box?

Basta criar os contêineres por linha, dividir seus tamanhos em proporção a tela.

Assim fica fácil posicionar elementos, basta colocar o que quiser dentro de cada box já posicionada.

O mesmo pode ser feito internamente a cada box dividida, ou seja dividir ou alinhar da forma que bem desejar.

Veja isso:

  Ocultar conteúdo


<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box
	}
	.box-mae {
		position: relative
	}
	.box-mae:before, .box-mae:after {
		content: "";
		display: table;
		clear: both
	}
	.esquerda, .direita {
		float: left;
		padding: 10px;
		display: inline-block
	}
	.esquerda {
		width: 70%;
		background-color: red
	}
	.direita {
		width: 30%;

		background-color: blue
	}

</style>

<div class="box-mae">
	<div class="esquerda">
		coloque o que quiser aqui dentro
	</div>
	<div class="direita">
		coloque o que quiser aqui dentro
	</div>
</div>

 

Lógico coloquei cor de fundo só para demonstrar suas delimitações. Com a aplicação de media dar para se criar responsivo suavemente usando essa técnica

 

Bem foi mais ou menos isso que entendi, se não for poderia explicar melhor esse negócio de clicar e exibir, não é para sempre está visível?

Muito obrigado Omar e desculpe a demora, testarei este exemplo e direi com  exatidão se é o que desejo. Sobre a div ficar no canto, não desejo que fique oculta, mas que seja retrátil, se visitar o site do zap imóveis no PC, terá uma ideia legal do que desejo ao observar os imóveis adicionados em favoritos. Muito obrigado e até breve!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então Omar, o seu código até me elucidou bem, mas pelo pouco que mexi, com a div esquerda com o tamanho 100% a div direita se sobrepões a esquerda como desejo, porém o float right não funciona e o margin-lef não me atendeu satisfatóriamente.

 

até o momento

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }
        .box-mae {
            position: relative
        }
        .box-mae:before, .box-mae:after {
            content: "";
            display: table;
            clear: both
        }
        .esquerda, .direita {
            float: left;
            padding: 10px;
            display: inline-block
        }
        .esquerda {
            width: 70%;
            height: 1200px;
            background-color: red
        }
        .direita {
            float: right;
            overflow-y: auto;
            margin-top: 100px;
            width: 300px;
            height: 450px;
            background-color: blue;
            display: block;
            position: fixed;
            margin-left: 77%;
        }

        #title_content{
            text-transform: uppercase;
            font-size: 1em;
            display: inline-block;
        }

        .content{
            background-color: #ffffcc;
            margin: 10px;
        }

    </style>

</head>
<body>

<div class="box-mae">

    <div class="esquerda">

    </div>

    <div class="direita">

        <div id="title_content">FAVORITOS</div>

        <div class="content">
        <h3>coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        </h3>
        </div>

        <div class="content">
        <h3>coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        </h3>
        </div>

        <div class="content">
        <h3>coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        </h3>
        </div>

        <div class="content">
        <h3>coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        </h3>
        </div>

        <div class="content">
        <h3>coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        </h3>
        </div>

        <div class="content">
        <h3>coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        </h3>
        </div>

        <div class="content">
        <h3>coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        </h3>
        </div>

        <div class="content">
        <h3>coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        </h3>
        </div>

        <div class="content">
        <h3>coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        coloque o que quiser aqui dentro
        </h3>
        </div>

    </div>
</div>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Muito obrigado mais uma vez pela luz Omar, porém fui mexendo e consegui resolver. Acabei achando em um tópico aqui mesmo, o uso do right no CSS de uma maneira como ainda não tinha feito, mas é claro que com as adições do que sei também rs. O administrador, pode fechar este tópico.

 

código com a solução e classes desnecessárias ainda não removidas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Teste Janela Fixa</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <?php
    $ROOTPATH = "site/";
    ?>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }
        .box-mae {
            position: relative
        }
        .box-mae:before, .box-mae:after {
            content: "";
            display: table;
            clear: both
        }
        .esquerda, .direita {
            float: left;
            padding: 10px;
            display: inline-block
        }
        .esquerda {
            width: 70%;
            height: 1200px;
            background-color: red
        }

        .direita {
            overflow-y: auto;
            margin-top: 100px;
            width: 205px;
            height: 450px;
            background-color: #f9f6f7;
            display: block;
            position: fixed;
            right: 0;
            border: 1px solid #dcd8cd;
            box-shadow: 0 0 12px rgba(0,0,0,0.25);
            border-radius: 5px 0 0 5px;
            top: 160px;
            z-index: 1000;
        }

        .btn_favorite{
            position: absolute;
            width: 28px;
            top: 32px;
            left: 0;
        }

        .try_indicator{
            width: 28px;
            height: 103px;
            margin-top: 138px;
            background-color: #007aa5;
            position: fixed;
            cursor: pointer;
        }

        .try_indicator:after{
            content: '';
            width: 0;
            height: 0;
            border-right: 9px solid #fff;
            border-top: 11px solid transparent;
            border-bottom: 11px solid transparent;
            position: absolute;
            top: 41px;
            left: 8px;
        }

        .title_content{
            text-transform: uppercase;
            font-size: 1em;
            display: inline-block;
            margin-left: 27px;
            position: fixed;
        }

        .title_rot_90{
            height: auto !important;
            overflow: visible !important;
            padding-top: 5px;
            padding-bottom: 10px;
            font-weight: 600;
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
            white-space: nowrap;
        }

        .content{
            margin: 10px;
            padding-top: 10px;
            float: right;
        }

        .content img{
            width: 130px;
            height: 120px;
        }

    </style>

    <script>
        $(function() {

            $('#caixa').jScrollPane();
        });
    </script>

</head>
<body>

<div class="box-mae">

    <div id="caixa" class="direita">

        <!--<i class="fa fa-heart-o 1g" aria-hidden="true" style="color: red;"></i>-->
        <i class="fa fa-heart" aria-hidden="true" style="color: #FF0000; position: fixed;"></i>

        <div class="title_content">FAVORITOS</div>

        <div class="btn_favorite">

            <!-- <div class="title_rot_90">FAVORITOS</div>-->

            <div class="try_indicator">

            </div>

        </div>

        <div class="content">
            <img src="<?php echo $ROOTPATH;?>/media/team/2017/0901/15042944807003.jpg"/>
        </div>

        <div class="content">
            <img src="<?php echo $ROOTPATH;?>/media/team/2017/0901/15042944807003.jpg"/>
        </div>

        <div class="content">
            <img src="<?php echo $ROOTPATH;?>/media/team/2017/0901/15042944807003.jpg"/>
        </div>

        <div class="content">
            <img src="<?php echo $ROOTPATH;?>/media/team/2017/0901/15042944807003.jpg"/>
        </div>

        <div class="content">
            <img src="<?php echo $ROOTPATH;?>/media/team/2017/0901/15042944807003.jpg"/>
        </div>

        <div class="content">
            <img src="<?php echo $ROOTPATH;?>/media/team/2017/0901/15042944807003.jpg"/>
        </div>

        <div class="content">
            <img src="<?php echo $ROOTPATH;?>/media/team/2017/0901/15042944807003.jpg"/>
        </div>

    </div>
</div>

</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Claudia França
      Pessoal tudo bem ?
      Tenho o codigo e, preciso que quando um usuário clicar no link  e a nova página carregar, não mostre o que tem na url, mas o conteudo. 
      Pensei em um Js para criar essa máscara mas, até agora não deu certo com as funções que fiz. 
       
            <div id='50' class="tab_content-pag-bnt2">         <div class="bnt-area">              <a href="https://meudomínio.net/drive/s/bK7Xq8hW6kDWXYAdUaMUf26hZabh9T" target="_blank"  class="new-serverbtn-link" > <div class="new-serverbtn"> <div class="new-serverbtn-text">Acessar pasta de episódios</div> <div class="new-serverbtn-icon"><i class="fas fa-chevron-right"></i></div> </div> </a>
    • Por ro1961santana2009
      Estou precisando de ajuda. Está seguindo os arquivos em anexo. Tem como centralizar uma (MSG global), do PHP que vem da MODELS, que vai ser apresentada na VIEW.

      Estou Implementando o meu sistema com base no sistema do curso, ao modificar o layout da página de acesso estou enfrentando este problema de centralizar a mensagem que vem da MODELS, para a VIEW.



    • Por Manoel Cicero
      bom, estou utilizando um programa que transforma ppt em html5. coloco o arquivo gerado em minha hospedagem, testo, funciona perfeitamente no pc ou notebook, até aí tudo bem!
      mas quando testo no smartphone ai complica!
      o desenvolvedor me indicou limpar o cache, mas, mesmo assim não funciona e o pior de tudo é que, se isso não funcionasse apenas no meu smartphone não seria problema. o problema é que ja testei em alguns outros e o problema se mantem. alguem poderia me ajudar?
      link de teste: http://www.biodidata.com.br/teste/revis.html
      no PC - tudo ok!
      No smartphone --> na imagem que surgir vá em "click para iniciar", em seguida clique na pergunta 2 - a página para!
      limpar o cache não funciona e não queria alterar qualquer coisa no smartphone porque não seria legal para o meu publico fazer alterações no seu celular só pra ver uma coisa que disponibilizo.
      agradeço!
    • Por Juan Carlos PT
      Olá, eu quero poder pegar um vídeo do meu canal na Nimo TV e deixar ele em sites parceiros para fortalecer a minha divulgação. Só que não consigo capturar o código <video></video> do html5 do site na Nimo TV. Eles não mostram o formato do vídeo:
       

      Se alguém souber me ajudar, terei enorme gratidão!
       
      OBS: Perdão se alguém postou algo parecido aqui no site, não vi!

    • Por danicarla
      Olá pessoas,

      Estou tentando fazer uma versão de impressão usando CSS eu queria colocar um cabeçalho e um rodapé em todas as paginas,  O problema é que o conteúdo vem do banco de dados,  e dependendo do tamanho dos parágrafos em algumas vezes o texto acaba ficando em cima do cabeçalho ou do rodapé.. alguém tem alguma idéia de como posso fazer isso?
       
      Meu cód está assim:
       
      header {font-family:Arial;font-size: 22px;color: #000;text-align: center;} footer {font-family:Arial;font-size: 10px; color: #CD090C;text-align: center;} article {font-family:Arial;font-size: 14px; color: #000;text-align: justify;} @page {size: A4;margin: 11mm 17mm 17mm 17mm;} @media print { header {position: fixed;top: 0;} footer {position: fixed;bottom: 0;} article {position: relative;top:40px;} .content-block, p {top:40px;page-break-inside: avoid;} html, body {width: 210mm;height: 297mm;} } E no HTML
       
      <header>CABEÇALHO</header> <article>Conteudo.. texto.. etc..</article> <footer>Texto do Rodapé</footer>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.