Jump to content


elanesp

Member Since 29/05/2007
Offline Last Active 14/02/2008, 10:39
-----

Posts I've Made

In Topic: Imagem De Fundo Sobrepõe Parte Do Código

21/01/2008, 09:07

Resolvido com um z-index gigantesco na div das abas.

In Topic: Imagem De Fundo Sobrepõe Parte Do Código

17/01/2008, 10:22

as classes estão lá em cima, no segundo post.


div.all .main .right .mainbox {
  font-family: Verdana, Arial, Sans-serif, "Lucida Grande", "Lucida Sans Unicode", Lucida, Helvetica;
  padding: 5px;
  margin-bottom: 4px;
  background-image: url(../img/mainbox_bg.png);
  background-repeat: repeat-x;
  background-color: #f3f7fc;
  border: 1px solid #5d8cba;
  opacity: 0.90;
  filter: alpha(opacity=90);
}

div.all .main .right .mainbox .titulo {
  position: relative;
  top: 0px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 4px;
  text-align: right;
  font-weight: bold;
  color: #376098;
}

ul#tabnav {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #336699;
margin: 0;
}

ul#tabnav li {
float: left;
height: 21px;
background-color: #DFF4FF;
margin: 2px 2px 0 2px;
border: 1px solid #336699;
}

#tabnav .active{
border-bottom: 1px solid #fff;
background-color: #fff;
}

#tabnav .active{
color: #000;
}

#tabcontent h3 {
	border-bottom: 1px solid #376098;
	color: #376098;
	margin-bottom: 0;
	padding-bottom:0;
	font-size: 10pt;
}

In Topic: Imagem De Fundo Sobrepõe Parte Do Código

17/01/2008, 08:39

Segue a saída HTML
<div class="corpo">
<div class="titulo">
	Programas » Edição 
		(Júnior 2009-2010)
		
</div>
		<img src="site/img/icones/voltar.gif" align="absbottom" border="0"> <a href="###" onclick="link('PeriodoProgramaListar.do','right')">Voltar</a><br><br>
			
				<!-- CSS TABS  -->				
				<ul id="tabnav">
					<li id="tab1" class="active"><a href="###" onclick="link('PeriodoProgramaEditar.do','tabcontent');">Geral</a></li>
					<li class="" id="tab2"><a href="###" onclick="link('AgenciaFinanciadoraListarPEP.do','tabcontent');">Agências</a></li>

					<li class="" id="tab3"><a href="###" onclick="link('ProjetoConfigurar.do','tabcontent');">Projeto</a></li>
					<li class="" id="tab4"><a href="###" onclick="link('PlanoConfigurar.do','tabcontent');">Plano</a></li>					
					<li class="" id="tab5"><a href="###" onclick="link('RelatorioConfigurar.do','tabcontent');">Relatórios</a></li>
					<li class="" id="tab6"><a href="###" onclick="link('CalendarioConf.do','tabcontent');">Calendário</a></li>
				</ul>				
				<div id="tabcontent">


	<h3>Informações Gerais</h3>		 
	<form name="periodoProgramaForm" method="post" action="/pibic/PeriodoProgramaSalvar.do" onsubmit="this.action= 'PeriodoProgramaSalvar.do'; submit_form('periodoProgramaForm','tabcontent'); return false;">
				
		<table class="tabela1">
		<tbody><tr>
			<td colspan="2">
			
			</td>
		</tr>
		<tr>

			<td width="156">
				<b>Status</b>			
			</td>
			<td width="460">
				<select name="status"><option value=""> </option>
				   <option value="1" selected="selected">em andamento</option>
<option value="2">concluido</option>
<option value="3">indisponível</option></select>	
			</td>

		</tr>
		<tr>
		 	<td><b>Tipo Programa</b></td>
			<td><select name="programa"><option value=""> </option>
					<option value="1">IC/PIBIC</option>
<option value="2" selected="selected">IC/JÚNIOR</option>
<option value="13">pictd</option></select>
			 </td>

		</tr>
		<tr>
		   <td><b>Descrição</b></td>
		   <td><input name="descricao" size="40" value="879871 jjj aaaaa" type="text"></td>
	 	</tr>

		<tr>
		   <td><b>Sigla</b></td>

		   <td><input name="sigla" size="40" value="Júnior 2009-2010" type="text"></td>
		</tr>
		<tr>
		   <td><b>Data Início</b> </td>
		   <td><input name="dtInicio" size="10" value="15/11/2007" type="text">	</td>
		</tr>
		<tr>

		   <td><b>Data Fim</b> </td>
		   <td><input name="dtFim" size="10" value="02/02/2006" type="text"></td>
		</tr>
		<tr>
		   <td><b>Nome do Edital</b></td>
		   <td><input name="edital" size="30" value="PIBIC-UFBAfggffg-www123" type="text"></td>
	 	</tr>		
		<tr>

			<td><b>Arquivo do Edital (.PDF)</b></td>
			<td>
			<div id="upload">

		<div id="editEdital" style="display: block;">
			<input name="editalArquivo" value="" type="file">

			<input onclick="micoxUpload(this.form,'PeriodoProgramaEditalSalvar.do','upload','Carregando...','Erro ao carregar');" value="Atualizar Edital" type="button">
			
		</div>	
		<div id="linkEdital">
			
		</div>		
							
		</div>
			</td>	
		</tr><tr>
			  <td> </td>
			<td>
				<div class="botoesAbaixo">

					<input id="Salvar" value="Salvar" class="botaoAzul" onmouseover="java script: changeClass(this, 'botaoAzulHover');" onmouseout="java script: changeClass(this, 'botaoAzul');" type="submit">	
				 </div>
			   </td>
		  </tr>
		</tbody></table>
	</form>

</div>
	</div>

Anexei um arquivo com as telas no firefox e no IE p/ entender melhor o erro. Observe que no IE não tem as abas.

In Topic: Imagem De Fundo Sobrepõe Parte Do Código

16/01/2008, 10:02

puxa! não funcionou com o z-index...
a div que estava sendo sobreposta veio para frente (mudei a cor para certificar), mas as abas não apareceram. :(

In Topic: Imagem De Fundo Sobrepõe Parte Do Código

15/01/2008, 12:49

segue o código.

<%@ taglib uri="/tags/struts-tiles" prefix="tiles" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<%@ taglib uri="/tags/displaytag" prefix="display" %>

<tiles:insert page="../../../default/mainbox.jsp">
	<tiles:put name="titulo">
		Programas » Edição 
		<logic:present name="periodo">(<bean:write name="periodo" property="sigla" />)</logic:present>
		<logic:notPresent name="periodo">(Novo)</logic:notPresent>
	</tiles:put>
	<tiles:put name="corpo">			
		<img align="absbottom" border="0" src="site/img/icones/voltar.gif" /> <a href="###" onclick="link('PeriodoProgramaListar.do','right')">Programas</a><br><br>
			<html:errors/>
				<!-- essas abas são sobrepostas pela imagem -->
				<ul id="tabnav">
					<li id="tab1" class="active"><a href="###" onclick="link('acao1.do','tabcontent');">aba1</a></li>
					<li id="tab2"><a href="###" onclick="link('acao2.do','tabcontent');">aba2</a></li>
					<li id="tab3"><a href="###" onclick="link('acao3.do','tabcontent');">aba3</a></li>					
				</ul>
				<div id="tabcontent">
					<br><img src="site/img/carregando2.gif" /><br>
					&lt;script>link('acao1.do','tabcontent');</script>
				</div>
	</tiles:put>	  
 	</tiles:insert>

mainbox.jsp
<tiles:importAttribute scope="request"/>

<div class="mainbox">

	<logic:present name="buttonMenu" scope="request">
		<tiles:insert page="./buttonmenu.jsp">
		
			<tiles:put name="nomeMenu"><bean:write name="buttonMenu"/></tiles:put>
		</tiles:insert>
	</logic:present>
	<div class="titulo"><tiles:getAsString name="titulo"/></div>	
	<logic:present name="mensagem" scope="request">
		<div class="msgbox">
			<bean:write name="mensagem"/>
		</div>
	</logic:present>	

   <tiles:getAsString name="corpo"/>
	
	<br/>	   	
	
	<logic:messagesPresent>
		<div class="errorbox">
			<html:errors/>
		</div>
	</logic:messagesPresent>
	
	
</div>

css
div.all .main .right .mainbox {
  font-family: Verdana, Arial, Sans-serif, "Lucida Grande", "Lucida Sans Unicode", Lucida, Helvetica;
  padding: 5px;
  margin-bottom: 4px;
  background-image: url(../img/mainbox_bg.png);
  background-repeat: repeat-x;
  background-color: #f3f7fc;
  border: 1px solid #5d8cba;
  opacity: 0.90;
  filter: alpha(opacity=90);
}

div.all .main .right .mainbox .titulo {
  position: relative;
  top: 0px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 4px;
  text-align: right;
  font-weight: bold;
  color: #376098;
}

ul#tabnav {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #336699;
margin: 0;
}

ul#tabnav li {
float: left;
height: 21px;
background-color: #DFF4FF;
margin: 2px 2px 0 2px;
border: 1px solid #336699;
}

#tabnav .active{
border-bottom: 1px solid #fff;
background-color: #fff;
}

#tabnav .active{
color: #000;
}

#tabcontent h3 {
	border-bottom: 1px solid #376098;
	color: #376098;
	margin-bottom: 0;
	padding-bottom:0;
	font-size: 10pt;
}

IPB Skin By Virteq