Layout de tela [RESOLVIDO]

Front-end
#1

Pessoal

Tem alguma maneira de editar uma tabela e deixar com esse título como na imagem??

#2

Ninguém?

#3

Outra coisa, alguém sabe se o google charts é pago? ou seja, precisa pagar licença para usar em empresa?

#4

Tentei adicionar com div, mas to apanhando muito:


<html>
	
<style type="text/css">
.divTitulo {background:#0094ff;color:white;width:100px;height:25px;}
.divTitulo p {color:#FFFFFF;text-align:center;margin: 0 auto;font-weight: bold;}

.box {border:2px solid; border-color:#0094ff;}
.box h2 {background:#0094ff;color:white;padding:10px;}
.box p {color:#333;padding:10px;}


</style>

	<body>
<div>
	<div class="divTitulo">
	    <p>Filtros</p>
	</div>
	<div class="box">
    	<p>Conteudo<br>Conteudo<br>Conteudo<br>Conteudo<br>Conteudo<br>Conteudo<br>Conteudo<br>Conteudo<br>
    	Conteudo<br>Conteudo<br>Conteudo<br>Conteudo<br>Conteudo<br>Conteudo<br>Conteudo<br>Conteudo<br>Conteudo<br></p>
	</div>
</div>


	</body>
</html>
#5

Faz com CSS… ou com o bootstrap (olha o tanto que seria facil:)

[code]



//campos aqui
<div class="col-lg-6">
       //Outros campos aqui
 </div>
[/code]

Se não quiser usar o Twitter Bootstrap, então faz algo mais ou menos nessa linha, com CSS. :slight_smile:

Abraços

#6

estou usando divs… mas vou ver esse item que me indicou…

não sei se está correto:

[code]

Menu 
</head>
html{overflow-y:hidden;overflow-x:hidden;} #conteudo {width:1000px;margin: 0 auto;margin-left:12%} #comboVeiculo {} #tituloAba {background:#0094ff;width:100px;height:25px;} .titulo {font-weight: bold; color:#FFF; text-align:center; padding-top:4px;} #box {border:2px solid; border-color:#0094ff;width:700px;} .box h2 {background:#0094ff;color:white;padding:10px;} .box p {color:#333;padding:10px;} .box dataI {color:#333;} .box dataF {color:#333;} 
<body>
Medições Históricas
	<div id="comboVeiculo">
	<select name="cod_igreja" class="selectbox" style="width:200px;">
		<option value="0">SELECIONE O VE&Iacute;CULO</option>
  		<c:forEach var="e" items="${estados}">
     		<option value="${e.cod_estado}" <c:if test="${e.cod_estado == param.meuparametrodobanco}">Selected=selected</c:if>  > ${e.nom_estado}</option>
  		</c:forEach>
	</select>
	
	
	</div>

Filtros

    <div class="datas">	
    	<p>Data Inicial:<input type="text" size="15" maxlength="10" id="dataIni" name="dataIni"/></p>
    	<p>Data Final:<input type="text" size="15" maxlength="10" id="dataFin" name="dataFin"/></p>			 
    </div>	

</div>    	

	<form name="formAll" action="ServletConsultaCoordenadas" method="post">
	<input type="hidden" id="msgRetornoCusto" value="<c:out value="${msgRetornoCusto}"/>"/>

[/code]
#7

Cara estou meio sem tempo, mas algo nestas linhas:

[code]

Menu

.titulo{ color: white; background-color: blue; width: 100px; text-align: center; } .titulo h1{ margin-bottom: 0; } .conteudo{ border-style: solid; border-width: 1px; border-color: black; } .box{ display: inline; width: 50%; } 
<body>  

	<div class="titulo">
		<h1>Filtros</h1>
	</div>
	<div class="conteudo">
		<div class="box">
			<input> Data
		</div>
		<div class="box">
			<input> Data
		</div>
	</div>
</body>
[/code]
#8

valeu d34d_d3v1l

eu fiz assim:

[code]

<%@ page language=“java” contentType="text/html; charset=ISO-8859-1"
pageEncoding=“ISO-8859-1”%>
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>

PGPM - Menu html{overflow:auto;} #conteudo {width:400px;margin: 0 auto;margin-left:12%} #combo {} #tituloAba {background:#0094ff;width:100px;height:25px;} .titulo {font-weight: bold; color:#FFF; text-align:center; padding-top:4px;} #box {border:2px solid; border-color:#0094ff;width:700px;} #posicao {padding:10px; position: relative;margin:0;display: block;} .posicao .esquerda {padding:10px; position: relative; float:left;margin:0;display: block;} .posicao .direita {padding:10px; position: relative; float:right;margin:0;display: block;} .posicao .clear {clear:both;margin:0;padding:0;} .ui-datepicker { font-size: 12px; text-color:red; } .ui-datepicker td span, .ui-datepicker td a { display: inline-block; font-weight: bold; text-align: center; width: 20px; height: 20px; line-height: 20px; text-color:red; } .ui-datepicker-calendar .ui-state-default { color:#06F; } .ui-datepicker-unselectable .ui-state-default { background: #f4f4f4; color: #b4b3b3; } .arrow_box-ca:after, .arrow_box-ca:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ui-datepicker-trigger { position: relative; top: 4px; padding: 3px; margin:0px; } .ui-datepicker-calendar .ui-state-active { background: #06F; color: #fff; text-shadow: 0px 1px 0px #000; } .ui-datepicker-calendar .ui-state-hover { background: #f7f7f7; } 
<form name="formAll" action="ServletConsultaCoordenadas" method="post">
<input type="hidden" id="msgRetornoCusto" value="<c:out value="${msgRetornoCusto}"/>"/>
Medições
<div id="combo">
	<select name="cod_igreja" class="selectbox" style="width:200px;">
		<option value="0">SELECIONE</option>
  		<c:forEach var="e" items="${estados}">
     		<option value="${e.cod_estado}" <c:if test="${e.cod_estado == param.meuparametrodobanco}">Selected=selected</c:if>  > ${e.nom_estado}</option>
  		</c:forEach>
	</select>	
</div>
	
<div>
	<div id="tituloAba">
	    <p class="titulo">Filtros</p> 
	</div>
	<div id="box">
	<table cellspacing="10" cellpadding="5" align="center">
		<tr align="left">	
			<td width="400px" cellpadding="5">	
				<div class="esquerda">	
					<div>Data Inicial:<input type="text" size="15" maxlength="10" id="dataIni" name="dataIni"/></div>
					<br>
					<div>Hora Inicial:<input type="text" size="15" name="horaIni" maxlength="5" onkeypress="dois_pontos(this)" onBlur="valida_horas(this)"></div>
					<br>
					<div><INPUT TYPE=CHECKBOX id="filtroALL" onclick="CheckAllEquipamento()" name="filtroALL"><label for="filtroALL" class="">&nbsp;Selecionar tudo</label></div>
					<br>
					<div><INPUT TYPE=CHECKBOX id="Inst" VALUE="Inst" name="MultiplosDadosMedHist" class=""><label for="Inst" class="">&nbsp;Instant&acirc;nea</label></div>	
					<div><INPUT TYPE=CHECKBOX id="Md" VALUE="Md" name="MultiplosDadosMedHist" class=""><label for="Md" class="">&nbsp;M&eacute;dia</label></div>
					<br>
					<div><INPUT TYPE=CHECKBOX id="PosAcel" VALUE="PosAcel" name="MultiplosDadosMedHist" class=""><label for="PosAcel" class="">&nbsp;Posi&ccedil;&atilde;o </label></div>
					<div><INPUT TYPE=CHECKBOX id="Rot" VALUE="Rot" name="MultiplosDadosMedHist" class=""><label for="Rot" class="">&nbsp;Rota&ccedil;&atilde;o</label></div>
					<div><INPUT TYPE=CHECKBOX id="RotMax" VALUE="RotMax" name="MultiplosDadosMedHist" class=""><label for="RotMax" class="">&nbsp;Rota&ccedil;&atilde;o M&aacute;xima</label></div>
				</div>	
			</td>
			<td>
				<div class="direita">		
					<div>Data Final:<input type="text" size="15" maxlength="10" id="dataFin" name="dataFin"/></div>
					<br>
					<div>Hora Final:<input type="text" size="15" name="horaFin" maxlength="5" onkeypress="dois_pontos(this)" onBlur="valida_horas(this)"></div>
					<br>
					<div></div>
					<br>
					<div><INPUT TYPE=CHECKBOX id="Nvl" VALUE="Nvl" name="MultiplosDadosMedHist" class=""><label for="Nvl" class="">&nbsp;N&iacute;vel</label></div>
					<div><INPUT TYPE=CHECKBOX id="Efic" VALUE="Efic" name="MultiplosDadosMedHist" class=""><label for="Efic" class="">&nbsp;Efici&ecirc;ncia</label></div>	
					<div><INPUT TYPE=CHECKBOX id="DistPerc" VALUE="DistPerc" name="MultiplosDadosMedHist" class=""><label for="DistPerc" class="">&nbsp;Dist&acirc;ncia</label></div>
					<br>
					<div><INPUT TYPE=CHECKBOX id="Temp" VALUE="Temp" name="MultiplosDadosMedHist" class=""><label for="Temp" class="">&nbsp;Tempo</label></div>
					<div><INPUT TYPE=CHECKBOX id="TempParado" VALUE="TempParado" name="MultiplosDadosMedHist" class=""><label for="TempParado" class="">&nbsp;Tempo Parado</label></div>
					<div><INPUT TYPE=CHECKBOX id="TempFunc" VALUE="TempFunc" name="MultiplosDadosMedHist" class=""><label for="TempFunc" class="">&nbsp;Tempo Funcionamento</label></div>
				</div>
			</td>	
	    	<div class="clear"></div>	
		</tr>
	</table>	
	</div>    	
</div>
[/code]
#9