Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
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






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

×