Responsividade

rsm_rlb · 29 de junho de 2016

Pessoal, to criando um projeto em HTML/CSS. Quero dispor numa página dois gráficos ao lado um do outro para exibir alguma informação. Essa parte está completa, o problema é que não consigo deixar eles responsivos. Alguém me ajuda?

Código do HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>

<link href="css/css.css" rel="stylesheet">
<link href="css/responsivo.css" rel="stylesheet" />

</head>
<body>

	<div class="header">

 		   <img src="imagem/logo.jpg" width="130" height="130" />

    <p align="center">Gráficos Biscoitos </p>
	
</div>
    
    <p></p>
    <p></p>
    
    <div class="container">
    <!--- Gráfico 1 ---> 
    <div class="grafico1">
	<div class="container-colunas">
		<div class="coluna">
		  <div class="nome"></div>
			<p class="rotulo">Café</p>
		</div>
		<div class="coluna">
		  <div class="nome"></div>
			<p class="rotulo">Almoço</p>
		</div>
		<div class="coluna">
		  <div class="nome"></div>
			<p class="rotulo">Sobremesa</p>
		</div>
		<div class="coluna">
			<div class="nome"></div>
			<p class="rotulo">Lanche</p>
	  </div>
		<div class="coluna">
		  <div class="nome"></div>
			<p class="rotulo">Janta</p>
	  </div>
	</div>
</div>
    
        <!--- Gráfico 2 ---> 
    <div class="grafico2">
	<div class="container-colunas">
		<div class="coluna">
		  <div class="nome"></div>
			<p class="rotulo">Café</p>
		</div>
		<div class="coluna">
		  <div class="nome"></div>
			<p class="rotulo">Almoço</p>
		</div>
		<div class="coluna">
		  <div class="nome"></div>
			<p class="rotulo">Sobremesa</p>
		</div>
		<div class="coluna">
			<div class="nome"></div>
			<p class="rotulo">Lanche</p>
	  </div>
		<div class="coluna">
		  <div class="nome"></div>
			<p class="rotulo">Janta</p>
	  </div>
	</div>
</div>
</div>

    <p></p >
    <p></p>
    
    <div class="footer">
     
     Teste de Footer
     
     </div>

</body>
</html>

Código do CSS


@charset "utf-8";
/* CSS Document */

/*----------------------------
------------Header da página*/
.header{
	background-color: #F0F0F0;
	display: block;
	padding: 20px;
   width: 100%;
   height: 48px;
   margin-top: 3.6em;
   margin-bottom: 3.6em;
}
}
/*.p{
	float: left;
}

/*----------------------------
------------Footer da página*/
.footer {
	padding: 10px;
	background-color: #6F7D94;
	position: relative;
	clear: both;
}

/*----------------------------
------------Gráficos da página*/
.grafico1{
	border: solid thin silver;
	width: 450px;
	height: 300px;
	padding: 10px;
	float: left;
}
.grafico2{
	border: solid thin silver;
	width: 450px;
	height: 300px;
	padding: 10px;
	float:right;
}
.coluna{
	width: 80px;
	height: 100%;
	margin: 2px 5px;
	float: left;
	position: relative;
}
.coluna .nome{
	width: 100%;
	position:absolute;
	bottom: -50px;
	left: 1px;
}
.rotulo .nome{
	bottom:-60px;
}
.rotulo{
	text-align: center;
}
.coluna:nth-child(1) .nome{
	background: blue;
	height: 10%;
}
.coluna:nth-child(2) .nome{
	background:pink;
	height: 50%;
	}
.coluna:nth-child(3) .nome{
	background: green;
	height: 60%;
}
.coluna:nth-child(4) .nome{
	background: red;
	height: 80%;
}
.coluna:nth-child(5) .nome{
	background: #0C9;
	height: 20%;
}

Entrar

Responsividade

Posts recomendados

rsm_rlb

Link para o comentário

Compartilhar em outros sites

Quem está navegando aqui 0 usuários estão online

Popular agora

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos