Ir para conteúdo

POWERED BY:

Arquivado

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

rafa_antunes

Problema de sobreposição de div

Por , em Desenvolvimento frontend

Recommended Posts

rafa_antunes    0

rafa_antunes
Postado

Ola,

Estou com um problema com as divs de uma tela de cadastro em meu sistema, onde é exibido um grid com os dados cadastrados e logo acima um div que permite avançar e recuar paginas do resultado. Acontece que a div pager está sobrepondo a div dados. já tentei mudar o z-index 1 para todas as divs mas a div pager sempre sobrepõe a div dados. Seguem os códigos para análise.

 

Página:

 

<?php

session_start();
$id_clinica = $_SESSION['id_clinica'];
include(".././bd/conexao.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">
<head>
<script type="text/javascript" src="../jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../plugins/jquery-tablesorter/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="../plugins/jquery-tablesorter/jquery.tablesorter.pager.js"></script>


<link rel="stylesheet" href="../css/tabelas.css" />
<link rel="stylesheet" href="../css/tabs.css" />
<link rel="stylesheet" href="../css/estilo.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>

<body>
<br /><br />



   <table class="topo">
   	<tr>
       	<td>
           <a href="cadastros/cadastrar_medicamento.php">
  			<img src="../img/novo.png" /><br />Novo
   		</a>
           </td>
       </tr>


   </table>

   <br />


<!-- Aba de pesquisa de medicamentos---------------------------------------------------------------------------------------- --> 
<div id="pesquisar">
<form method="post" class="pesquisa" action="exemplo.html" id="frm-filtro">
     <p>
       <label for="pesquisar">Pesquisar</label>
       <input type="text" id="pesquisar" name="pesquisar" size="30" />
     </p>
   </form>
</div>
   <br />
   <div id="pager" class="pager">
   	<form>
			<span style="font-family: Helvetica,Arial,sans-serif; margin: 0px; padding: 0px;font-size: 12px;">
				Exibir <select class="pagesize">
						<option selected="selected"  value="10">10</option>
						<option value="20">20</option>
						<option value="30">30</option>
						<option  value="40">40</option>
				</select> registros
			</span>

			<img src="../img/first.png" class="first"/>
   		<img src="../img/prev.png" class="prev"/>
   		<input type="text" class="pagedisplay"/>
   		<img src="../img/next.png" class="next"/>
   		<img src="../img/last.png" class="last"/>
   	</form>
   </div>
   <br />
   <div id="dados">
   <table class="pesquisa">
   	<thead>
       	<tr>
           	<th>Código</th>
               <th>Medicamento</th>
               <th>Genérico</th>
           </tr>
       </thead>

       <tbody>

<?php
//-----------------Retorna medicamentos do banco-------
	$pesquisa_medicamento = mysql_query("Select * from medicamentos where id_clinica = '$id_clinica'");


	$total_medicamentos = mysql_num_rows($pesquisa_medicamento);

for($i=0;$i<$total_medicamentos;$i++){
?>
       	<tr>
           	<td><?php echo mysql_result($pesquisa_medicamento,$i,'id_medicamento');?></td>
               <td><?php echo mysql_result($pesquisa_medicamento,$i,'nome_medicamento');?></td>
               <td><?php echo mysql_result($pesquisa_medicamento,$i,'generico_medicamento');?></td>
               <td><a href="./visualizacoes/visualizar_medicamento.php?id_medicamento=<?php echo mysql_result($pesquisa_medicamento,$i,'id_medicamento');?>"><img src="../img/visualizar.png" /><br />Visualizar</a></td>

           <td>
          <a href="./exclusoes/exclui_medicamento.php?id_medicamento=<?php echo mysql_result($pesquisa_medicamento,$i,'id_medicamento');?>" onclick="return confirm('Tem certeza que deseja remover este registro?');"><img src="../img/remover.png"/><br />Remover</a>

          </td>

           </tr>

<?php
}
?>                       


       </tbody>

   </table>
  </div>
  <br />




  <script>
   $(function(){

     $('table > tbody > tr:odd').addClass('odd');

     $('table > tbody > tr').hover(function(){
       $(this).toggleClass('hover');
     });

     $('#marcar-todos').click(function(){
       $('table > tbody > tr > td > :checkbox')
         .attr('checked', $(this).is(':checked'))
         .trigger('change');
     });


     $('form').submit(function(e){ e.preventDefault(); });

     $('#pesquisar').keyup(function(){
       var encontrou = false;
       var termo = $(this).val().toLowerCase();
       $('table > tbody > tr').each(function(){
         $(this).find('td').each(function(){
           if($(this).text().toLowerCase().indexOf(termo) > -1) encontrou = true;
         });
         if(!encontrou) $(this).hide();
         else $(this).show();
         encontrou = false;
       });
     });

     $("table") 
       .tablesorter({
         dateFormat: 'uk',
         headers: {
           0: {
             sorter: false
           },
           5: {
             sorter: false
           }
         }
       }) 
       .tablesorterPager({container: $("#pager")})
       .bind('sortEnd', function(){
         $('table > tbody > tr').removeClass('odd');
         $('table > tbody > tr:odd').addClass('odd');
       });

   });
   </script>
   </div>

</body>
</html>

 

CSS:

@charset "utf-8";
/* CSS Document */

a img{
border:none;
}

form.pesquisa{
 background-color:#f2f2f2;
 width:600px;
 margin:10px 0 10px 0;
 text-align:center;
}

form.pesquisa p{
 padding:12px;
}

form.pesquisa p label{
 color:#333;
 font-weight:900;
}

form.pesquisa input{
 padding:6px;
 border:1px solid #ccc;
 width:300px;
}

table.pesquisa{
 width:600px;
 border:1px solid #ccc;
}

table.pesquisa thead th{
 background-color:#666;
 padding:6px;
 color:#333;
 text-align:center;
 font-size:14px;
}

table.pesquisa thead th.header{
 cursor:pointer;
}

table.pesquisa tbody td{
 padding:6px;
 text-align:center;
 color:#333;
}

table.pesquisa tbody tr.odd td{
 background-color:#CCC;
}

table.pesquisa tbody tr:hover td{
 background-color:#999;
}

table.pesquisa tbody tr.selected td{
 background-color:#a9f5a9!important;
}

table.pesquisa a{
font-size:10px;
color:#333;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
}

table.pesquisa a:hover{
color:#333;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
}

table.pesquisa a:visited{
color:#333;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
}

.pagedisplay{
width:40px;
text-align:center;
border:none;
background-color:#f2f2f2;
font-weight:900;
}

#pager span{
font-weight:900;
display:inline-block;
margin:0 0 0 20px;
color:#666;
float:right;
position:inherit;

}

#pager form{
text-align:left;
padding:10px;
}

table.visualizacao{
border:none;
color:#333;
}

table.visualizacao td{
border-collapse:separate;
border-spacing:10px;
padding:10px;	
}

#cabecalho{
margin-top:0px;
width:100%;
height:10px;
}

table.cabecalho{
border:none;
font-size:10px;
text-transform:uppercase;
color:#333;
font-weight:bold;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

z-index precisa de position, ao menos relative para funcionar.

 

poste um link online do teu site.

e vou mover teu topico, pois não tem nada de php na duvida.

Compartilhar este post

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

Informação importante

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

  Aceito