Jump to content
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

Share this post


Link to post
Share on other 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)

Share this post


Link to post
Share on other 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;
}
 

Share this post


Link to post
Share on other 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

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 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>  
    • By Motta
      IBM e Microsoft assinam acordo com Vaticano, por uma Inteligência Artificial ética
    • By cheikspirit
      Está chegando a Olivia, um app gratuito que é uma revolução do gerenciamento de finanças pessoais. Uma assistente financeira inteligente e gratuita que te ajuda a fazer mais com seu dinheiro. Para ser um dos primeiros a testar o serviço, basta clicar no link https://www.olivia.ai/r/nouJJzuDEs/d
    • By Amanda2019
      Pessoal, 
       
      Tenho uma página principal que tem um IFRAME até ai tudo bem eu quero que o conteúdo dessa página seja redimensionado conforme a página principal
       
      <iframe src="SlidePromo/slider.html" style="width: 100%; height: 599px;" frameborder="0" scrolling="NO" marginheight="0" marginwidth="0" ></iframe> A página slider tem um carrocel que quando eu abro só a página slider.html ela já está redimensionando automátivo. Quero fazer na principal que chama ela
    • By delgps
      Pessoas tem como eu carregar o wordpress dentro de um iframe.
      Eu preciso colocar dois iframe um para carregar o wordpress e outro para carregar um player de radio online. O iframe é para navegar no site sem interromper o áudio da rádio.
      Tentei colocar dentro de um iframe e carregou a primeira tela porém os outros links estão todos como link não encontrados.
      Tem como rodar o wordpress dentro de um iframe?
×

Important Information

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