Jump to content
marcelobbt

GRID - DIV dentro de outra DIV

Recommended Posts

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>

 

 

 

Share this post


Link to post
Share on other sites

Parece não fazer sentido pois usei parte do meu código e coloquei um exemplo simplificado apenas para tentar exemplificar o meu problema.

Share this post


Link to post
Share on other sites

@marcelobbt
Você declara um GRID de 5 colunas.
Posiciona o div principal em 2/5 e ele ocupa a segunda terceira e quarta colunas da 1a. linha.
Omite o posicionamento de col 1 e por padrão ele vai ocupar a quinta coluna da 1a. linha.
Omite o posicionamento de col 2 e por padrão ele vai ocupar a primeira coluna da 2a. linha com seus elementos
filhos.
Posiciona esquerda e direita nas linhas 1 / 5 quando só existem duas linhas no seu GRID!
O código do seu GRID não faz sentido!
 

Share this post


Link to post
Share on other sites

Como falei, peguei apenas parte do código.

Tem duas colunas, uma em cada lateral. Apenas não indiquei no html. De qualquer forma o link que você passou já me deu a dica de como fazer. Obrigado e desculpa se compliquei a coisa.

 

O que precisava era tratar a classe "col2" como um grid ("display: grid;") assim como o container, aí vai atender ao que eu quero.

 

 

Share this post


Link to post
Share on other sites

usa float:left (uma div ficará do lado da outra)

O float:left; vai em um dos dois, testa.
.gridcontainer {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 3fr 3fr 3fr 1fr;  
  grid-gap: 3px;
//float:lef;
}
.gridcontainer > div {
  /*text-align: center;*/
  padding: 10px;
  /*font-size: 20px;*/
//float:left;
}

 

Share this post


Link to post
Share on other sites

A propriedade CSS float pode causar efeitos indesejados nos grid items.
https://www.w3.org/TR/css-grid-1/#grid-containers

Como regra geral: não use floats em grid layouts.
Em um grid layout bem projetado não há necessidade de floats.

Share this post


Link to post
Share on other sites

Ola @Thalles Rangel @Maujor

 

Bom quero aqui aproveitar este post aqui

 

Quero montar o GRID

se eu fazer ele em 4 em 4 ele fica

Quando ele forma as 2 e fazer outra ficar apenas maior preenchendo os espaço das outras 3 coluna 

Ex: htm5

				<div class="row">
					<div class="col-md-4 col-sm-6">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/home_5.jpg);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3>Produtos 1</h3>
								<h6>Visitas: 33</h6>
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 col-sm-6">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/home_5.jpg);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3>Produtos 2</h3>
								<h6>Visitas: 33</h6>
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 col-sm-6">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/home_5.jpg);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3>Produtos 3</h3>
								<h6>Visitas: 33</h6>
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 col-sm-6">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/home_5.jpg);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3>Produtos 4</h3>
								<h6>Visitas: 33</h6>
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>
					<div class="col-md-8">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/home_5.jpg);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3>Produtos 5</h3>
								<h6>Visitas: 33</h6>
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>
				</div>

No meu php montei assim

GRID funciona mais não do jeito que esta do produto 5

 

				<div class="row">
 	<?php 
    while($dados = mysqli_fetch_assoc($resultado)){ 
	$id = $dados['id'];
	$titulo = $dados['titulo'];
	$imagem = $dados['imagem'];
    $visitas = $dados['visitas'];
	?>                 
                  
					<div class="col-md-4 col-sm-6">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/<?php echo $imagem; ?>);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3><?php echo $titulo; ?></h3> <!-- TITULO -->
								<h6>Visitas: <?php echo $visitas; ?></h6> <!-- VISITAS -->
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>
                    <!-- AQUI NO COL-MD-8 
QUERO QUE ELE APAREÇA QUANDO O GRID NÃO ESTIVER COMPLETO EM SUAS COL-MD4 COL-SM-6 -->
					<div class="col-md-8">
						<a href="#" class="exp-img" style="background-image: url(./assets/img/<?php echo $imagem; ?>);background-size: cover;">
							<span class="filter"></span>
							<div class="img-info">
								<h3><?php echo $titulo; ?></h3> <!-- TITULO -->
								<h6>Visitas: <?php echo $visitas; ?></h6> <!-- VISITAS -->
								<span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
							</div>
						</a>
					</div>                  
                  <?php } ?>
</div> <!-- ROW -->

 

Fazer igual da imagem ai

 

grid.jpg

Espero que tenha entendido ai o que eu quero

Share this post


Link to post
Share on other sites

Antes de sugerir a solução considere o seguinte:
Se você quer uma linha completa com três "slots" e o número total de imóveis a mostrar é indeterminado temos as seguintes situações:

  1. 1 imóvel => em uma linha de 3 slots;
  2. 2 imóveis => em uma linha, um em 1 slot e outro em 2slots;
  3. 3 imóveis => em uma linha, cada imóvel em um slot;
  4. 4 imóveis => em duas linhas, a segunda com o imóvel em 3 slots; 
  5. 5 imóveis => em duas linhas, a segunda linha com 1slot + 2slots (é o caso da figura que você postou)
  6. A partir daqui segue o mesmo padrão

    Informe se é isso.

Share this post


Link to post
Share on other sites

@Jack Oliveira

Fiz alguns testes com seu código e:
Não é uma boa ideia ajustar uma linha que não contenha 3 imóveis conforme você pretende e mostrou na figura, pois a imagem do imóvel será parcialmente mostrada e não há como corrigir isso.
Observe que na sua figura a última imagem (Com piscina) mostra apenas a parte superior da foto. E, quanto maior a tela do usuário tanto menor a faixa superior a ser mostrada.

A melhor solução é deixar que os imóveis ocupem sua área de apresentação sem completar a última linha.
Eis o código para isso:
 

<div class="container">
  <div class="row">
<?php
while ($row = $result->fetch_assoc()) {
?>
    <div class="col-md-4">
      <a href="#" class="exp-img" style="min-height: 200px;display: block;background-image: url(<?php echo $row['imagem']; ?>);background-size: 350px 200px;">
        <span class="filter"></span>
        <div class="img-info">
          <h3><?php echo $row['titulo'] ?></h3> <!-- TITULO -->
          <h6><?php echo 'Visitas: ' . $row['visitas']; ?></h6> <!-- VISITAS -->
          <span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
        </div>
      </a>
    </div>
<?php } ?>
  </div> <!-- /.row -->
</div> <!-- /.container -->



 

 

Share this post


Link to post
Share on other sites
Em 13/04/2019 at 15:21, Maujor disse:

@Jack Oliveira

Fiz alguns testes com seu código e:
Não é uma boa ideia ajustar uma linha que não contenha 3 imóveis conforme você pretende e mostrou na figura, pois a imagem do imóvel será parcialmente mostrada e não há como corrigir isso.
Observe que na sua figura a última imagem (Com piscina) mostra apenas a parte superior da foto. E, quanto maior a tela do usuário tanto menor a faixa superior a ser mostrada.

A melhor solução é deixar que os imóveis ocupem sua área de apresentação sem completar a última linha.
Eis o código para isso:
 


<div class="container">
  <div class="row">
<?php
while ($row = $result->fetch_assoc()) {
?>
    <div class="col-md-4">
      <a href="#" class="exp-img" style="min-height: 200px;display: block;background-image: url(<?php echo $row['imagem']; ?>);background-size: 350px 200px;">
        <span class="filter"></span>
        <div class="img-info">
          <h3><?php echo $row['titulo'] ?></h3> <!-- TITULO -->
          <h6><?php echo 'Visitas: ' . $row['visitas']; ?></h6> <!-- VISITAS -->
          <span class="ffs-bs btn btn-small btn-primary">Ver mais...</span>
        </div>
      </a>
    </div>
<?php } ?>
  </div> <!-- /.row -->
</div> <!-- /.container -->



 

 

Boa tarde @Maujor Entende 

Obrigado pelo conselho e bom sempre aprender e seguir conselhos e ideias 

:)

 

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

  • Similar Content

    • By JulianoRSilverio
      Alguém pode da uma ajuda para desenvolver um grid conforme a imagem, de 3 colunas e 6 items em cada coluna com pop up? Que seja responsivo?
       
      Tipo o anexo no topico, onde o oloca verde fica a imagem e a descrição alinhada a direita, e ao clicar no item, abre uma janela onde posso mostrar mais informações?
       
       
       
       

    • By AlphaPingo
      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


    • By kaique nunes
      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/ 

    • By Mauricio Molina
      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>&nbsp; (<?= $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!
×

Important Information

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