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 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?
    • By Jeff123
      Olá,

      Depois de muito pesquisar, acabei fazendo minha HP com um Iframe.

      Conheço um pouco de Html e só. Já tentei fuçar no PHP,  com o famoso "Include", mas acabei desistindo.

      Tenho muitas páginas e o Menu de um lado facilita o acesso do outro lado.

      Meu site é composto de uma página "index.html" que fica à esquerda da tela e, à direita, ficam os conteúdos, de acordo com que o usuário clica no Menu.

      Nos desktops, o site funciona bem.

      Nos Smartphones, a aparência é bem razoável e é mais ou menos assim :
       

       
       
       
      ================================



      Só que há pouco tempo, li que o Google anunciou que vai dar prioridade de indexação às páginas adaptadas a dispositivos móveis.

      Muito bem. Coloquei a meta tag na Head da index.html :
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 maximum-scale=1.0">  
      Aí, começaram os problemas. O site ficou assim :
       




      A mesma Meta Tag também foi colocada em todos os conteúdos que ficam à direita, mas ... não resolvem os problemas.

      Poderiam ajudar?

      Agradeço antecipadamente.

      Jeff

       
    • By vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
    • By bolla79
      TEnho uma barra de contraste em um página que utiliza iframe.
      Quando clico no contraste para mudar, muda a página toda, menos a que está dentro do iframe. Só muda se eu atualizar com o botão direito depois o iframe
      Teria como cada vez que eu clicar no contraste, dar um reload apenas no iframe? muda a página por fora normalmente e reload no iframe.
       
      Abs
       
      Paulo
×

Important Information

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