Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rdpacato

Layout com DIV JSP

Por , em Java

Recommended Posts

rdpacato    2

rdpacato
Postado
  • tentei com divs mas não estou conseguindo...
<html>

<styletype="text/css">
.box {border:2px solid #0094ff;}
.box h2 {background:#0094ff;color:white;padding:10px;}
.box p {color:#333;padding:10px;}
.box {
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
}

</style>

 <body>

<div class="box">
    <h2>Div Title</h2>
    <p>Div content.</p>
</div>

 </body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

rdpacato    2

rdpacato
Postado

Esse aqui está melhor para continuar...

 

Eu não estou conseguindo centralizar o texto Filtro

<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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

rdpacato    2

rdpacato
Postado

Consegui:

 

 

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Java
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito