Ir ao conteúdo
  • Cadastre-se

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


Posts recomendados

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"?

Link para o comentário
Compartilhar em outros sites

  • Moderador

@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.

Link para o comentário
Compartilhar em outros sites

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:

365937584_Semttulo.thumb.png.2898133e819b2cd3384df84c90a83b62.png

Link para o comentário
Compartilhar em outros sites

  • Moderador

@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.

 

  • Curtir 2
Link para o comentário
Compartilhar em outros sites

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!

Link para o comentário
Compartilhar em outros sites

  • Moderador
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. 

 

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...