O Erro!
O erro esta acontecendo quando junto o css com a programação JSP , alguns elementos da pagina se deslocam , e quando eu tiro esta programação o site volta ao normal
Será que a programação esta entrando em conflito com o css?
A página sem a programação é esta: Clique Aqui. nota-se que o site esta com seus elementos e divs posicionados corretamente ( o topo mais 3 colunas e o rodapé ) uma estrutura muito usada atualmente.
A página com a programação jsp é esta: Clique Aqui.
Notamos que a parte de noticias em destaque , vai para o alto da página na coluna central , e isto é muito estranho pois a programação JSP esta na pagina da coluna da direita, e mesmo assim esta interferindo na coluna central
Alquem pode me ajudar? o que esta havendo/ é erro de css ou na programação jsp?
Estrutura do site:
O site vai ser inteiramente dinamico, e ira conter varios includes, o include do topo , do menu global , o do conteudo central , do conteudo da direita e do rodape.
a pagina do conteudo da direita é onde esta o codigo JSP, e o conteudo central é onde os elementos se deslocam quando o codigo jsp é colocado na pagina conteudo da direita
o codigo jsp que tenho aqui em mão é esta , pois o programador do jsp não se encontra aqui no momento
<div id="calendar"><h:form><h:outputText value="#{index.calendario}" styleClass="calendario" escape="false" rendered="true"/></h:form></div><!--calendar-->Aqui vai os codigos da pagina index , da pagina do conteudo central e da pagina conteudo direita
A pagina inicial é esta, codigo html
<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Câmara Municipal de Londrina</title><link href="css_cml2.css" rel="stylesheet" type="text/css" /><link href="css/fontes_e_links.css" rel="stylesheet" type="text/css" /><link href="css/topo.css" rel="stylesheet" type="text/css" /><link href="css/conteudo_central.css" rel="stylesheet" type="text/css" /><link href="css/conteudo_direita.css" rel="stylesheet" type="text/css" /><link href="css/menu_global.css" rel="stylesheet" type="text/css" /><link href="css/rodape.css" rel="stylesheet" type="text/css" /><script src="ie7.js" type="text/javascript"></script><script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE8.js" type="text/javascript"></script><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script></head><body><div id="tudo"><div id="topo"><%@ include file="topo.html"%></div><div id="menuglobal"><%@ include file="menu.html"%></div><div id="conteudo_direita"><%@ include file="conteudo_direita.jsp"%></div><div id="conteudocentral_global"><%@ include file="conteudo_central.jsp"%></div><div id="rodape"><%@ include file="rodape.html"%></div></div></body></html>
CSS da página inicial
@charset "iso-8859-1";/* CSS Document *//* zerar todas as propriedades padrao, para ter um alinahmento central */* {margin:0;padding:0; /* espacamento lateral */list-style:none;text-decoration:none; /*tira o sublinahdo do link */font-style:normal; /* tira o italico de fontes padrao */vertical-align:middle; /* alinahmento vertical no centro, deixa tudo no centro, imagens e textos */}/* DIV tudo , div que engloba todo o site */#tudo {width:1000px; /* largura minima do site */height:auto; /* altura do site */margin:0 auto; /* deixa as margens com valor automatica para que o site se adapte as diversas resolucoes */padding:0 0px; /* espaco nas laterais */position:relative;}#topo {width:1000px;height:140px;padding:2px 0 0 0px; /*espaco da lateral */}#menuglobal {display:block;width:190px; /* largura da div */height:auto; /* altura da div topo 1 */float:left;margin-top:38px;}#conteudocentral_global{display:block;height:auto;margin:0 223px 0 193px;margin-top:38px;}#conteudo_direita {display:block;width:222px; /* largura da div */height:auto;float:right;margin-top:38px;}#rodape{clear:both;width:1000px; /*largura da div topo */height:auto;z-index:3;}codigo html da pagina conteudo da direta ( onde esta o jsp )
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%><%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%><f:view><div id="conteudo_direita"><div class="pesquisatitulo">O que você procura?</div><form action="" method="get"><input type="text" size="30" maxlength="100" /><select name="listamenu"><option value="teste">selecione .</option><option value="teste2">teste2</option></select><label><input type="submit" name="button2" id="button2" value="Submit" /></label><br></form><div class="tvweb"><div class="tvwebesquerda">esquerda</div><div class="tvwebdireita">direita</div></div><div class="radio"><a href="index.html"><img src="imagens/banner_medio_radio.jpg" border="0" alt="ouça a nossa rádio"/></a></div><div class="imagenslondrina"><div class="imagenslondrina2"><a href="index.html"><img src="imagens/banner_lateral_imagens_lond.jpg" border="0" alt="clique e entre na nossa galeria de imagens"/></a><div class="imagenslondrina_esquerda">1</div><div class="imagenslondrina_esquerda">2</div></div></div><div class="agenda"><div class="agenda_titulo">Agenda de Setembro 2009</div><div id="calendar"><h:form><h:outputText value="#{index.calendario}" styleClass="calendario" escape="false" rendered="true"/></h:form></div><!--calendar--></div></div></f:view>Codigo css da pagina conteudo da direita
@charset "iso-8859-1";/* CSS Document */#conteudo_direita {display:block;width:222px; /* largura da div */display:table;}#conteudo_direita h2 {font:18px Verdana, Arial, Helvetica, sans-serif;color:#7840a8;}/**** inicio pesquisa ********/#conteudo_direita div.pesquisa{width:250px; /*largura da div topo */height:90px; /*altura da div topo */font:16px Verdana, Arial, Helvetica, sans-serif;color:#0000CC;margin-top:1px;}#conteudo_direita div.pesquisatitulo{font:16px Verdana, Arial, Helvetica, sans-serif;color:#7840a8;margin-top:1px;}/**** fim pesquisa ********//**** inicio tv web ********/#conteudo_direita div.tvweb {width:222px; /*largura da div topo */height:265px; /*altura da div topo */background:url(../imagens/fundo_tvwebcamara.jpg);margin-top:15px;}#conteudo_direita div.tvwebesquerda {width:100px; /*largura da div topo */height:145px; /*altura da div topo */float:left;margin-top:105px;display:block;margin-left:4px;opacity:0.70;-moz-opacity: 0.70;filter: alpha(opacity=70);background:#000000;border:2px #FFFFFF;border-width:thin;border-style: solid;border-color: #fff;margin-right:4px;}#conteudo_direita div.tvwebdireita {width:100px; /*largura da div topo */height:145px; /*altura da div topo */float:right;margin-top:105px;display:block;opacity:0.70;-moz-opacity: 0.70;filter: alpha(opacity=70);background:#000000;border:2px #FFFFFF;border-width:thin;border-style: solid;border-color: #fff;margin-right:6px;}/**** fim tv web ********//**** inicio banner radio ********/#conteudo_direita div.radio {width:222px; /*largura da div topo */height:100px; /*altura da div topo */margin-top:5px;}/**** fim banner radio ********//**** inicio imagens londrina ********/#conteudo_direita div.imagenslondrina {width:222px; /*largura da div topo */height:325px; /*altura da div topo */margin-top:10px;}#conteudo_direita div.imagenslondrina2 {width:222px; /*largura da div topo */height:242px; /*altura da div topo */margin-top:10px;}#conteudo_direita div.imagenslondrina_esquerda{width:108px; /*largura da div topo */height:83px; /*altura da div topo */float:left;display:block;margin-left:2px;}#conteudo_direita div.imagenslondrina_direita {width:108px; /*largura da div topo */height:83px; /*altura da div topo */float:right;display:block;}/**** fim imagens londrina ********//**** inicio agenda ********/#agenda{display:block;width:222px; /*largura da div topo */height:auto; /*altura da div topo */margin-top:10px;position:absolute;}#agenda div.agenda_titulo{display:block;width:222px; /*largura da div topo */height:30px; /*altura da div topo */font:16px Verdana, Arial, Helvetica, sans-serif;color:#568fc6;margin-top:1px;}/**** fim agenda ********//* AGENDA */div#calendar {display:block;width : 222px;height:160px;border : 1px solid #ccc;}/*------------------------------------------------------------End Calendar component------------------------------------------------------------*/codigo html da pagina conteudo central
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%><%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%><f:view><div id="conteudocentral"><a href=""><p class="descricaopadrao">Sessão em andamento, clique aqui e assista!</p></a><div id="menucentro"><ul><li><a href="index.html" class="link_padrao10"><img src="imagens/ico_indicar_pagina.png" border="0" alt="indicar a página"/>indicar página</a></li><li><a href="index.html" class="link_padrao10"><img src="imagens/ico_auemnto_tipografia.png" border="0" alt="tamanho do texto"/>tamanho do texto</a></li><li><a href="index.html" class="link_padrao10"><img src="imagens/ico_contraste.png" border="0" alt="contraste da página"/>contraste</a></li><li><a href="index.html" class="link_padrao10"><img src="imagens/ico_imprimir.png" border="0" alt="imprimir página"/>imprimir</a></li></ul></div><div id="pautadodia"><div class="pautadodia_titulo"><p class="titulo16branco">Pauta da Sessão</p></div><div class="pautadodia_descricao"><p class="descricao150">Conheça na integra os projetos em duscussão da Câmara Municipal de Londrina</p></div></div><div id="sip"><div class="sip_titulo"><p class="titulo16branco">SIP</p></div><div class="sip_descricao"><p class="descricao150">Acompanhe o mandato dos vereadores e conheça toda a produção legislativa</p> </div></div><div class="noticiasdestaque_titulo">Notícias em destaque<strong></div><div class="noticiasdestaque_foto"><t:graphicImage align="Left" value="http://www.cml.pr.gov.br/home/imagem.aspx?arquivo=c:/inetpub/wwwroot/home/imagens/honrarias/#{index.destimagem}&tamanho=216"style="border-style:none;"/></div><div class="noticiasdestaque_noticias"><p class="titulo"><h:outputText value="#{index.desttitulo}"/></p><f:verbatim><br></f:verbatim><p class="descricao150"><h:outputText value="#{index.destchamada}"/></p><f:verbatim><br></f:verbatim></div><div id="ultimasnoticias"></div><div id="ultimasnoticias_asnoticias"><t:dataTable rows="7" value="#{index.lstUltimas}" var="bd"><t:column><f:verbatim><p class="titulo"> </f:verbatim><h:outputText value="#{bd.datahoracriacao}"/><f:verbatim><br></f:verbatim><f:verbatim></p></f:verbatim><f:verbatim><p class="descricao150"> </f:verbatim><h:outputText value="#{bd.titulo}"/><f:verbatim></p><br></f:verbatim><f:verbatim></font></f:verbatim></t:column></t:dataTable></div><div class="banner_centralmenuesquerda"><a href="index.html"><img src="imagens/bannermedio_transparencia.jpg" border="0 alt="banner transparencia" /></a></div><div class="banner_centraldireito"><a href="index.html"><img src="imagens/bannermedio_licitacao.jpg" border="0 alt="banner licitacao" /></a></div><div class="banner_centralmenuesquerda2"><a href="index.html"><img src="imagens/bannermedio_cep.jpg" border="0 alt="banner cep" /></a></div><div class="banner_centraldireito2"><a href="index.html"><img src="imagens/bannermedio_linha_direta.jpg" border="0 alt="banner licitacao" /></a> </div><div class="bannerfull"><p><a href="index.html"><img src="imagens/banner_full_inclusaodigital.jpg" border="0 alt="banner licitacao" /></a> </p><p> </p><p> </p><p>sdada</p></div></div></f:view>conteudo css da pagina central
@charset "iso-8859-1";/* CSS Document */* {margin:0;padding:0; /* espacamento lateral */list-style:none;text-decoration:none; /*tira o sublinahdo do link */font-style:normal; /* tira o italico de fontes padrao */vertical-align:middle; /* alinahmento vertical no centro, deixa tudo no centro, imagens e textos */}#conteudocentral{display:block; /* para poder usar margin, padding entre outros dentro da div atual */width:572px; /* largura da div topo 1 que esta dentro da div topo */padding:5px;*margin-top:-500x;_margin-top:-500x;}/**** menu central ********/#menucentro {width:572px;height:42px; /*altura da div topo */background:url(../imagens/fundo_menucentro.jpg) no-repeat;display:table;}#menucentro ul li {display:inline;margin:13px;}/**** fim menu central ********//**** inicio pauta do dia ********/#pautadodia {width:278px; /*largura da div topo */height:119px; /*altura da div topo */background:url(../imagens/fundo_pauta.jpg) repeat-x;float:left;margin-top:5px;display:table;}#pautadodia div.pautadodia_titulo {height:32px; /*altura da div topo */margin-left:1px;margin-top:8px;text-align:center;}#pautadodia div.pautadodia_descricao {width:185px; /*largura da div topo */height:80px; /*altura da div topo */margin-left:80px;margin-top:5px;text-align:left;}/**** inicio sip ********/#sip {width:278px; /*largura da div topo */height:119px; /*altura da div topo */background:url(../imagens/fundo_sip.jpg) repeat-x;float:right;margin-top:5px;display:table;}#sip div.sip_titulo {height:32px; /*altura da div topo */margin-left:1px;margin-top:8px;text-align:center;}#sip div.sip_descricao {width:185px; /*largura da div topo */height:83px; /*altura da div topo */margin-left:78px;margin-top:5px;text-align:left;}/**** inicio noticias em destaque ********/#conteudocentral div.noticiasdestaque {width:572px; /*largura da div topo */height:200px; /*altura da div topo */display:block;margin-top:10px;}#conteudocentral div.noticiasdestaque_titulo {width:572px; /*largura da div topo */height:25px; /*altura da div topo */margin-top:1px;font:18px Verdana, Arial, Helvetica, sans-serif;color:#0b6702;float:left;}#conteudocentral div.noticiasdestaque_foto {width:220px; /*largura da div topo */height:165px; /*altura da div topo */margin-top:1px;float:left;display:table;}#conteudocentral div.noticiasdestaque_noticias {width:340px; /*largura da div topo */height:165px;margin-top:1px;margin-left:3px;float:right;display:table;}/**** fim noticias em destaque ********//**** inicio noticias em destaque ********/#conteudocentral #ultimasnoticias {display:block;width:572px; /*largura da div topo */height:37px; /*altura da div topo */background:url(../imagens/barra_ultimasnoticias.jpg);margin-top:10px;float:left;}#ultimasnoticias_asnoticias {width:475px; /*largura da div topo */height:220px; /*altura da div topo */float:left;display:block;}/**** fim noticias em destaque ********//**** inicio banner transparencia e licitacao ********/#conteudocentral div.banner_centralmenuesquerda {width:278px; /*largura da div topo */height:121px; /*altura da div topo */float:left;margin-top:5px;display:block;}#conteudocentral div.banner_centraldireito {width:278px; /*largura da div topo */height:121px; /*altura da div topo */float:right;margin-top:5px;display:block;}/**** fim banner transparencia e licitacao ********//**** inicio banner transparencia e licitacao ********/#conteudocentral div.banner_centralmenuesquerda2 {width:278px; /*largura da div topo */height:121px; /*altura da div topo */float:left;display:block;margin-top:5px;}#conteudocentral div.banner_centraldireito2 {width:278px; /*largura da div topo */height:121px; /*altura da div topo */float:right;display:block;margin-top:5px;}/**** fim banner transparencia e licitacao ********//**** inicio banner full central ********/#conteudocentral div.bannerfull {width:572px; /*largura da div topo */height:130px; /*altura da div topo */margin-top:7px;float:left;display:table;}/**** fim banner full central ********/
Edição feita por: Victor Hugo Odo, 15/11/2009, 18:19.
Corrigir URLs
