Post sobre |Dicas blog, imagem, Pc windows

Exemplos de Tamanho de iframe

Pode parecer uma coisa simples para alguns...

Alguns testes de iframe, já que vi uma duvida de alguém em outro blog, e também quis testar como ficaria no blog. O código para eles está na área azul(textarea) após cada um deles, Coloquei o código para este tipo de textarea no final do post, pra quem achar interessante.

Se quiser copiar o código, é necessário selecionar manualmente, o fundo do textarea apenas muda de cor, nada mais. Veja do que estou falando nessa página.

scrolling="no" ou "yes" é para a barra de rolagem.
O uso de scrolling="yes" vai depender da necessidade e de alguns testes de como funciona em diferentes navegadores se for usar % para especificar o tamanho, pode ser necessário.

width="90%"(largura) height="90 px" cols e rows não funcionar com iframe.
px=pixel ou % isso vai variar do gosto, necessidade ou alguns funcionam melhor com determinado navegador... ou o style css da pagina.

name="iframe-01" é o nome do iframe caso eu queira usar um link...

Se alguém tiver mais alguma dica, o que não é difícil, já que sei pouco e meu conhecimento é baseado em testes... Deixe seu comentário, link...
Abaixo está o código do iframe:

<iframe name="iframe-01-CORRETO" src="//www.google.com" width="350 px" scrolling="yes" height="90 px"> </iframe>


teste link para mudar pagina do iframe, google search para yahoo

Abaixo está o código do link:

<a href='//search.yahoo.com' target='iframe-01-CORRETO' title='testar como funciona link para iframe'> teste link para mudar pagina do iframe, google search para yahoo </a>



Mais sobre como usar links em iframes, tamanho ajustável nessa outra página

<iframe name="iframe-02-CORRETO" src="//foitestado.com/privaci/" width="90%" scrolling="no" height="90 px"></iframe>


Faça um teste diminuindo a janela do navegador para ver como o iframe se comporta.(Pelo que vi esse iframe fica menor que o textarea)



Tentei colocar borda em volta do iframe e não consegui, poderia tê-lo colocado dentro de uma div para dar esse efeito.



Para ver um exemplo de como funciona o iframe em uma página com outro layout ou style css, já que o desse blog usa width="%" na maioria de suas divs veja aqui

Textarea

BACKGROUND: #c3d9ff; é a cor azul original
onmouseover="this.style.background='#003366'" é a cor azul que ficara quando mouse tiver sobre a área
onmouseout="this.style.background='#C3D9FF'" é a cor azul que ficara quando tirar o cursor da área.
rows="4" cols="20" altura e largura, mas não confunda com BORDER-LEFT: white 4px outset; que trata da borda.
Tentei colocar scrolling="no" para retirar a barra de rolagem mas não deu certo.
ATENÇÃO: o código para textarea está dentro dele. É necssario selecionar o texto, ele não faz isso apeas muda a cor para facilitar a leitura.
Inicio do post, iframe.


2 comentários:

  1. esse negocio
    é muito complikado
    + legal

    Responder
  2. Parabens.
    Que fixe estas dicas.
    Vou voltar, obrigada.

    Responder

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!