Pessoal
Tem alguma maneira de editar uma tabela e deixar com esse título como na imagem??
Layout de tela [RESOLVIDO]
P
7 Respostas
P
Ninguém?
P
Outra coisa, alguém sabe se o google charts é pago? ou seja, precisa pagar licença para usar em empresa?
P
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>
D
Faz com CSS.. ou com o bootstrap (olha o tanto que seria facil:)
<div class="row">
<div class="col-lg-6">
//campos aqui
</div>
<div class="col-lg-6">
//Outros campos aqui
</div>
</div>
Se não quiser usar o Twitter Bootstrap, então faz algo mais ou menos nessa linha, com CSS. :)
Abraços
P
estou usando divs.... mas vou ver esse item que me indicou...
não sei se está correto:
<html>
<head>
<title> Menu </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<BASE href="home.html" target="principal">
<link rel='stylesheet' type='text/css' href='css/buttonMenu.css'>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
</head>
<style type="text/css">
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;}
</style>
<body>
<div id="conteudo">
<div>Medições Históricas</div>
<div id="comboVeiculo">
<select name="cod_igreja" class="selectbox" style="width:200px;">
<option value="0">SELECIONE O VEÍ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>
<div>
<div id="tituloAba">
<p class="titulo">Filtros</p>
</div>
<div id="box">
<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}"/>"/>
<br>
</form>
</div>
</div>
</body>
</html>
D
Cara estou meio sem tempo, mas algo nestas linhas:
<html>
<head>
<title> Menu </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style type="text/css">
.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%;
}
</style>
<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>
</html>
P
valeu d34d_d3v1l
eu fiz assim:
<%@ 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" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> PGPM - Menu </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<BASE href="home.html" target="principal">
<link rel='stylesheet' type='text/css' href='css/buttonMenu.css'>
<link rel='stylesheet' type='text/css' href='css/padrao_VisualPED.css'>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<style type="text/css">
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;
}
</style>
<script LANGUAGE="JavaScript">
function envia_tranca() {
document.forms['form1'].submit();
document.forms['form1'].elements['pesquisaRel'].disabled = true;
}
function CheckAllEquipamento() {
for (var i=0;i<document.formAll.elements.length;i++) {
var x = document.formAll.elements[i];
if (x.name == 'MultiplosDadosMedHist') {
x.checked = document.formAll.filtroALL.checked;
}
}
}
$(function(){
$('#dataIni').datepicker({
dateFormat: 'dd/mm/yy',
dayNames: ['Domingo','Segunda','Ter衧,'Quarta','Quinta','Sexta','S⣡do'],
dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','S⢧,'Dom'],
monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
nextText: 'Próximo',
prevText: 'Anterior',
showOtherMonths:true,
selectOtherMonths: false,
changeMonth:true,
changeYear:true,
showOn:"button",
buttonImage: "calendar_icon.png",
buttonImageOnly: true,
onSelect: function(dateText, inst) {
$("input[name='dataIni']").val(dateText);
}
});
});
$(function(){
$('#dataFin').datepicker({
dateFormat: 'dd/mm/yy',
dayNames: ['Domingo','Segunda','Ter衧,'Quarta','Quinta','Sexta','S⣡do'],
dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','S⢧,'Dom'],
monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
nextText: 'Próximo',
prevText: 'Anterior',
showOtherMonths:true,
selectOtherMonths: false,
changeMonth:true,
changeYear:true,
showOn:"button",
buttonImage: "calendar_icon.png",
buttonImageOnly: true,
onSelect: function(dateText, inst) {
$("input[name='dataFin']").val(dateText);
}
});
});
function dois_pontos(tempo){
if(event.keyCode<48 || event.keyCode>57){
event.returnValue=false;}
if(tempo.value.length==2){
tempo.value+=":";}
}
function valida_horas(tempo){
while (tempo.value.length < 5){
if(tempo.value.length==2 || tempo.value.length==5){
tempo.value+=":";}
tempo.value+="0";}
horario = tempo.value.split(":");
var horas = horario[0];
var minutos = horario[1];
if(horas > 24){ //para rel󧩯 de 12 horas altere o valor aqui
submit.disabled = true;relogio.focus();//fica nome_do_form.submit.disabled caso vocꡩnsira um form ali em baixo
Break;}
if(minutos > 59){
submit.disabled = true;relogio.focus();
Break;}
submit.disabled = false;
}
</script>
<body>
<form name="formAll" action="ServletConsultaCoordenadas" method="post">
<input type="hidden" id="msgRetornoCusto" value="<c:out value="${msgRetornoCusto}"/>"/>
<div id="conteudo">
<div>Medições</div>
<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=""> Selecionar tudo</label></div>
<br>
<div><INPUT TYPE=CHECKBOX id="Inst" VALUE="Inst" name="MultiplosDadosMedHist" class=""><label for="Inst" class=""> Instantânea</label></div>
<div><INPUT TYPE=CHECKBOX id="Md" VALUE="Md" name="MultiplosDadosMedHist" class=""><label for="Md" class=""> Média</label></div>
<br>
<div><INPUT TYPE=CHECKBOX id="PosAcel" VALUE="PosAcel" name="MultiplosDadosMedHist" class=""><label for="PosAcel" class=""> Posição </label></div>
<div><INPUT TYPE=CHECKBOX id="Rot" VALUE="Rot" name="MultiplosDadosMedHist" class=""><label for="Rot" class=""> Rotação</label></div>
<div><INPUT TYPE=CHECKBOX id="RotMax" VALUE="RotMax" name="MultiplosDadosMedHist" class=""><label for="RotMax" class=""> Rotação Má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=""> Nível</label></div>
<div><INPUT TYPE=CHECKBOX id="Efic" VALUE="Efic" name="MultiplosDadosMedHist" class=""><label for="Efic" class=""> Eficiência</label></div>
<div><INPUT TYPE=CHECKBOX id="DistPerc" VALUE="DistPerc" name="MultiplosDadosMedHist" class=""><label for="DistPerc" class=""> Distância</label></div>
<br>
<div><INPUT TYPE=CHECKBOX id="Temp" VALUE="Temp" name="MultiplosDadosMedHist" class=""><label for="Temp" class=""> Tempo</label></div>
<div><INPUT TYPE=CHECKBOX id="TempParado" VALUE="TempParado" name="MultiplosDadosMedHist" class=""><label for="TempParado" class=""> Tempo Parado</label></div>
<div><INPUT TYPE=CHECKBOX id="TempFunc" VALUE="TempFunc" name="MultiplosDadosMedHist" class=""><label for="TempFunc" class=""> Tempo Funcionamento</label></div>
</div>
</td>
<div class="clear"></div>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
Criado 14 de julho de 2014
Ultima resposta 1 de ago. de 2014
Respostas 7
Participantes 2
Alura Git Flow: entenda o que é, como e quando utilizar Entenda o que é Git Flow, como funciona seu fluxo com branches como Master, Develop, Feature, Release e Hotfix, além de vantagens e desvantagens.
Casa do Codigo Desmistificando WebAssembly: Alta performance,... Por Raphael Amorim — Casa do Codigo