Publicado em 22 de jun.

[Resolvido] Remodelamento de layout

Iae galera.

Estou remodelando um sistema que havia feito e quero uma ajuda com algumas coisas.

Primeiro: No sistem existe um calendario. Ele deve ficar logo abaixo do menu (horizontal) e ao lado esquerdo do conteudo.

Segundo: Logo após o calendario (bem em baixo) havera um tipo de menu de módulo (de acordo com o módulo haverá um menu diferente).

Terceiro: O conteudo deverá ocupar o resto do espaço a direita.

Quarto: Rodapé.

Detalhe, haverá uma pequena barra com botões acima do menu principal.

Não quero que vcs façam nada para mim galera, relaxem...rsrs...

Agora as duvidas.

Para obter o resultado que eu quero no conteudo e calendario creio que tenho que usar float correto?

No caso do menu e da barra logo a cima, elas estão ficando coladas e não uma acima da outra.

Estou usando DIVs.

Abraço!!

Discussão (8)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

João Prado· 22 de jun.

sim, terá que utilizar float

basicamente você monta a estrutura de organização do site com 5 divs, depois você vai arrumando, e colocando mais conforme precisar

vai utilizar uma div para tudo

depois uma div para o topo, essa com width:100%

agora uma div para o lado esquerdo, onde tem o calendário, etc. Esta você define uma largura e coloca float:left

agora uma div para o conteudo, esta você define uma largura (desde que esta + div esquerda juntas não tenham mais do que a largura total do site) e coloca float:left, ou float:right

e por último a div do rodapé, que assim como a div do topo terá width:100%

esse é o básico para criar a estrutura do layout

alguma dúvida?

visitante_xp· 22 de jun.

Hmm...

Até agora não...

Vou tarminar os testes e volto...

Abraço!

Jogo rápido... O que combina com Cinza?????

Fiz o posicionamento da seguinte forma: Calendario e menu lado-a-lado, Conteudo logo a baixo, e abaixo do calendario os tais menus, porém os menus não estão descendo.

Coloquei os tamanhos do caledario e do menu os mesmos e dei float mas acho que precisa de mais alguma coisa, não tenho muito costume de trabalhar com DIVs. Então como posso locar uma em baixo da outra com float à esquerda?

Abraço!

João Prado· 22 de jun.

não, o float vai faze-los flutuar ao lado, poste seu código para eu ver como esta pois sem uma referência não tem como ajudar.

Quanto o que combina com cinza, você pode buscar uma paleta de cores em algum site para se basear nela.

esse aqui é muito bom http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

visitante_xp· 22 de jun.

<div class="conteudo_geral">

 

<div class="mostra_usuario"><input type="button" value="Alterar Senha" onclick="window.open('senha.php', '_blank', 'width=330, height=120');" /> <?php echo "Bem-vindo ".$_SESSION['usuario'].", ".date("d/m/Y"); ?></div>

 

<p> </p>

 

<div class="div_calendario"> <?php include('calendario/agenda.php'); ?> </div>

 

<ul class="menu">

	<li><a href="conteudo/conteudo.php?pagina=cadastra_clientes" id="cadastra_clientes"><img src="imagens/cadastra_cliente.png" id="img_cadastra" border="0" /></a></li>

	<li><a href="conteudo/conteudo.php?pagina=agenda" id="agenda"><img src="imagens/agenda.png" id="img_agenda" border="0" /></a></li>

	<li><a href="conteudo/conteudo.php?pagina=certidoes" id="certidoes"><img src="imagens/certidoes.png" id="img_certidoes" border="0" /></a></li>

	<li><a href="conteudo/conteudo.php?pagina=arquivos" id="arquivos" ><img src="imagens/arquivos.png" id="arquivos" border="0" /></a></li>

	<li><a href="conteudo/conteudo.php?pagina=formularios" id="formularios"><img src="imagens/formularios_paralegal.png" id="img_formularios" border="0" /></a></li>

</ul>

 

<p> </p>

 

<div class="div_conteudo"> <?php include('conteudo/conteudo.php'); ?> </div>

<div class="div_menus"> <?php include('menus/menu.php'); ?> </div>

<div class="div_rodape"> <?php include('rodape.php'); ?> </div>

 

 

</div>

João Prado· 22 de jun.

o CSS também

se possível, faça uma imagem simples com quadros de como o layout deve ficar, pois não estou conseguindo entender seu problema.

visitante_xp· 24 de jun.

/applications/core/interface/imageproxy/imageproxy.php?img=http://img228.imageshack.us/img228/5721/imagemdh.png&key=8404a527c66278422866df9bd9bc14d127b0c1e4e7f6421def7f5f26466ba6b1" alt="Imagem Postada" />

Ve se da pra entender agora

BOm a div eu consegui resolver. Ela esta ficando em baixo do calendario.

Porém quando eu abro um conteudo maior que o calendario os menus descem...

Como posso fazer com que eles fiquem fixos em baixo do calendario?

João Prado· 24 de jun.

poste seu código completo (HTML / CSS)

visitante_xp· 24 de jun.

Agora deu certo... =D

<?php
include("sessao.php");
include("include/verifica_variavel.php");

?>

<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sistemas Ábacos</title>
<link href="include/abas/ui.tabs.css" rel="stylesheet" />
<link href="estilo_geral.css" rel="stylesheet" />
</head>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="include/abas/ui.tabs.js"></script>
<script type="text/javascript" src="javascript/troca_img.js"></script>
<script type="text/javascript" src="include/abas/aba.js"></script>
<script type="text/javascript">

</script>
<body>

<div class="conteudo_geral">

<div class="mostra_usuario"><?php echo "Bem-vindo ".$_SESSION['usuario'].", ".date("d/m/Y"); ?></div>

<p> </p>

<?php include('calendario/agenda.php'); ?>

<ul class="menu">
	<li><a href="?modulo=agenda" id="agenda"><img src="imagens/agenda.png" id="img_agenda" border="0" /></a></li>

	<li><a href="?modulo=clientes" id="cliente"><img src="imagens/cliente.png" id="img_cliente" border="0" /></a></li>

	<li><a href="?modulo=contabil" id="contabil"><img src="imagens/contabil.png" id="img_contabil" border="0" /></a></li>

	<li><a href="?modulo=dp" id="dp"><img src="imagens/dp.png" id="img_dp" border="0" /></a></li>

	<li><a href="?modulo=fiscal" id="fiscal"><img src="imagens/fiscal.png" id="img_fiscal" border="0" /></a></li>

	<li><a href="?modulo=paralegal" id="paralegal"><img src="imagens/paralegal.png" id="img_paralegal" border="0" /></a></li>

	<li><a href="?modulo=financeiro" id="financeiro"><img src="imagens/financeiro.png" id="img_financeiro" border="0" /></a></li>

	<li><a href="?modulo=arquivos" id="arquivo" ><img src="imagens/arquivo.png" id="img_arquivos" border="0" /></a></li>
</ul>

<p></p>

<div class="div_conteudo"> <?php include('conteudo/conteudo.php'); ?> </div>

<div class="div_menus"> <?php include('menus/menu.php'); ?> </div>

<p></p>

<div class="div_rodape"> <?php include('rodape.php'); ?> </div>

</div>
</body>
</html>

@charset "utf-8";

/ CSS Document /

body{

	background:#ddd;
	/*margin:50px;*/
}

.conteudo_geral{
	width:100%;
}

.sair{
	position:relative;
	width:100px;
}

.mostra_usuario{
	width:50%;
	float:right;
	position:relative;
}

/ Menu de Módulos /
ul.menu{

	padding:0px;
	margin:0px;
}

ul.menu li{

	display:inline;
}

/ fim do menu /

.conteudo{
	/*float:left;*/
}

.div_conteudo{
	width:780px;
	float:right;
}

.div_menus{
	width:200px;
	position:relative;
}

.div_rodape{
	width:100%;
}