Problema de quebra de layout

3 respostas
D

Opa :smiley:

Terminei um layout e to com um problema bem sério de quebra de imagem e ele só funciona no Firefox. No IE e no Safari da pau. Será que alguém aqui manja de layout?

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:ui="http://java.sun.com/jsf/facelets">
	<head>
		<link rel="stylesheet" type="text/css" href="/sgdi/recursos/css/style.css" />
		<script type="text/javascript" src="/sgdi/recursos/js/paginate.js"></script>    
    	<script type="text/javascript" src="/sgdi/recursos/js/validate.js"></script>
    	<script type="text/javascript" src="/sgdi/recursos/js/generic.js"></script>
    	<script type="text/javascript" src="/sgdi/recursos/js/format.js"></script>
    	<script type="text/javascript" src="/sgdi/recursos/js/habilitar.js"></script>
	</head>
	<body>
	<div id="geral" style="border-color: black" align="center">
			<table width="100%" border="0" cellpadding="0" cellspacing="0" background="/sgdi/imagens/img01b.jpg" >
			  <tr>
			    <td width="17%"><h:graphicImage value="/imagens/img01a.jpg" width="181" height="97" /></td>
			    <td width="83%" valign="top">
			    	<table width="100%" border="0" cellpadding="1" cellspacing="1" >
					      <tr>
					        <td height="10" colspan="2" class="textoNegrito"></td>
					        </tr>
					      <tr>
					        <td width="9%" class="textoNegrito"><strong>Unidade:</strong></td>
					        <td width="91%" class="texto"><span class="tx10"> <h:outputText value="#{login.profissionalBean.salas[0].unidade.nome}"/> </span></td>
					      </tr>
					      <tr>
					        <td class="textoNegrito"><strong>Operador:</strong></td>
					        <td class="texto"><span class="tx10"> <h:outputText value="#{login.profissionalBean.nome}"/> </span></td>
					      </tr>
					      <tr>
					        <td height="4" colspan="2" class="textoNegrito"></td>
					        </tr>
				    	</table>
				    	<h:form>
					      <table width="420" border="0" cellpadding="1" cellspacing="1">
					        <tr>
					          <td width="92" align="center"><h:graphicImage value="/imagens/icones/administracao.gif" width="29" height="28" /><br />
					          <a href="#" class="textoMenu">Administração</a></td>
					          <td width="83" align="center"><h:graphicImage value="/imagens/icones/atendimento.gif" width="29" height="28" /><br />
					          <h:commandLink styleClass="textoMenuLateral" value="Atendimento" action="#{agendamento.paginaInicial}"></h:commandLink></td>
					          <td width="73" align="center"><h:graphicImage value="/imagens/icones/estatisticas.gif" width="27" height="28" /><br />
					          <a href="#" class="textoMenu">Estatísticas</a></td>
					          <td width="65" align="center"><h:graphicImage value="/imagens/icones/laudos.gif" width="29" height="28" /><br />
					          <a href="#" class="textoMenu">Laudos</a></td>
					          <td width="91" align="center"><h:graphicImage value="/imagens/icones/painel.gif" width="28" height="28" /><br />
					          <a href="#" class="textoMenu">Painel Gerencial</a> </td>
					        </tr>
					      </table>
					      </h:form>
			     	</td>
			  	</tr>
			</table>
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td valign="top">
						<table width="100%" border="0" cellpadding="0" cellspacing="0">
							 <tr>
							   <td height="20" class="fundoTitMenu">Administração</td>
							 </tr>
							 <tr>
							   <td class="fundoMenu" width="197" valign="top">
							   <h:form>
								   <table width="98%" border="0" align="center" cellpadding="0" cellspacing="3" class="tabCinzaClara">
								     <tr>
								       <td height="10" colspan="2"></td>
								     </tr>
								     <tr>
								       <td width="8%" align="center"><h:graphicImage value="/imagens/icones/icone-menu.gif" width="13" height="12" /></td>
								       <td width="92%"><h:commandLink styleClass="textoMenuLateral" value="Cadastro de Funções" action="#{rotina.paginaInicial}"></h:commandLink></td>
								     </tr>
								     <tr>
								       <td align="center"><h:graphicImage value="/imagens/icones/icone-menu.gif" width="13" height="12" /></td>
								       <td width="92%"><h:commandLink styleClass="textoMenuLateral" value="Unidades e Salas" action="#{unidade.paginaInicial}"> </h:commandLink></td>
								     </tr>
								     <tr>
								       <td align="center"><h:graphicImage value="/imagens/icones/icone-menu.gif" width="13" height="12" /></td>
								       <td width="92%"><h:commandLink styleClass="textoMenuLateral" value="Profissionais" action="#{profissional.paginaInicial}"></h:commandLink></td>
								     </tr>
								     <tr>
								       <td align="center"><h:graphicImage value="/imagens/icones/icone-menu.gif" width="13" height="12" /></td>
								       <td width="92%"><h:commandLink styleClass="textoMenuLateral" value="Procedimentos e Preparos" action="#{grupoProcedimento.paginaInicial}"></h:commandLink></td>
								     </tr>
								     <tr>
								       <td align="center"><h:graphicImage value="/imagens/icones/icone-menu.gif" width="13" height="12" /></td>
								       <td width="92%"><h:commandLink styleClass="textoMenuLateral" value="Tipos de Pedidos" action="#{tipoPedido.paginaInicial}"></h:commandLink></td>
								     </tr>
								     <tr>
								       <td align="center"><h:graphicImage value="/imagens/icones/icone-menu.gif" width="13" height="12" /></td>
								       <td width="92%"><h:commandLink styleClass="textoMenuLateral" value="Origem de Pacientes" action="#{origem.paginaInicial}"></h:commandLink></td>
								     </tr>
								     <tr>
								       <td align="center"><h:graphicImage value="/imagens/icones/icone-menu.gif" width="13" height="12" /></td>
								       <td width="92%"><h:commandLink styleClass="textoMenuLateral" value="Escritórios Regionais" action="#{regional.paginaInicial}"></h:commandLink></td>
								     </tr>
								     <tr>
								       <td align="center"><h:graphicImage value="/imagens/icones/icone-menu.gif" width="13" height="12" /></td>
								       <td width="92%"><h:commandLink styleClass="textoMenuLateral" value="Relatórios" action="#{relatorio.paginaInicial}"></h:commandLink></td>
								     </tr>
								     <tr>
								       <td align="center">&nbsp;</td>
								       <td width="92%">&nbsp;</td>
								     </tr>
								     <tr>
								       <td align="center">&nbsp;</td>
								       <td width="92%">&nbsp;</td>
								     </tr>
								     <tr>
								       <td align="center">&nbsp;</td>
								       <td width="92%">&nbsp;</td>
								     </tr>
								   </table>
 							</h:form>
								</td>
							</tr>
					</table>
				</td>
				<td height="100%">
									<ui:insert name="conteudo"></ui:insert>
								</td>
			</tr>
		</table>
	</div>
	</body>
</html>

Valeuuu

[]'s

3 Respostas

G

Brother, uma dica.

Pare de usar tabelas para estruturar layouts!
Comece a estudar WebStandards ( xHTML / CSS ), utilize xHTML de forma correta e semântica para escrever apenas seus dados e deixa a parte visual por conta do CSS.

D

Tem algum site para recomendar?

O problema é que o site todo foi feito nisso…e não fui qm estruturei, foi um designer hehehe

Mas no xhtml ta zuando =/

G

Esse site tem bastante coisa para te ajudar :

Criado 14 de agosto de 2008
Ultima resposta 15 de ago. de 2008
Respostas 3
Participantes 2