Ir para conteúdo
bfigueiredoc

Colocar iframe no canto inferior do site

Recommended Posts

Olá! Estou iniciando na área de programação e estou com uma dúvida... foi passada uma atividade na faculdade em que fizemos um chatbot no ibm cloud e a segunda parte dessa atividade é criar uma pagina web com o chatbot incluso na mesma. Dai, gostaria de saber como posso colocar esse chatbot tipo flutuante no canto inferior da página web... lembrando que o ibm cloud fornece a url do chat criado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Posta o código, mas é basicamente

CSS:

 

.class{

 bottom: 0px;

}

 

ops, é necessário definir se não me engano um position:aboslute para ele flutuar, quem sabe também um z-index: 1 (para ele ficar visível)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá, thalles!! Meu código CSS é esse:

 


.rodape{
    width:  100%;
    background-color: #007BFF;
}

.texto_rodape{
    color: #FFF;
    text-align: center;
}
.tamanho_slider{
    height:400px;
}
#iframe {
  top: -230px;
  left: -25px;
  position:relative;
  width: 800px;
  height: 1600px;
}
#container {
  overflow: hidden;
  height: 560px;
  width: 750px;
  position: relative;
}
 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Segue exemplo:

 

CÓDIGO

<!DOCTYPE HTML>
<html>
	<head>
		<title> EXAMPLE </title>

		<style type="text/css">
			.chat {
				background-color: #999999;
				position: absolute;
				padding: 5px 20px;
				width: 10%;
				bottom: 0;
				right: 0;
			}
			.chat .status {
				text-align: center;
			}
			.chat .status span {
				text-transform: uppercase;
				font-weight: bold;
				color: #FFFFFF;
			}
		</style>
	</head>

	<body>
		<div class="footer"></div>

		<div class="chat">
			<div class="status">
				<span>Online</span>
			</div>
		</div>
	</body>
</html>

 

Caso o mesmo fique abaixo de algum elemento, utilize

z-index

 

LINKs

POSITION

Z-INDEX

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Sapinn
      Galera estou com um problema estranho, eu tenho um iframe que puxa um outro site meu, ele puxa normal o problema é que esse site que eu mostro no iframe possui alguns menus e botões que eu não consigo clicar neles é como se a função de clique não funcionasse, a parte mais estranha é que na minha maquina local funciona normalmente só no meu ambiente de produção que tem esse problema , como devo fazer para resolver?
    • Por Shizo_BR
      Preciso criar um iframe contendo um player, que não pare o audio enquanto navego pelo site. Vou mostrar a baixo o código que incorporei ao meu wordpress, porém não estou conseguindo fazer o "no refresh" quando mudo de pagina.
       
      <div style="position: fixed; bottom: 25px; left: 25px; z-index: 999999;"> <BR/> <BR/> <span class="radio-iframe-close" aria-label="toggle" style="font-size: 1.5rem; color: #fff; position: absolute; top: 0; background: #4e203c; padding: .25rem;">AO VIVO!</span> <iframe class="radio-iframe" src="URL Player" style="width: 314px; heigh: 31px; border: 0;" allow="autoplay; fullscreen" scrolling="no"></iframe> </div> <script type="text/javascript"> (function($) { $(function() { $('.radio-iframe-close').click(function(){ $('.radio-iframe').toggle(); }); }); })(jQuery); </script>  
    • Por viniciusfroner
      Boa noite, gostaria de saber se alguém conhece algum plug-in que gere esse tipo de mapa, no caso a antiga API do google que fazia isso está off..
       
       
      <div> <iframe style="border:0; width: 100%; height: 350px;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12097.433213460943!2d-74.0062269!3d40.7101282!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb89d1fe6bc499443!2sNome+SegundoNome!5e0!3m2!1smk!2sbg!4v1539943755621" frameborder="0" allowfullscreen></iframe> </div>  
    • Por dadev046
      Olá, estou tendo problemas com os vídeos "embedados", porque sempre que a pessoa está assistindo, se ela por acaso clicar na tela ao invés de clicar no botão de pause, ela é redirecionada para o site de origem do vídeo, e isso atrapalha bastante, então gostaria de saber se há como resolver isso, desde já, agradeço.
    • Por Elias meirelles
      Bom dia eu sou novo em programação eu queria saber como eu faço para colocar um vídeo embedado do youtube no meu site sem os comando e sem a logo do youtube alguém me ajuda ? esse e o código. 
       
      <iframe width="560" height="315" src="https://www.youtube.com/embed/ba34ILUcGAI?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>  
×

Informação importante

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