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 Motta
      IBM compra Red Hat por US$ 34 bilhões, no 3º maior negócio do setor de tecnologia
    • By MateusDuarte
      Gostaria de uma ajuda de vocês, estou upando alguns vídeos no google drive, e gerando um código para colocar em meu site.
      Consigo visualizar ele normalmente no navegador web, e também em celulares android.
      Porem no navegador Safari para Ios ele não abre, sabem qual o problema?
       
      Segue o código que o google drive gera:

       
      <iframe src="https://drive.google.com/file/d/1Vcv1xLzitK_RaR0U5keQ9Zk92p6shDYY/preview" width="700" height="430"></iframe>  
    • By Henrique Flausino
      Olá.
      Preciso ocultar uma DIV que está dentro de um IFRAME, porém não consigo.
      Esta DIV está identificada por um ID, porém mesmo montando um CSS especifico para ocultar ela, a mesma continua aparecendo.

      Estou usando o seguinte CSS.
      <style type="text/css"> #topo-conteudo { display: none } </style> Alguém poderia me dar uma luz de como posso ocultar está DIV?
      Meu IFRAME carrega uma página de outro site.
    • By 4Unknow
      Bom dia caros.

      Desenvolvi um site todo em HTML.
      Porém, gostaria de saber se consigo de alguma maneira sem ser usando curl por que não sei usar e teria que converter todo para php
      o site.
       
      Se existe uma forma com iframe ou java, puxar de certa área de um determinado site as notícias de lá.
      Ou se existir uma outra forma eu também estou disposto a ouvir.
       
      Agradeço pela colaboração de todos.
      Obrigado.
    • By rangelzs
      Galera estou com uma duvida. Eu fiz um Iframe de um site para colocar em outro.
      Porem, eu nao quero que apareça alguns elementos do iframe, e preciso q ele redimensione com o template.
       
      Eu precisaria q o header e o menu esquerdo desaparecesse. Como eu faco isso?
       
      meu css eh esse:
       
       iframe { height: 100% absolute; width: 100% ; resize: both; overflow: auto; }
       
      E o iframe esse 
       
      <IFRAME name=framers 
      src=http://www.valecrenault.com.br/seminovos/ width=1000 height=990 frameborder=0 scrolling=yes >
      </IFRAME>
×

Important Information

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