Ir para conteúdo

POWERED BY:

Arquivado

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

Claudio Fonseca

[Resolvido] Lightbox problema no IE

Por , em Javascript

Recommended Posts

Claudio Fonseca    0

Claudio Fonseca
Postado

Ola Galera do iMasters, sou novo por aqui, mais já usei muita ajuda do forum. Considero-me um Autodidata, mas minha formação é em design nunca me preocupei com a programação em si, quando dependia de algo sem fazia uma busca e aprendia algo novo.

Bem, montei meu novo site (www.claudiodesigner.com) e resolvi dar um toque profissional no meu portfolio, onde consta um tumbs da imagem do projeto e sua descrição e para dar o tal toque profissional usei o Lightbox 2.04. Como sou usuário de Fire Fox não percebi do erro que estava acontecendo com o IE (internet explorer). Vamos a ele.

Abaixo segue a imagem capturada do Fire fox e da MMMMMM do IE:

 

Inserir imagens

Imagem Postada

 

Imagem Postada

 

Abaixo aqui está o código HTML, não entendo muito, pois sou usuário de Dreamweaver, agora na versão CS4.

 

<!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=utf-8" />
<meta name="description" content="Projetos gráficos em geral: Rio de Janeiro, design editorial, design gráfico, produtor gráfico, design, design gráfico, identidade visual, websites, designer, webdesigner, papelaria, cartão de visitas, manual de identidade visual, marcas, logotipos, localização" />
<meta name="keywords" content="design,design gráfico,identidade visual,websites,designer,webdesigner,papelaria,cartão de visitas,manual de identidade visual,marcas,logotipos,localização" />
<meta name="subject" content="design gráfico">
<meta name="rating" content="general">
<meta name="robots" content="all" />
<meta name="googlebot" content="index, follow">
<meta name="author" content="www.claudiodesigner.com" />
<meta name="audience" content="all">
<meta name="revisit-after" content="2" />
<meta name="doc-class" content="Living Document" />
<meta name="verify-v1" content="WLo/8lvMmA/F1hvYjEgNqGvrIB/CSvWTvTLW/3ExeEw=" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<title>PORTFOLIO : : Claudio Fonseca - Designer</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<style type="text/css">
<!--
@import url("font.css");
@import url("css/lightbox.css");
.google {
	background-image: url(img/google.png);
	width: 160px;
	position: absolute;
	top: 350px;
	right: 160px;
	height: 600px;
	background-repeat: no-repeat;
	z-index: 5;
}
body {
	background-color: #FFFFFF;
	overflow: auto;
}
.topo {
	height: 59px;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #C0353A;
	z-index: 1;
}
.site {
	height: 6542px;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #CCCCCC;
}
.menu {
	height: 88.6px;
	width: 1019.7px;
	margin-left: -509.85px;
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 0px;
}
.conteudo {
	background-image: url(img/base.png);
	height: 6443px;
	width: 1247px;
	margin-left: -623.5px;
	position: absolute;
	left: 50%;
	top: 58.891px;
	z-index: 0;
}
.cabeca {
	background-image: url(img/cabeca_portfolio.png);
	height: 303px;
	width: 1020px;
	margin-left: -510px;
	position: absolute;
	top: -5px;
	left: 50%;
	z-index: 0;
}
.roda_pe {
	height: 30px;
	width: 1021px;
	position: absolute;
	background-color: #FFFFFF;
	left: 50%;
	margin-left: -510.5px;
	top: 24px;
}
.texto_rodape {
	font-family: Calibri;
	font-size: 11px;
	color: #FFFFFF;
	text-align: center;
}
.link_imagens {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.friso_base {
	height: 24px;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #BF2029;
}
.base {
	height: 74px;
	width: 100%;
	position: absolute;
	background-color: #FFFFFF;
	left: 0px;
	bottom: -21px;
	z-index: 1;
}
.materias {
	width: 470px;
	margin-left: -465px;
	position: absolute;
	left: 50%;
	top: 260px;
	height: 6080px;
	font-family: Calibri;
	font-size: 18px;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	text-align: justify;
	margin-top: 0px;
}
.titulo {
	font-family: Calibri;
	font-size: 32px;
	font-weight: bold;
	color: #FF0000;
	text-decoration: none;
}
.descricao {	font-family: Calibri;
	font-size: 18px;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	text-align: justify;
	margin-top: 0px;
}
a.ancora:link {
	text-decoration: none;
}
a.ancora:visited {
	text-decoration: none;
}
a.ancora:hover {
	text-decoration: none;
	color: #FF0;
}
a.ancora:active {
	text-decoration: none;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link rel="shortcut icon" href="img/icone.ico" />
<style type="text/css">
<!--
#apDiv34 {
	position:absolute;
	left:144px;
	top:11435px;
	width:254px;
	height:111px;
	z-index:1;
}
#apDiv35 {
	position:absolute;
	left:716px;
	top:1333px;
	width:275px;
	height:248px;
	z-index:1;
}
#apDiv36 {
	position:absolute;
	left:0;
	top:11094px;
	width:470px;
	height:358px;
	z-index:1;
}
#apDiv37 {
	position:absolute;
	left:0;
	top:11452px;
	width:450px;
	height:243px;
	z-index:1;
}
-->
</style>
</head>
<body>
<div class="site">
  <div class="topo"><a name="topo" id="topo"></a></div>
  <div class="menu">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1019','height','88','src','menu','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','TRANSPARENT','movie','menu' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1019" height="88">
      <param name="movie" value="menu.swf" />
      <param name="quality" value="high" />
      <param name="WMODE" value="TRANSPARENT" />
      <embed src="menu.swf" width="1019" height="88" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="TRANSPARENT"></embed>
    </object>
  </noscript></div>
  <div class="conteudo">
    <div class="cabeca"></div>
    <div class="google"><script type="text/javascript"><!--
google_ad_client = "pub-4782585156132706";
/* 160x600, criado 20/08/09 */
google_ad_slot = "7776354362";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
    <div class="materias">
      <div class="titulo" id="apDiv1" style="position: absolute; left: 0px; top: 0px; width: 470px; height: 39px; z-index: 1">Portfolio</div>
      <div id="apDiv2" style="position: absolute; left: 0px; top: 61px; width: 150px; height: 114px; z-index: 2"><a href="img/portfolio/001.png" rel="lightbox[roadtrip]"><img src="img/tumbs/001.png" width="150" height="114" class="link_imagens" /></a></div>
      <div id="apDiv3" style="position: absolute; left: 154px; top: 61px; width: 316px; height: 66px; z-index: 3"><span class="descricao">Projeto Gráfico: Claudio Fonseca<br />
        Ensaio Gráfico | Capas: Séries Biografias<br />
        Ano: 2005</span></div>
      <div id="apDiv4" style="position: absolute; left: 0px; top: 175px; width: 470px; height: 176px; z-index: 4">
        <p class="descricao">Descrição: Capas para uma série de biografias destinada à classe B e A, a editora seria a Record. Foi realizada uma pesquisa de similaridade para averiguar o que o mercado estava apresentando, assim, foi usado para o logotipo da série uma tipografia script e com base uma tipografia serifada, passando uma certa classe na composição visual, a imagem do biografado também foi colocada de modo que em exposição fosse facilmente encontrado. </p>
      </div>
      <div id="apDiv5" style="position: absolute; left: 0px; top: 370px; width: 150px; height: 114px; z-index: 5"><a href="img/portfolio/002.png" rel="lightbox[roadtrip]"><img src="img/tumbs/002.png" width="150" height="114" class="link_imagens" /></a></div>
      <div id="apDiv6" style="position: absolute; left: 154px; top: 370px; width: 316px; height: 88px; z-index: 6">
        <p class="descricao">Projeto Gráfico: Claudio Fonseca, Ana Bia Mansur e Eduardo Morcillo. <br />
          Ensaio Gráfico | CD Gesta - Livreto, berço, label e contra capa | Ano: 2005</p>
      </div>
      <div id="apDiv7" style="position: absolute; left: 0px; top: 484px; width: 470px; height: 176px; z-index: 7">
        <p class="descricao">Descrição: Identidade visual para um grupo de músicos que usavam instrumentos populares da região das Minas Gerais. Depois de uma pesquisa e levantamento de similares, percebemos que o projeto deveria ter uma identidade como as festas de interior. Foram utilizados imagens de festas folclóricas, com um apoio dos enfeites, a capa teve como apoio uma foto digital do ceu do Rio de Janeiro que teve uma intervenção digital.</p>
      </div>
      <div id="apDiv8" style="position: absolute; left: 0px; top: 679px; width: 150px; height: 114px; z-index: 8"><a href="img/portfolio/003.png" rel="lightbox[roadtrip]"><img src="img/tumbs/003.png" width="150" height="114" class="link_imagens" /></a></div>
      <div id="apDiv9" style="position: absolute; left: 154px; top: 679px; width: 316px; height: 88px; z-index: 9">
        <p class="descricao">Projeto Gráfico: Almir Mirabeau, Claudio Fonseca, Boris, Carlos Eduardo. <br />
          Gávea Cath - 
          Centro de Cardiologia Intervencionista da Gávea</p>
      </div>
      <div id="apDiv10" style="position: absolute; left: 0px; top: 793px; width: 470px; height: 239px; z-index: 10">
        <p class="descricao">(Hemodinâmica da Clínica São Vicente)<br />
          Projeto: Assinatura de Marca | Ano: 2006</p>
        <p class="descricao">Descrição: Como, a principio, não se teve perspectiva de um reposicionamento da marca da Clínica São Vicente e o cliente teve interesse em minimizar os efeitos desse posicionamento, levou então, a criação de um conceito para o projeto que valorizasse a relação de confiança do centro de cardiologia, foi adotado a incorporação da assinatura HEMODINÂMICA na marca da Clínica São Vicente aumentando a identificação com a Clínica São Vicente, que remete a sofisticação e qualidade.</p>
      </div>
      <div id="apDiv11" style="position: absolute; left: 0px; top: 1051px; width: 150px; height: 113px; z-index: 11"><a href="http://www.sistemabahiense.com.br" target="_blank"><img src="img/tumbs/004.png" title="www.sistemabahiense.com.br" alt="www.sistemabahiense.com.br" width="150" height="113" class="link_imagens" /></a></div>
      <div id="apDiv12" style="position: absolute; left: 154px; top: 1051px; width: 316px; height: 88px; z-index: 12">
        <p class="descricao">Projeto Gráfico: Claudio Fonseca <br />
          Sistema Bahiense de Ensino -  Azerigolan Editora<br />
          Projeto: Site | Ano: 2008</p>
      </div>
      <div id="apDiv13" style="position: absolute; left: 0px; top: 1164px; width: 470px; height: 176px; z-index: 13">
        <p class="descricao">Descrição:  A necessidade da Azerigolan Editora ter um canal virtual, para que os  donos de escolas, pais e alunos, tivessem contato com o Sistema de  Ensino, fez com que o site fosse criado, a Cor Azul é predominante, uma  vez que alem de passar tranqüilidade é ela a que domina a educação, as  normas de navegabilidade, usabilidade, hierarquia e contraste foi  respeitada. Hoje um dos maiores contatos com o Sistema de Ensino é  através do site.</p>
      </div>
      <div id="apDiv14" style="position: absolute; left: 0px; top: 1359px; width: 150px; height: 114px; z-index: 14"><a href="img/portfolio/005.png" rel="lightbox[roadtrip]"><img src="img/tumbs/005.png" width="150" height="114" class="link_imagens" /></a></div>
      <div id="apDiv15" style="position: absolute; left: 154px; top: 1359px; width: 316px; height: 154px; z-index: 15"><span class="descricao">Projeto Gráfico: Claudio Fonseca<br />
        Co-autoria: Fabiana Costa, Jalmir Amador e Sandro Alves<br />
        Sistema Bahiense de Ensino - Azerigolan Editora<br />
        Material didático - Capas e miolo<br />
        Ano: 2006/2009</span></div>
      <div id="apDiv16" style="position: absolute; left: 0px; top: 1473px; width: 150px; height: 114px; z-index: 16"><a href="img/portfolio/006.png" rel="lightbox[roadtrip]"><img src="img/tumbs/006.png" width="150" height="114" class="link_imagens" /></a></div>
      <div id="apDiv17" style="position: absolute; left: 0px; top: 1587px; width: 470px; height: 462px; z-index: 17">
        <p class="descricao"> Descrição:  Para as capas, levou-se em considerarão um fato que é marcante na  Rede Bahiense, que é a preparação do aluno para o Vestibular carioca.  Assim, foram projetadas capas para o material didático, a fim de  evidenciar o Rio de Janeiro; para isso foi adotada uma faixa na  vertical com várias fotos da região, visto que, o Sistema Bahiense de  Ensino atua em toda a Unidade da Federação. Para não fugir do toque de  nacionalidade, foi mantida a cor azul para o primeiro ano, verde para o  segundo ano e amarela para o terceiro ano. O miolo passou também por  uma reestruturação: antes apresentavam cores leves para que não  desviassem semioticamente a atenção dos alunos, fato que mais tarde,  com o material em uso, foi considerado irrelevante. Assim, para  melhorar a estrutura do livro, foi criada uma página para abertura de  capítulos e outra para a continuação desses. A diagramação em duas  colunas foi mantida para que houvesse uma certa harmonia das imagens  com o conteúdo pedagógico. Por final, para atender uma necessidade  comercial a página de abertura foi projetada para que caísse não  somente em páginas impares, mas também em páginas pares. Desta maneira  foi eliminado o uso de páginas brancas para o fechamento de capítulos e  assim minimizando o custo gráfico.</p>
      </div>
      <div id="apDiv18" style="position: absolute; left: 0px; top: 2068px; width: 150px; height: 110px; z-index: 18"><a href="http://www.pinhoemattaradv.com.br" target="_blank"><img src="img/tumbs/007.png" title="www.pinhoemattaradv.com.br" alt="www.pinhoemattaradv.com.br" width="150" height="110" class="link_imagens" /></a></div>
      <div id="apDiv19" style="position: absolute; left: 154px; top: 2068px; width: 316px; height: 66px; z-index: 19"><span class="descricao">Projeto Gráfico: Claudio Fonseca <br />
        Pinho e Mattar Advogados Associados.<br />
        Projeto: Marca e Website | Ano: 2008</span></div>
      <div id="apDiv20" style="position: absolute; left: 0px; top: 2178px; width: 470px; height: 176px; z-index: 20">
        <p class="descricao">Descrição: A necessidade de se posicionar na interne levou o Escritório a idealizar um website. No primeiro contato foi percebido que o mesmo não tinha uma marca constituída para que fosse lembrado visualmente. Foi sugerido em relação à parte cromática as cores Azul e tons de azul, pois remetem a segurança. A concepção do site se teve com boas áreas de respiro para que houvesse melhor legibilidade. A hierarquia a identidade visual se manteve em todas as páginas.</p>
      </div>
      <div id="apDiv21" style="position: absolute; left: 0px; top: 2373px; width: 150px; height: 110px; z-index: 21"><a href="http://www.portoferrari.com" target="_blank"><img src="img/tumbs/008.png" title="www.portoferrari.com" alt="www.portoferrari.com" width="150" height="110" class="link_imagens" /></a></div>
      <div id="apDiv22" style="position: absolute; left: 154px; top: 2373px; width: 316px; height: 66px; z-index: 22">
        <p class="descricao">Projeto Gráfico: Claudio Fonseca<br />
          Porto Ferrari Acessoria Jurídica<br />
          Projeto: Site | Ano: 2008/2008</p>
      </div>
      <div id="apDiv23" style="position: absolute; left: 0px; top: 2483px; width: 470px; height: 176px; z-index: 23">
        <p class="descricao">Descrição: A necessidade de se posicionar na interne levou a Porto Ferrari a projetar um site. Com uma marca ja criada estudamos as formas e cores a serem adotadas no site, os elemntos de apoio a informação como imagens e fotos, foram escolhidas de maneira racional e que remetesse a área jurídica. A concepção do site se teve com boas áreas de respiro para que houvesse melhor legibilidade. A hierarquia a identidade visual se manteve em todas as páginas.</p>
      </div>
      <div id="apDiv24" style="position: absolute; left: 0px; top: 2678px; width: 150px; height: 110px; z-index: 24"><a href="http://www.oxossecacador.com" target="_blank"><img src="img/tumbs/009.png" title="www.oxossecacador.com" alt="www.oxossecacador.com" width="150" height="110" class="link_imagens" /></a></div>
      <div id="apDiv25" style="position: absolute; left: 154px; top: 2678px; width: 316px; height: 88px; z-index: 25"><span class="descricao">Projeto Gráfico: Claudio Fonseca <br />
        Cliente: Templo Umbandista Oxosse Caçador<br />
        Projeto: Site | Ano: 2008</span></div>
      <div id="apDiv26" style="position: absolute; left: 0px; top: 2788px; width: 470px; height: 242px; z-index: 26">
        <p class="descricao">Descrição: A necessidade de se dinfundir a Umbanda pela grande rede (internet), levou, O Templo Umbandista Oxosse Caçador, a projetar um site. O site tem uma ferramenta para marcação de visitas as entidades, como também um album de fotos para que possa mostrar ao visitante as obras e festas sociais que o Templo faz. Foram escolhidas de maneira racional, as cores verdes que é a cor do Orixá Oxosse. A concepção do site se teve com boas áreas de respiro para que houvesse melhor legibilidade. A hierarquia a identidade visual se manteve em todas as páginas a fim de que na navegação o visitante não se sinta perdido.</p>
      </div>
      <div id="apDiv27" style="position: absolute; left: 0px; top: 3049px; width: 150px; height: 114px; z-index: 27"><a href="img/portfolio/010.png" rel="lightbox[roadtrip]"><img src="img/tumbs/010.png" width="150" height="114" class="link_imagens" /></a></div>
      <div id="apDiv28" style="position: absolute; left: 154px; top: 3049px; width: 316px; height: 66px; z-index: 28"><span class="descricao">Projeto Gráfico<br />
        Cliente: Ensaio gráfico<br />
        Projeto: DVD - Divas Live 99 | Ano: 2006</span></div>
      <div id="apDiv29" style="position: absolute; left: 0px; top: 3163px; width: 470px; height: 154px; z-index: 29">
        <p class="descricao">Descrição: O projeto gráfico vem mostrar a melhoria de uma peça ja existente no mercado, após assistir o DVD, notei que poderia transmitir visualmente o ambiente que se encontra no show. Depois de capturar as imagens do show e procurar o melhor contraste que retratasse o evento, apliquei os conhecimentos em editoração e design afim de chegar em uma unidade perante o próprio conteúdo do DVD. </p>
      </div>
      <div id="apDiv30" style="position: absolute; left: 0px; top: 3336px; width: 150px; height: 114px; z-index: 30"><a href="img/portfolio/011.png" rel="lightbox[roadtrip]"><img src="img/tumbs/011.png" width="150" height="114" class="link_imagens" /></a></div>
      <div id="apDiv31" style="position: absolute; left: 154px; top: 3336px; width: 316px; height: 66px; z-index: 31"><span class="descricao">Projeto Gráfico: Claudio Fonseca <br />
        Cliente: Fast Tradução<br />
        Projeto: Papelaria | Ano: 2008</span></div>
      <div id="apDiv32" style="position: absolute; left: 0px; top: 3450px; width: 470px; height: 110px; z-index: 32">
        <p class="descricao">Descrição: A necessidade do Cliente em renovar sua papelaria e juntamente se projetar no mercado, levou a criação de uma papelaria que agregasse à marca os seus serviços. A pasta com bolsa canguru teve sua faca refeita, pois a anterior não era única e sim com a bolsa em separado para depois ser colada.</p>
      </div>
      <div id="apDiv33" style="position: absolute; left: 0px; top: 3579px; width: 150px; height: 197px; z-index: 33"><a href="http://www.fasttraducao.com.br" target="_blank"><img src="img/tumbs/012.png" title="www.fasttraducao.com.br" alt="www.fasttraducao.com.br" width="150" height="197" class="link_imagens" /></a></div>
      <div id="apDiv34" style="position: absolute; left: 154px; top: 3579px; width: 316px; height: 88px; z-index: 34"><span class="descricao">Projeto Gráfico: Claudio Fonseca <br />
        Cliente: Fast Tradução<br />
        Projeto em andamento: Web Site | Ano: 2009/2010</span></div>
      <div id="apDiv35" style="position: absolute; left: 0px; top: 3776px; width: 470px; height: 176px; z-index: 35">
        <p class="descricao">Descrição: Layout do novo site da FAST TRADUÇÃO. Para unificar a identidade da empresa, abrangendo a Papelaria com o web site, levou a criação do layout. As setas em vermelho representam a tradução entre os idiomas. As setas tiveram um apoio visual de imagens regionais de todo mundo, representando assim a tradução de um idioma para o outro. As cores seguiram a identidade da marca FAST. Foi previsto um auto atendimento o qual não existia, porém mencionava.</p>
      </div>
      <div id="apDiv36" style="position: absolute; left: 0px; top: 3971px; width: 150px; height: 114px; z-index: 36"><a href="img/portfolio/013.png" rel="lightbox[roadtrip]"><img src="img/tumbs/013.png" width="150" height="114" class="link_imagens" /></a></div>
      <div id="apDiv37" style="position: absolute; left: 154px; top: 3971px; width: 316px; height: 132px; z-index: 37"><span class="descricao">Projeto Gráfico: Claudio Fonseca<br />
        Autoria: Claudio Fonseca e Leonardo Storch.<br />
        Trabalho Acadêmico - Disciplina <br />
        Editoração Eletrônica<br />
        Projeto: News Organ | Ano: 2005</span></div>
      <div id="apDiv38" style="position: absolute; left: 0px; top: 4103px; width: 470px; height: 110px; z-index: 38">
        <p class="descricao">Descrição: O Orientador brifou o Trabalho. O briefing dizia que a peça gráfica deveria ser diagramada respeitando as normas de diagramação, como equilíbrio, lead, harmonia, contraste e legibilidade. A matéria e as imagens foram fornecidas pelo orientador.</p>
      </div>
      <div id="apDiv39" style="position: absolute; left: 0px; top: 4232px; width: 150px; height: 114px; z-index: 39"><a href="img/portfolio/014.png" rel="lightbox[roadtrip]"><img src="img/tumbs/014.png" width="150" height="114" class="link_imagens" /></a></div>
      <div id="apDiv40" style="position: absolute; left: 154px; top: 4232px; width: 316px; height: 88px; z-index: 40">
        <p class="descricao">Projeto Gráfico: Claudio Fonseca <br />
          Cliente: Trabalho Acadêmico – Disciplina Publicidade e Propaganda<br />
          Projeto: Campanha SUIPA | Ano: 2005</p>
      </div>
      <div id="apDiv41" style="position: absolute; left: 0px; top: 4346px; width: 470px; height: 242px; z-index: 41">
        <p class="descricao">Descrição: O Orientador dividiu a turma em grupos e pediu para que chegassem a um tema a fim de trabalhar a campanha publicitária. Apos a primeira exposição dos temas, foi votada o tema que a turma teria que trabalhar, no caso, a campanha que venceu foi a da SUIPA, que é um núcleo de amparo a animais abandonados. O tema seria a adoção de animais pela sociedade. Com o tema definido e com a época de natal perto, criei peças com apelo emotivo, criei um selo de cidadão responsável para cada peça da instituição fosse reconhecida e que passasse uma necessidade ao observador de ser responsável.</p>
      </div>
      <div id="apDiv42" style="position: absolute; left: 0px; top: 4607px; width: 150px; height: 209px; z-index: 42"><a href="img/portfolio/015.png" rel="lightbox[roadtrip]"><img src="img/tumbs/015.png" width="150" height="209" class="link_imagens" /></a></div>
      <div id="apDiv43" style="position: absolute; left: 154px; top: 4607px; width: 316px; height: 88px; z-index: 43">Projeto Gráfico: Claudio Fonseca <br />
        Cliente: Trabalho Acadêmico – Disciplina Análise Gráfica<br />
        Projeto: Cartaz | Ano: 2006/2006</div>
      <div id="apDiv44" style="position: absolute; left: 0px; top: 4816px; width: 470px; height: 198px; z-index: 44">
        <p class="descricao">Descrição: O Orientador brifou o Trabalho. O briefing pedia que a peça gráfica deveria ser um cartaz para divulgação de um espaço cultural que seria chamado de sopa de letrinhas, que teria uma área gastronômica e também destinaria a cursos, palestras, exposições e eventos literários, tal lugar teria como alvo a classe A. A marca foi projetada em uma tipografia serifada tendo assim um peso clássico, o borrão vermelho foi introduzido como ruído gráfico para dar um peso visual e acrescentar assim o lado artístico.</p>
      </div>
      <div id="apDiv45" style="position: absolute; left: 0px; top: 5033px; width: 150px; height: 114px; z-index: 45"><a href="img/portfolio/016.png" rel="lightbox[roadtrip]"><img src="img/tumbs/016.png" width="150" height="114" class="link_imagens" /></a></div>
      <div id="apDiv46" style="position: absolute; left: 154px; top: 5033px; width: 316px; height: 110px; z-index: 46"><span class="descricao">Projeto Gráfico: Claudio Fonseca <br />
        Cliente: Sistema Bahiense de Ensino - Azerigolan Editora<br />
        Projeto: Material didático - Capas e miolo<br />
        Ano: 2008/2009</span></div>
      <div id="apDiv47" style="position: absolute; left: 0px; top: 5147px; width: 470px; height: 132px; z-index: 47">
        <p class="descricao">Descrição: Criação da capa para o livro do projeto sucesso do colégio Bahiense. O Projeto consiste em preparar os alunos do 3º ano do ensino médio para o vestibular da UFRJ. Desta maneira foi modelado uma taça que representa o sucesso na colocação, como é feito na premiação de pilotos e times de futebol.</p>
      </div>
      <div id="apDiv48" style="position: absolute; left: 0px; top: 5298px; width: 150px; height: 114px; z-index: 48"><a href="img/portfolio/018.png" rel="lightbox[roadtrip]"><img src="img/tumbs/018.png" width="150" height="114" class="link_imagens" /></a></div>
      <div id="apDiv49" style="position: absolute; left: 154px; top: 5298px; width: 316px; height: 88px; z-index: 49"><span class="descricao">Projeto Gráfico: Claudio Fonseca<br />
        Templo Umbandista Oxossi Caçador<br />
        CD Amigos de Fé - Livreto, berço, label e contra capa | 
        Ano: 2009</span></div>
      <div id="apDiv50" style="position: absolute; left: 0px; top: 5417px; width: 470px; height: 132px; z-index: 50"><span class="descricao">Descrição: Identidade visual para o lançamento do CD do Templo Umbandista. A imagem de um riacho com pedras e a floresta em volta é para remeter ao Orixá Oxossi e também as águas que poderia ser ligada aos Orixás Iemanja e Oxum, as pedras sendo identificadas com o Orixá Xango. o Label do CD é a foto do Zelador do Terreiro.</span></div>
      <div id="apDiv51" style="position: absolute; left: 0px; top: 5568px; width: 150px; height: 210px; z-index: 51"><a href="img/portfolio/017.png" rel="lightbox[roadtrip]"><img src="img/tumbs/017.png" width="150" height="210" class="link_imagens" /></a></div>
      <div id="apDiv52" style="position: absolute; left: 154px; top: 5568px; width: 316px; height: 44px; z-index: 52"><span class="descricao"><strong>Projeto Gráfico</strong>: Claudio Fonseca<br />
        Flayer<strong> - </strong> Ogan Daniel | <strong>Ano</strong>: 2009</span></div>
      <div id="apDiv53" style="position: absolute; left: 0px; top: 5778px; width: 470px; height: 110px; z-index: 53">
        <p class="tabela_conteudo"><span class="descricao"><strong>Descrição</strong>: Flayer para divulgação do Curso de Toque e Cantos de Umbanda. O Cliente forneceu algumas imagens. Foi escolhida a imagem que poderia dar a sensação de que o microfone mostrasse os tipos de cantos e toques e também valorizasse a imagem do Ogan.</span></p>
      </div>
      <div id="apDiv54" style="position: absolute; left: 0px; top: 6010px; width: 470px; height: 19px; z-index: 54"><<a href="#topo">Voltar ao topo</a>></div>
    </div>
  </div>
  <div class="base">
    <div class="friso_base"></div>
    <div class="roda_pe">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="576" height="30" background="img/rodape.png" class="texto_rodape" id="texto_roda_pe">©2009 claudiodesigner.com | celular: 55 21 7846.0245 | id.: 83*75236 | e-mail: designer@claudiodesigner.com</td>
          <td height="30"> </td>
        </tr>
      </table>
    </div>
  </div>
</div>

 //codigo google analytics

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10328178-1");
pageTracker._trackPageview();
} catch(err) {}</script> 

//final do codigo

</body>
</html>

As pastas CSS, JS e images, estão na raiz do site.

Fuçando um pouco, percebi que o Lightbox funciona corretamente quando o cabeçalho do HTML não é padrão W3.

Alguém iluminado tem alguma ideia do que está acontecendo?

 

Desde já agradeço a atenção de todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Claudio Fonseca    0

Claudio Fonseca
Postado

Valeu hgb7, mas não funcionou!

 

Estive reparando que quando faço algo com tabelas sem divs, o lightbox funciona perfeitamente.

 

O Site tem várias divs umas sobrepostas a outras, uma por dentro de outra e ai vai, justamente para dar um visual elegante. Entretanto no IE, pelo que andei testando, não funciona corretamente quando há divs no conteúdo.

 

Estou pesquisando e aguardando alguma dica que eu possa utilizar!

 

Obrigado camarada!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Claudio Fonseca    0

Claudio Fonseca
Postado

Então Galera, muito obrigado a todos, aqueles que responderam, aqueles que visitaram e com certeza devem estar procurando algo relacionado para ajudar.

 

Acabei resolvendo meu problema.

 

Não sei o porquê, mais o Lightbox deveria estar pegando alguma informação da função (não sei se é este o nome) body, aquele que definimos as margens, a cor do texto, a cor do fundo de nossa página!

 

Até então não tinha nada lá somente um fundo cinza, sem pré-definição de margens e tamanho.

 

Para quem está lendo este tópico desde o inicio, sabe que a página em questão tem várias divs e no final no comprimento tem a altura de 6570 pixels.

 

Que fiz: Coloquei a página com 0 de margens e a altura com o somatório das divs (6570 pixels).

 

Com isso, acho eu, que o script do lightbox entendeu que a área escurecida deve ser o tamanho do body.

 

Espero ter ajudado alguém, e mais do que nunca estarei aqui lendo, opinando, ajudando e aprendendo.

 

Obrigado a todos.

Compartilhar este post

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

Informação importante

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

  Aceito