HTML Conteúdo do site em relação ao tamanho da tela

Natanael Marrafon Rocha · 13 de fevereiro de 2019

De que forma posso fazer com que o iframe se adaptse a postagens do meu site para aumentar a area de postagem automaticamente ?

tipo eu coloquei que meu iframe tem width:950px; e height:690px; existe uma forma que eu não precise colocar o tamanho do iframe e conforme vou postando coisas no site ele aumente o site automaticamente sem aparecer o scroll do mouse do iframe e sim do body "Pai"?

Luís Roberto C. da Silva · 13 de fevereiro de 2019

É só colocar height: auto;

Natanael Marrafon Rocha · 13 de fevereiro de 2019

Não deu certo colocando height:auto diminui a tela

Luís Roberto C. da Silva · 13 de fevereiro de 2019

1 hora atrás, Natanael Marrafon Rocha disse:

Não deu certo colocando height:auto diminui a tela

É porque vai crescendo na medida que acrescenta conteúdo. Sendo assim coloque height:100%, que vai tomar a div por completo.

DiF · 13 de fevereiro de 2019

@Natanael Marrafon Rocha Basicamente se você não tiver conteúdo que não ocupe a tela toda, vai ficar diminuído mesmo.

Mas você pode declarar um min-height para que ele(o elemento) tenha um tamanho pré-definido, mesmo se não tiver conteúdo... e então quando o conteúdo atingir o limite, vai expandir para que ele fique dentro do elemento.

Natanael Marrafon Rocha · 13 de fevereiro de 2019

Eu carreguei uma imagem e um monte de titulo para testar mas não ta dando certo olha o meu código:

HTML:

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8"/>
		<title>Site</title>
		<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
	</head>
	<body>
	<div class="tudo" align="center">
		<div class="menu">
			<ul align="center">
				<li><a href="inicio.html" target="frame1">Inicio</a></li>
				<li><a href="localizacao.html" target="frame1">Localização</a></li>
				<li><a href="contato.html" target="frame1">Contato</a></li>
				<li><a href="sobre.html" target="frame1">Sobre</a></li>
			</ul>
		</div>
		<div class="banner1">
		<img src="imagens/clinica1.jpg" width="995px" height="200px">
		</div>
		<div class="tela">
		<iframe class="meio" src="inicio.html" frameborder="0" scrolling="no" name="frame1"></iframe>
		</div>
		<div class="rodape">
		<img src="imagens/rodape.png">
		</div>
		</div>
	</body>
</html>

CSS:

body {
	padding-top:100px;
	
}

.menu {
	position:fixed;
	top:0;
	z-index:1;
	width:100%
}

.menu ul li {
	display:inline-block;
	background-color:#02ECFD;
	padding:30px;
	border-radius:20px 0 20px 0; 
	font-family:Arial Black;
}

.menu ul li a {
	text-decoration:none;
	color:white;
	
}

.menu ul li:hover {
	background-color:#038EF8;
}


.tela iframe {
	border-radius:20px 0 20px 0;
	width:985px;
	height:690px;
	border:#02ECFD;
	border-width:thick;
	border-style:solid;

}

.banner1 img {
	border-radius:20px 0 20px 0;
}

.rodape img {
	width:995px;
	height:125px;
	border-radius:20px 0 20px 0;
	padding-top:10px;
}

Olha só a imagem print se eu tirar o scrolling="no" ele aparece 2 barras de rolagem 1 do pai e a outra do iframe eu queria que aparecesse só a do pai:

Luís Roberto C. da Silva · 13 de fevereiro de 2019

É assim mesmo, tem que tirar o scroll da página principal. Aí aparece apenas dentro da div que vai adicionando conteúdo.

DiF · 13 de fevereiro de 2019

@Natanael Marrafon Rocha Na verdade, você está insistindo em usar iframe para criar o site. Veja bem, apesar de ser um elemento que ainda existe e serve para alguns casos, ele é bastante arcaico para criação de layouts e sites. isso era bastante comum nos sites dos anos 90/2000

Como mencionei em outro tópico seu, se o site for estático, ou seja, vai ter um conteúdo que não irá mudar, use o conceito do one page, ou podes usar o jquery(javascript) para inserir conteúdo no elemento desejado. dessas duas opções o one page é o mais simples e deveras mais bonito.

Então você pode usar a seguinte estrutura:

<div class="tudo">
  <header>Aqui vai o topo e o menu</header>

  <section id="localizacao">conteúdo da localização</section> 
  <section id="contato">formulário de contato</section> 
  <section id="sobre">conteúdo sobre a instituição</section> 

  <footer>Aqui é o rodapé</footer>    
</div>

Claro que eu fiz de forma bem resumida e simples para você entender.

Usando os elementos do HTML 5, você pode usar o <header> para ter o cabeçalho do site, o <section> para separar a seções e o <footer> para o rodapé.

Note que você vai definir para o section, uma regra css que ocupe 100% da tela. Assim quando usar o link do menu, você vai usar ancoras com rolagens suaves para puxar até a seção desejada.

Exemplo de site que usa o conceito o one page: https://www.memuplay.com/

Clique nas "bolinhas " que ficam a baixo dos ícones das redes sociais no lado direito do site. ou simplesmente role o site.

Veja este outro exemplo, use o menu: https://jsfiddle.net/dife/gsoz1gnc/

Este é o padrão atual moderno, e daqui para frente se tornará mais comum.

Natanael Marrafon Rocha · 14 de fevereiro de 2019

DiF eu salvei o código que você colocou a cima para mim dar uma estudada, pelo que eu entendi você criou os botões "radio" com as tags, "label" e "nav" ai você criou varias as divs, colocou o conteudo, mas o que ligou cada conteudo a seus devidos menus esse é o código da ancora ?

Citação


#rd_home:checked ~ .sections{
		margin-top:0vh;
	}

	#rd_servicos:checked ~ .sections{
		margin-top:-100vh;
	}
	#rd_fale_conosco:checked ~ .sections{
		margin-top:-200vh;
	}

Infelizmente vou precisar ver explicações de como usar o atributo "~" porque nem no curso que estou fazendo consta isso e também não consta a medida "vh" e "vw" pelo que eu li vh = é 1/100 da largura da janela e vw = 1/100 da altura da janela, muito obrigado dif pela sua paciencia e explicações!

DiF · 15 de fevereiro de 2019

5 horas atrás, Natanael Marrafon Rocha disse:

você criou os botões "radio" com as tags, "label" e "nav" ai você criou varias as divs, colocou o conteudo, mas o que ligou cada conteudo a seus devidos menus esse é o código da ancora ?

Sim, essa é uma das maneiras de fazer. Nesse caso, não foi usado âncora, pois não eram de fato links.

O elemento <nav> faz parte do html 5 para menus.

Ali tem o elemento label que é a aparência do botão no menu. O radio button fica "escondido".

Se for usar âncoras, aí o menu precisa ser com links... exemplo:

<nav>
  <a href="#link1">link 1</a>
  <a href="#link2">link 2</a>
  <a href="#link3">link 3</a>
</nav>

PS: quando usado o nav desta forma, os elementos já ficam tratados com um menu.. então verá que eles automaticamente ficarão lado a lado.

https://jsfiddle.net/dife/pn2cu7fz/

No href, seria o valor ID do elemento na qual você quer ir. Seria no html assim:

<div id="link1"></div>
<div id="link2"></div>
<div id="link3"></div>

A mágica desse código em específico é foi definido pelo css que quando um elemento radio for selecionada o próprio elemento vai ir para a posição indicada.

5 horas atrás, Natanael Marrafon Rocha disse:

vou precisar ver explicações de como usar o atributo "~" porque nem no curso que estou fazendo consta isso

Tem uma função parecida com o operador irmão adjacente ( + ). A diferença é que o elemento selecionado não precisa necessariamente suceder o anterior.

Exemplo:

    .primeiro {
        color: green;
    }
    div.primeiro + div {
       color: blue;
    }
  
    div.primeiro ~ p {
       color:red
    }

https://jsfiddle.net/dife/sprcL8kb/3/

5 horas atrás, Natanael Marrafon Rocha disse:

pelo que eu li vh = é 1/100 da largura da janela e vw = 1/100 da altura da janela

É o contrário. vh é a altura da viewport e vw é a largura da viewport.

Essas medidas vh e vw são unidades do css moderno.

O lance é que as medidas percentuais as vezes não é a melhor escolha..pois o width em CSS é relativo ao elemento ancestral mais próximo. Estas novas medidas referem-se ao viewport que é onde o seu site aparece.