Publicado em 7 de nov.

Empilhamento de Elementos

#css #desenvolvimento-frontend #empelhamento

Boa Noite,

Pessoal estou montando um site de fotografia, tenho uma página que se chama vídeos onde eu estou listando os vídeo do banco de dados.Assim, acontece que estou com dificuldade de empilhar esses vídeos quando diminui o tamanho da tela, onde vem um vídeo a subir sobre o outro. Peço desculpa se estiver criando tópico duplo, mas procurei e nada de conseguir resolver e no momento só resta isso para finalizar o trabalho.

<div class="container-fluid">
	<div class="container">
 <div id="gallery" class="row">
 <div class="col-12 col-xs-12">
 <h1>Vídeos</h1>
 </div>
 </div>
 <!--- Busca do Vídeo --->
 <?php
 require_once 'database/mysql.php';
 $db = new Mysql;
 $db->query( "select * from video order by video_id desc" )->fetchAll();
 if ( $db->rows >= 1 ):
 $videos = $db->data;
 ?>

 <div class="col-12 col-xs-12">
 <div class="row">
 <?
 foreach ( $videos as $video ):
 $v = ( object ) $video;
 ?>
 <div class="col-6 col-xs-6 box-video">

 <a href="http://www.youtube.com/embed/<?= $v->video_cod ?>?autoplay=1"
 class="various fancybox.iframe" url="<?= $v->video_cod ?>">
 <img src="http://img.youtube.com/vi/<?= $v->video_cod ?>/hqdefault.jpg">
 <span class="play"><img src="images/img-play.png"></span>
 <p style="margin-top:-20px; color:#fff;padding-left:10px;"><?= strip_tags($v->video_title) ?></p>
 </a>

 </div>
 <? endforeach; ?>
 <?
 endif;
 ?>

 </div>
 </div>
	</div>
</div>

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Public2004· 8 de nov.

Se estiver usando o Bootstrap, existem alguns erros aí... Sem entrar em detalhes e apenas esclarecendo sua dúvida, para empilhar seus vídeos em menores resoluções, defina no loop a coluna para "col-xs-12" e acrescente outra classe conforme a quantidades de colunas desejada para resoluções maiores.

Se não for o BS ou seja mas que tenha alterado classes, posta o css.

Att.

Rzorr· 9 de nov.

Bom Dia,

Desculpe a demora em responder. Estou usando BS a definição par col-xs-12 conforme código abaixo? Desde já agradeço pela ajuda.

<?
foreach ( $videos as $video ):

 $v = ( object ) $video;
 ?> <div class="col-12 col-xs-12">
 <div class="col-6 col-xs-6 box-video">
 <a href="http://www.youtube.com/embed/<?= $v->video_cod ?>?autoplay=1"
 class="various fancybox.iframe" url="<?= $v->video_cod ?>">
 <img src="http://img.youtube.com/vi/<?= $v->video_cod ?>/hqdefault.jpg">
 <span class="play"><img src="images/img-play.png"></span>
 <p style="margin-top:-20px; color:#fff;padding-left:10px;"><?= strip_tags($v->video_title) ?></p>
 </a>
 </div>
 </div>

 <? endforeach; ?>

Public2004· 9 de nov.

<div class="container-fluid">
	<div class="container">
 <div id="gallery" class="row">
 <div class="col-xs-12">
 <h1>Vídeos</h1>
 </div>
 </div>
 <!--- Busca do Vídeo --->
 <?php
 require_once 'database/mysql.php';
 $db = new Mysql;
 $db->query( "select * from video order by video_id desc" )->fetchAll();
 if ( $db->rows >= 1 ):
 $videos = $db->data;
 ?>
 <div class="row">
 <?
 foreach ( $videos as $video ):
 $v = ( object ) $video;
 ?>
 <div class="col-xs-12 box-video">
 <a href="http://www.youtube.com/embed/<?= $v->video_cod ?>?autoplay=1"
 class="various fancybox.iframe" url="<?= $v->video_cod ?>">
 <img src="http://img.youtube.com/vi/<?= $v->video_cod ?>/hqdefault.jpg">
 <span class="play"><img src="images/img-play.png"></span>
 <p style="margin-top:-20px; color:#fff;padding-left:10px;"><?= strip_tags($v->video_title) ?></p>
 </a>
 </div>
 <?
 endforeach;
 ?>
 </div>
 <?
 endif;
 ?>
	</div>
</div>

	 

	Acima com a estrutura correta do BS para o seu caso. No loop dos vídeos, acrescente na div "box-video" a classe do BS de acordo com a quantidade de colunas para maiores resoluções, tipo: "col-sm-*".

	Você realmente precisa de um container fixo dentro de um container fluido?

	A não ser que tenha criado essas classes "col-6", "col-12", elas não fazem parte do BS.

	 

	Att.

Rzorr· 9 de nov.

Opa,

Deu certinho, a respeito do container eu usei ele por que ele deixa o conteúdo bem ao centro e não tanto para o lado esquerdo da tela.

Estou com mais uma dificuldade em uma outra página o rodapé fica no meio da página e não no fim, vou postar o código aqui para você ver, na página vídeo funciona certinho, mas nessa outra página não.

<div class="container-fluid">

 <div class="container">
 <div class="row">
 <div class="col-xs-12">
 <?php require_once 'gallery.php'; ?>
 </div>
 </div>
 </div>

<footer class="footer">
	<div class="container">
 <div class="row">
 <div class="col-xs-6">
 <p class="titlePe"> Redes sociais</p>
 <a href="https://www.facebook.com/studiofotoab"><img src="images/if_facebook_circle_gray_107140.png" width="36" height="36"></a>
 <a href="instagram.com/fotografiaab"><img src="images/if_instagram_circle_gray_107138.png" width="36" height="36"></a>
 <a href="#"><img src="images/if_youtube_circle_gray_107133.png" width="36" height="36"></a>
 </div>

 <div class="col-xs-6">
 <p>Testes</p>
 <p>Rua:Rio jurubu, 112</p>
 <p>Rio jurubu, Itajai/SC</p>
 <p>Fone: (47)9.9999999</p>
 <p>Fone: (47)9.9999999</p>
 </div>
 </div>

 <div class="row">
 <div class="col-xs-12">
 <p align="center">Desenvolvido Por RBS WEB</p>
 </div>
 </div>
	</div>
	</div>
</footer>

Public2004· 9 de nov.

Se você está fazendo inclusão de arquivos, cuidado para não repetir ou utilizar divs e classes desnecessárias...

Na questão de manter o "footer" no final quando houver pouco ou nenhum conteúdo, você pode definir a altura do container (conteúdo/miolo) com altura "100vh" ou utilizar técnicas como:

http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php
http://tableless.com.br/colocar-rodape-fixo-no-bottom/

Att.