Ir para conteúdo

Arquivado

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

bfigueiredoc

Colocar iframe no canto inferior do site

Por , em Desenvolvimento frontend

Recommended Posts

bfigueiredoc    0

bfigueiredoc
Postado

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

Thalles Rangel    0

Thalles Rangel
Postado

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

bfigueiredoc    0

bfigueiredoc
Postado

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

ShadowDLL    2

ShadowDLL
Postado

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

o z-index

 

LINKs

POSITION

Z-INDEX

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Sapinn
      Erro no iframe
      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?
    • Shizo_BR
      Iframe para radio player
      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>  
    • viniciusfroner
      iframe google maps
      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>  
    • dadev046
      Há como impedir que um vídeo "embedado" redirecione para o site de origem dele?
      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.
    • Elias meirelles
      IFRAME
      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.

  Aceito