Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde pessoal, tudo bom?
Estou desenvolvendo um projeto em ambiente web e estou com um pequeno problema.
Estou fazendo um site e quero que o mesmo se adapte de acordo com o navegador do usuário, sem criar barras de rolagem vertical ou horizontalmente. Consegui fazer até certo ponto e está ok. Mas existe uma parte do site em que irá uma tabela e não estou conseguindo fazer com que ela se redimensione de acordo com a resolução. Vejam esta imagem:
http://img850.imageshack.us/img850/4946/telab.jpg
Ali, é como ficará o projeto. Eu fiz tudo como está aí, menos a parte em vermelho, pois é a parte onde irá a tabela. O que eu quero: criar uma div que fique igual à aquele desenho em vermelho que eu fiz por cima na imagem. E dentro desta div vou criar uma tabela de 6 colunas e queria que ela se adaptasse a div. Então mesmo que o navegador tenha resoluções diferentes as suas colunas também tenham tamanhos menores para se adapatarem a div. Alguém conseguiria algum exemplo ou alguma forma de criar uma div igual aquela da imagem e junto com ela a tabela?
Segue meu código html:
<html>
<head>
<link href="estilos.css" rel="stylesheet" type="text/css">
<title>construcao CSS utilizando toda a height</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="container">
<div id="lateral">
<div id="conteudolateral">
<div id="logo">
<img src="imagens/layout/logo.png" width="197" height="99" />
</div>
<div id="data-lateral">
</div>
<div id="menu-categoria">
<h1>Categorias</h1>
</div>
<div id="itens-categoria">
<ul>
<li><a href="#"><img src="imagens/layout/seta.png" width="9" height="10" class="seta"/> <img src="imagens/icones_categorias/icone-musicas.png" width="21" height="20" class="categoria"/> Músicas</a></li>
<li><a href="#"><img src="imagens/layout/seta.png" width="9" height="10" class="seta"/> <img src="imagens/icones_categorias/icone-filmes.png" width="21" height="20" class="categoria"/> Filmes</a></li>
<li><a href="#"><img src="imagens/layout/seta.png" width="9" height="10" class="seta"/> <img src="imagens/icones_categorias/icone-arquivosescolares.png" width="21" height="20" class="categoria"/> Arquivos Escolares</a></li>
<li><a href="#"><img src="imagens/layout/seta.png" width="9" height="10" class="seta"/> <img src="imagens/icones_categorias/icone-estudoingles.png" width="21" height="20" class="categoria"/> Estudo Inglês</a></li>
<li><a href="#"><img src="imagens/layout/seta.png" width="9" height="10" class="seta"/> <img src="imagens/icones_categorias/icone-programacaoweb.png" width="21" height="20" class="categoria"/> Programação Web</a></li>
<li><a href="#"><img src="imagens/layout/seta.png" width="9" height="10" class="seta"/> <img src="imagens/icones_categorias/icone-programacaodesktop.png" width="21" height="20" class="categoria"/> Programação Desktop</a></li>
<li><a href="#"><img src="imagens/layout/seta.png" width="9" height="10" class="seta"/> <img src="imagens/icones_categorias/icone-projetosfinalizados.png" width="21" height="20" class="categoria"/> Projetos Finalizados</a></li>
<li><a href="#"><img src="imagens/layout/seta.png" width="9" height="10" class="seta"/> <img src="imagens/icones_categorias/icone-artesgraficas.png" width="21" height="20" class="categoria"/> Artes Gráficas</a></li>
<li><a href="#"><img src="imagens/layout/seta.png" width="9" height="10" class="seta"/> <img src="imagens/icones_categorias/icone-imagens.png" width="21" height="20" class="categoria"/> Imagens</a></li>
</ul>
</div>
</div>
</div>
<div id="conteudo">
<div id="divisao">
</div>
<div id="topo">
<div id="usuario">
<img src="imagens/layout/usuario.png" width="69" height="69" />
<div id="informacoes">
<strong>Dionei Cardozo</strong>
<div class="admin">Administrador Master</div>
<div class="alterar"><a href="#">Alterar Foto</a></div>
</div>
</div>
<div id="imagem">
<img src="imagens/layout/imagem-documento.png" width="72" height="79" />
</div>
</div>
<div id="data-meio">
<div class="data">Sexta-feira, 16 de Dezembro de 2011</div>
</div>
<div id="menu-pesquisa">
<form name="pesquisa" method="post" action="">
<label><span>Pesquisar Documento:</span><input type="text" name="pesquisa" /></label>
<input type="submit" name="Pesquisar" value="" class="botao" />
</form>
</div>
<div id="menu">
<ul>
<li><a href="#"><img src="imagens/menu/novo.png" width="28" height="34" alt="Cadastrar Novo Documento"/></a></li>
<li><a href="#"><img src="imagens/menu/visualizar.png" width="28" height="34" alt="Visualizar"/></a></li>
<li><a href="#"><img src="imagens/menu/editar.png" width="28" height="34"/></a></li>
<li><a href="#"><img src="imagens/menu/excluir.png" width="28" height="34"/></a></li>
<li><a href="#"><img src="imagens/menu/copiar.png" width="28" height="34"/></a></li>
<li><a href="#"><img src="imagens/menu/relatorio.png" width="28" height="34"/></a></li>
<li><a href="#"><img src="imagens/menu/estatisticas.png" width="28" height="34"/></a></li>
<li><a href="#"><img src="imagens/menu/atualizar.png" width="28" height="34"/></a></li>
<li><a href="#"><img src="imagens/menu/sair.png" width="28" height="34"/></a></li>
</ul>
</div>
<div id="tabela">
<!-- AQUI IRIA A DIV E A TABELA -->
</div>
</div>
</div>
</body>
</html>E o CSS:
html,body{margin:0px;height:100%;}
#container{width:100%; height:100%;}
#container #lateral{float:left; width:250px; height:100%;background-color:#FFF;}
#container #lateral #conteudolateral{margin:0;padding:0;}
#container #lateral #conteudolateral #logo{padding:2px 10px;text-align:center;height:100px;}
#container #lateral #conteudolateral #data-lateral{background-image:url(imagens/layout/bg-data.png);background-repeat:repeat-x;height:24px;}
#container #lateral #conteudolateral #menu-categoria{background-image:url(imagens/layout/bg-menu.png);background-repeat:repeat-x;height:26px;padding-top:5px;}
#container #lateral #conteudolateral #menu-categoria h1{padding:0;margin-left:5px;margin-top:0;font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#2C3F7D;}
#container #lateral #conteudolateral #itens-categoria{padding:0;margin:0;}
#container #lateral #conteudolateral #itens-categoria ul{padding:0;margin:0;}
#container #lateral #conteudolateral #itens-categoria ul li{list-style-type:none;height:25px;margin-bottom:7px;}
#container #lateral #conteudolateral #itens-categoria ul li:hover{list-style-type:none;height:25px;background-color:#E1E9F4;}
#container #lateral #conteudolateral #itens-categoria ul li a{text-decoration:none;font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#333;}
#container #lateral #conteudolateral #itens-categoria ul li a:hover{width:200px;height:22px;background-color:#E1E9F4;}
#container #lateral #conteudolateral #itens-categoria ul li a img{vertical-align:middle;}
#container #lateral #conteudolateral #itens-categoria ul li a .seta{margin-left:12px;padding-bottom:2px;}
#container #lateral #conteudolateral #itens-categoria ul li a .categoria{margin-left:4px;margin-right:6px;padding:2px;}
#container #conteudo{height:100%;}
#container #conteudo #divisao{width:5px;height:100%;float:left;background-image:url(imagens/layout/bg-separador.png);background-repeat:repeat-y;margin:0;padding:0;}
#container #conteudo #topo{height:106px;background:url(imagens/layout/bg-topo.png);background-repeat:repeat-x;height:104px;}
#container #conteudo #topo #usuario{height:69px;float:left;margin-left:20px;margin-top:9px;}
#container #conteudo #topo #usuario img{float:left;margin-right:7px;}
#container #conteudo #topo #usuario #informacoes{width:220px;font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#333;}
#container #conteudo #topo #usuario #informacoes .admin{margin-top:4px;}
#container #conteudo #topo #usuario #informacoes .alterar{margin-top:25px;}
#container #conteudo #topo #usuario #informacoes .alterar a{color:#B8B811;text-decoration:none;}
#container #conteudo #topo #usuario #informacoes .alterar a:hover{text-decoration:underline;}
#container #conteudo #topo #imagem{flaot:right;text-align:right;padding-top:17px;padding-right:40px;}
#container #conteudo #data-meio{background-image:url(imagens/layout/bg-data.png);background-repeat:repeat-x;height:24px;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#333;text-align:left;margin:0;padding:0;}
#container #conteudo #data-meio .data{height:15px;float:left;margin-left:13px;margin-top:5px;}
#container #conteudo #menu-pesquisa{background-image:url(imagens/layout/bg-menu.png);background-repeat:repeat-x;height:26px;padding-top:2px;text-align:right;padding-right:20px;}
#container #conteudo #menu-pesquisa label{margin:0;padding-top:0;}
#container #conteudo #menu-pesquisa label span{font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#333;font-weight:normal;margin-right:5px;}
#container #conteudo #menu-pesquisa label input{width:230px;height:22px;margin:0;}
#container #conteudo #menu-pesquisa .botao{background:url(imagens/layout/pesquisar.png);width:17px;height:21px;border:0;cursor:pointer;margin:0;vertical-align:text-top;}
#container #conteudo #menu{width:800px;float:left;margin-top:5px;margin-left:8px;}
#container #conteudo #menu ul{margin:0;padding:0;}
#container #conteudo #menu ul li{list-style-type:none;display:inline;margin-right:5px;}
Carregando comentários...