Ir para conteúdo
Fórum Script Brasil
  • 0

Problema com layout


Perk

Pergunta

Achei na Internet um efeito que eu preciso. Consegui configurar este efeito como eu gostaria e agora preciso incluir ele dentro de uma página do site.

A estrutura da página que ele vai entrar é esta, já com o include:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>:: Teste Book ::</title>

</head>

<body>

<table width="800" border="1" align="center" cellpadding="6" cellspacing="0">

<tr>

<td width="172" height="500" align="center" valign="top" bgcolor="#FFFFFF">lista esquerda</td>

<td align="center" valign="top" bgcolor="#FFFFFF">

<table width="100%" border="2" cellspacing="0" cellpadding="0">

<tr>

<td>

<?PHP include"Book.php";?>

</td>

</tr>

</table>

</td>

<td width="172" height="1" align="center" valign="top" bgcolor="#FFFFFF">lista direita</td>

</tr>

</table>

<br>

<br></body>

</html>

Sem o include, a tabela fica com a largura que eu preciso, que é igual a todo o site. Porém quando coloco o include a página desconfigura, ficando com a largura todal da tela e uma altura enorme. O código do Book.php é este:
<style type="text/css">

html {

overflow: hidden;

}

body {

}

#center {

position:absolute;

left: 50%;

top: 50%;

}

#DHTMLBOOK {

position: relative;

background: #000;

width: 600px;

height: 450px;

left: -310px;

top: -200px;

visibility: hidden;

}

#TXTBOX {

position: absolute;

font-family: verdana;

color: #aba193;

font-size: .8em;

width: 510px;

text-align: center;

top: 450px;

}

.page {

position: absolute;

cursor: pointer;

overflow: hidden;

width: 50%;

height: 100%;

border-left: #000000 solid 0px;

}

.right {

left: 50%;

border-right: #000000 solid 1px;

}

.turn {

background: #000000;

}

.img {

position: absolute;

height: 100%;

width: 200%;

}

</style>

&lt;script type="text/javascript"><!--

document.onselectstart = function () { return false; }

var nI = 0;

var que = 0;

var run = false;

function setOpacity(obj,o) {

if (o<0) o=0; else if (o>100) o = 100;

if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;

}

function TPR__(p) {

P1.style.left = 50-(2.5*p)+"%";

P1.style.width = (2.5*p)+"%";

setOpacity(P1i, .5*p*p);

if (p == 20) run = false;

}

function TPR_(p) {

P2.style.width = 50-(2.5*p)+"%";

setOpacity(P2i, 100-.5*(p*p));

if (p == 20) {

P2i.src = IMGSRC[que].src;

setOpacity(P2i, 100);

P2.style.width = "50%";

for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);

}

}

function TPR() {

if (!run) {

run = true;

P01i.src = IMGSRC[que].src;

P1.style.width = 0;

que++;

if (que>=nI) que = 0;

titLe(que);

P02i.src = IMGSRC[que].src;

P1i.src = IMGSRC[que].src;

for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);

} else setTimeout("TPR()", 100);

}

function TPL__(p) {

P2.style.width = (2.5*p)+"%";

setOpacity(P2i, .5*p*p);

if (p == 20) run = false;

}

function TPL_(p) {

P1.style.left = (2.5*p)+"%";

P1.style.width = 40+(10-2.5*p)+"%";

setOpacity(P1i, 100-.5*(p*p));

if (p == 20) {

P1i.src = IMGSRC[que].src;

setOpacity(P1i, 100);

P1.style.left = 0;

P1.style.width = "50%";

for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);

}

}

function TPL() {

if (!run) {

run = true;

P02i.src = IMGSRC[que].src;

P2.style.width = 0;

que--;

if (que < 0) que = nI-1;

titLe(que);

P01i.src = IMGSRC[que].src;

P2i.src = IMGSRC[que].src;

for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);

} else setTimeout("TPL()", 100);

}

function titLe(p) {

document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;

}

onload = function() {

IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img");

DB = document.getElementById("DHTMLBOOK");

P01 = DB.getElementsByTagName("span")[0];

P01i = P01.getElementsByTagName("img")[0];

P02 = DB.getElementsByTagName("span")[1];

P02i = P02.getElementsByTagName("img")[0];

P1 = DB.getElementsByTagName("span")[2];

P1i = P1.getElementsByTagName("img")[0];

P2 = DB.getElementsByTagName("span")[3];

P2i = P2.getElementsByTagName("img")[0];

nI = IMGSRC.length;

P1i.src = IMGSRC[que].src;

P2i.src = IMGSRC[que].src;

titLe(que);

DB.style.visibility = "visible";

}

//-->

</script>

<table id="center"><tr><td>

<div id="DHTMLBOOK">

<span class="page" onmousedown="return false;" ondblclick="TPL();" onclick="TPL();"><img class="img"></span>

<span class="page right" onmousedown="return false;" ondblclick="TPR();" onclick="TPR();"><img class="img" style="left:-100%"></span>

<span class="page turn" onmousedown="return false;" ondblclick="TPL();" onclick="TPL();"><img class="img" style="opacity:1;filter:alpha()"></span>

<span class="page turn right" onmousedown="return false;" ondblclick="TPR();" onclick="TPR();"><img class="img" style="opacity:1;filter:alpha();left:-100%"></span>

<div id="TXTBOX"></div>

</div>

</td></tr></table>

<table id="imgsrc" style="visibility:hidden;"><tr><td>

<img alt="Carros de entrega em frente à sede. Maio de 1965." src="slide/imprensa.jpg">

<img alt="Believing she had dreamed of the roar of his bike," src="slide/newdayac.jpg">

<img alt="she woke up to the sunshine in her eyelids." src="slide/newdaycc.jpg">

<img alt="CERCO DO EDIFÍCIO E APREENSÃO DA EDIÇÃO EXTRA" src="slide/cerco.jpg">

</td></tr></table>

O problema é que não sei onde e como configurar as DIV's para que não ultrapassem a largura e altura já definidas das Table's. Preciso muito desta ajuda de alguém.

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...