Ir ao conteúdo
  • Cadastre-se
Daniel Cipriano

HTML Problema em relação à estética do site em HTML5

Recommended Posts

Bom dia, estou criando um site em HTML5 e verifiquei que ocorre um problema ao minimizar o tamanho da tela do navegador, as imagens ao invés de se ajustarem se sobrepõe uma por cima da outra. Estou achando que o problema é na definição de POSITION em CSS mas não tenho certeza. Segue o código HTML e CSS e o print da página. Agradeço a ajuda.

PRINT: http://prntscr.com/jq9utg

<!DOCTYPE HTML>
<html lang='pt-br'>
<head>
	<meta charset='UTF-8'/>
	<title>Trabalhos|Seminários|Vídeos</title>
	<link rel='stylesheet' type='text/css' href='css/formatacao.css'/>
</head>
<body>
	<header id='cabecalho'>
		<h1>TRABALHOS | SEMINÁRIOS | VÍDEOS</h1>
	</header>
	<nav id='menu'>
		<figure id='hist'>
			<img src='capas/caphist/caph.PNG'/>
			<figcaption>
				<h2>HISTÓRIA</h2>
			</figcaption>
		</figure>
		
		<figure id='geo'>
			<img src='capas/capgeo/capgeo.png'/>
			<figcaption>
				<h2>GEOGRAFIA</h2>
			</figcaption>
		</figure>
		<aside>
			<figure id='bio'>
				<img src='capas/capbio/capbio.png'/>
				<figcaption>
					<h2>BIOLOGIA</h2>
				</figcaption>
			</figure>
			<figure id='edfis'>
				<img src='capas/capedfis/capedfis.png'/>
				<figcaption>
					<h2>Educação<br>Física</h2>
				</figcaption>
			</figure>
		</aside>
	</nav>
	<footer id='rodape'>
	</footer>
</body>
</html>
@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css?family=Jua');
@import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC');
@import url('https://fonts.googleapis.com/css?family=Caesar+Dressing');
@import url('https://fonts.googleapis.com/css?family=Courgette');
@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');


body{
	background-color: #a14343;
}
header#cabecalho {
	position: relative;
	display: block;
	background-color: #920f0f;
	top: -30px;
	height: 100px;
	box-shadow: 0px 10px 10px rgba(0,0,0,0.5);
	padding-bottom: 0px;
}
header#cabecalho h1{
	position: relative;
	font-family: 'Jua', sans-serif;
	font-size: 30pt;
	color: white;
	text-align: center;
	padding-top: 30px;
}
nav#menu{
	position: relative;
	padding-bottom: 500px;
	margin: -20px 40px auto 40px;
	border: 5px solid white;
	border-top: none;
	border-bottom: none;
}
/*-------------------------------------------------------------*/
figure#hist{
	position: absolute;
	border: 1px solid black;
	width: 600px;
	height: 338px;
	margin-top: 50px;
}
figure#hist figcaption{
	position: absolute;
	right: 210px;
	top: 110px;
}
figure#hist figcaption h2{
	font-size: 35pt;
	font-family: 'Caesar Dressing', cursive; 
	color: white;
}
figure#hist:hover{
	box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}
figure#hist figcaption h2:hover{
	text-decoration: underline;
	font-size: 36pt;
}
/*-------------------------------------------------------------*/
figure#geo{
	position: relative;
	top:450px;
	border: 1px solid black;
	width: 600px;
	height: 338px;
}
figure#geo figcaption{
	position: absolute;
	right: 200px;
	top: 110px;
}
figure#geo figcaption h2{
	font-family: 'Courgette', cursive;
	font-size: 32pt;
	color: white;
}
figure#geo:hover{
	box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}
figure#geo figcaption h2:hover{
	font-size: 33pt;
	text-decoration: underline;	
}
/*-------------------------------------------------------------*/
aside figure#bio{
	position: relative;
	float: right;
	bottom: 322px;
	width: 600px;
	height: 338px;
	border: 1px solid black;	
}
aside figure#bio figcaption{
	position: absolute;
	right: 195px;
	top: 110px;
}
aside figure#bio figcaption h2{
	font-family: 'Cabin Sketch', cursive;
	font-size: 35pt;
	color: white;
}
aside figure#bio:hover{
	box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}
aside figure#bio figcaption h2:hover{
	font-size: 36pt;
	text-decoration: underline;
}
/*-------------------------------------------------------------*/
aside figure#edfis{
	position: relative;
	float: right;
	bottom: 293px;
	width: 600px;
	height: 338px;
	border: 1px solid black;
}
aside figure#edfis figcaption{
	position: absolute;
	right: 180px;
	top: 70px;
}
aside figure#edfis figcaption h2{
	font-family: 'Permanent Marker', cursive;
	font-size: 35pt;
	color: white;
}
aside figure#edfis:hover{
	box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}
aside figure#edfis figcaption h2:hover{
	font-size: 36pt;
	text-decoration: underline;
}
/*-------------------------------------------------------------*/
footer#rodape{
	border-top: 5px solid white;
	background-color: #920f0f;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Na verdade o css das imagens devem ficar com height:auto para se auto redimensionar. Mas isso tem que ser na tag img:

 

<img style="height:auto" src='capas/capedfis/capedfis.png'/>

 

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Luís Roberto C. da Silva @Daniel Cipriano Na verdade o height em auto não vai funcionar.

 

É necessário usar a medida em:   VH.

 

Basta criar uma regra CSS para o elemento img contido no figure

figure img{
   height: 70vh;
}

Assim terá a responsividade necessária para reduzir as imagens quando reduz o tamanho da tela.

Exemplo online: https://jsfiddle.net/dife/3b1yyo1x/

 

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
18 minutos atrás, DiF disse:

@Luís Roberto C. da Silva @Daniel Cipriano Na verdade o height em auto não vai funcionar.

 

É necessário usar a medida em:   VH.

 

Basta criar uma regra CSS para o elemento img contido no figure


figure img{
   height: 70vh;
}

Assim terá a responsividade necessária para reduzir as imagens quando reduz o tamanho da tela.

Exemplo online: https://jsfiddle.net/dife/3b1yyo1x/

 

 

Interessante que pra mim sempre funcionou.

adicionado 2 minutos depois

Mas esse aí funciona bem.

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro 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 publicações 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

×