Como abrir links usando tableless?

Luiz Vieira · Dezembro 21, 2007

Pessoal, estou trabalhando em um layout novo e sou novato em tableless...

No código estou trabalhando com DIVs ao invés de tables.

Vejam o link: http://www.2ds.com.br/audicaixa/site_azul.htm

Cada box é uma div diferente. E eu gostaria de saber como fazer para abrir o conteúdo de cada link na parte central da janela.

Esse é o código do htm inicial:

<html>

<head>

<title>site_azul.jpg</title>

<meta http-equiv="Content-Type" content="text/html;iso-8859-1">
<meta name="description" content="FW MX CSS Layer">

<style type="text/css">
#siteazulr1c1 {
	position:absolute;
	left:0px;
	top:0px;
	width:760px;
	height:79px;
	z-index:1;
	visibility:visible;
}
#siteazulr2c1 {
	position:absolute;
	left:0px;
	top:79px;
	width:139px;
	height:26px;
	z-index:2;
	visibility:visible;
}
#siteazulr2c4 {
	position:absolute;
	left:139px;
	top:79px;
	width:139px;
	height:26px;
	z-index:3;
	visibility:visible;
}
#siteazulr2c6 {
	position:absolute;
	left:278px;
	top:79px;
	width:139px;
	height:26px;
	z-index:4;
	visibility:visible;
}
#siteazulr2c10 {
	position:absolute;
	left:417px;
	top:79px;
	width:139px;
	height:26px;
	z-index:5;
	visibility:visible;
}
#siteazulr2c11 {
	position:absolute;
	left:556px;
	top:79px;
	width:139px;
	height:26px;
	z-index:6;
	visibility:visible;
}
#siteazulr2c14 {
	position:absolute;
	left:695px;
	top:79px;
	width:65px;
	height:26px;
	z-index:7;
	visibility:visible;
}
#siteazulr3c1 {
	position:absolute;
	left:0px;
	top:105px;
	width:140px;
	height:19px;
	z-index:8;
	visibility:visible;
}
#siteazulr3c5 {
	position:absolute;
	left:140px;
	top:105px;
	width:217px;
	height:24px;
	z-index:9;
	visibility:visible;
}
#siteazulr3c8 {
	position:absolute;
	left:357px;
	top:105px;
	width:218px;
	height:24px;
	z-index:10;
	visibility:visible;
}
#siteazulr3c12 {
	position:absolute;
	left:575px;
	top:105px;
	width:185px;
	height:24px;
	z-index:11;
	visibility:visible;
}
#siteazulr4c1 {
	position:absolute;
	left:0px;
	top:124px;
	width:140px;
	height:21px;
	z-index:12;
	visibility:visible;
}
#siteazulr5c5 {
	position:absolute;
	left:140px;
	top:129px;
	width:213px;
	height:244px;
	z-index:13;
	visibility:visible;
}
#siteazulr5c7 {
	position:absolute;
	left:353px;
	top:129px;
	width:7px;
	height:244px;
	z-index:14;
	visibility:visible;
}
#siteazulr5c9 {
	position:absolute;
	left:360px;
	top:129px;
	width:215px;
	height:244px;
	z-index:15;
	visibility:visible;
}
#siteazulr5c12 {
	position:absolute;
	left:575px;
	top:129px;
	width:6px;
	height:382px;
	z-index:16;
	visibility:visible;
}
#siteazulr5c13 {
	position:absolute;
	left:581px;
	top:129px;
	width:174px;
	height:382px;
	z-index:17;
	visibility:visible;
}
#siteazulr5c15 {
	position:absolute;
	left:755px;
	top:129px;
	width:5px;
	height:382px;
	z-index:18;
	visibility:visible;
}
#siteazulr6c1 {
	position:absolute;
	left:0px;
	top:145px;
	width:140px;
	height:20px;
	z-index:19;
	visibility:visible;
}
#siteazulr7c1 {
	position:absolute;
	left:0px;
	top:165px;
	width:140px;
	height:20px;
	z-index:20;
	visibility:visible;
}
#siteazulr8c1 {
	position:absolute;
	left:0px;
	top:185px;
	width:140px;
	height:20px;
	z-index:21;
	visibility:visible;
}
#siteazulr9c1 {
	position:absolute;
	left:0px;
	top:205px;
	width:140px;
	height:20px;
	z-index:22;
	visibility:visible;
}
#siteazulr10c1 {
	position:absolute;
	left:0px;
	top:225px;
	width:140px;
	height:20px;
	z-index:23;
	visibility:visible;
}
#siteazulr11c1 {
	position:absolute;
	left:0px;
	top:245px;
	width:140px;
	height:21px;
	z-index:24;
	visibility:visible;
}
#siteazulr12c1 {
	position:absolute;
	left:0px;
	top:266px;
	width:140px;
	height:21px;
	z-index:25;
	visibility:visible;
}
#siteazulr13c1 {
	position:absolute;
	left:0px;
	top:287px;
	width:140px;
	height:21px;
	z-index:26;
	visibility:visible;
}
#siteazulr14c1 {
	position:absolute;
	left:0px;
	top:308px;
	width:139px;
	height:14px;
	z-index:27;
	visibility:visible;
}
#siteazulr14c4 {
	position:absolute;
	left:139px;
	top:308px;
	width:1px;
	height:69px;
	z-index:28;
	visibility:visible;
}
#siteazulr15c1 {
	position:absolute;
	left:0px;
	top:322px;
	width:10px;
	height:53px;
	z-index:29;
	visibility:visible;
}
#siteazulr15c2 {
	position:absolute;
	left:10px;
	top:322px;
	width:119px;
	height:40px;
	z-index:30;
	visibility:visible;
}
#siteazulr15c3 {
	position:absolute;
	left:129px;
	top:322px;
	width:10px;
	height:53px;
	z-index:31;
	visibility:visible;
}
#siteazulr16c2 {
	position:absolute;
	left:10px;
	top:362px;
	width:119px;
	height:13px;
	z-index:32;
	visibility:visible;
}
#siteazulr17c5 {
	position:absolute;
	left:140px;
	top:373px;
	width:217px;
	height:26px;
	z-index:33;
	visibility:visible;
}
#siteazulr17c8 {
	position:absolute;
	left:357px;
	top:373px;
	width:218px;
	height:26px;
	z-index:34;
	visibility:visible;
}
#siteazulr18c1 {
	position:absolute;
	left:0px;
	top:375px;
	width:139px;
	height:15px;
	z-index:35;
	visibility:visible;
}
#siteazulr20c1 {
	position:absolute;
	left:0px;
	top:390px;
	width:10px;
	height:53px;
	z-index:36;
	visibility:visible;
}
#siteazulr20c2 {
	position:absolute;
	left:10px;
	top:390px;
	width:119px;
	height:40px;
	z-index:37;
	visibility:visible;
}
#siteazulr20c3 {
	position:absolute;
	left:129px;
	top:390px;
	width:10px;
	height:53px;
	z-index:38;
	visibility:visible;
}
#siteazulr21c4 {
	position:absolute;
	left:139px;
	top:399px;
	width:214px;
	height:248px;
	z-index:39;
	visibility:visible;
}
#siteazulr21c7 {
	position:absolute;
	left:353px;
	top:399px;
	width:7px;
	height:248px;
	z-index:40;
	visibility:visible;
}
#siteazulr21c9 {
	position:absolute;
	left:360px;
	top:399px;
	width:215px;
	height:248px;
	z-index:41;
	visibility:visible;
}
#siteazulr22c2 {
	position:absolute;
	left:10px;
	top:430px;
	width:119px;
	height:13px;
	z-index:42;
	visibility:visible;
}
#siteazulr23c1 {
	position:absolute;
	left:0px;
	top:443px;
	width:139px;
	height:14px;
	z-index:43;
	visibility:visible;
}
#siteazulr24c1 {
	position:absolute;
	left:0px;
	top:457px;
	width:10px;
	height:54px;
	z-index:44;
	visibility:visible;
}
#siteazulr24c2 {
	position:absolute;
	left:10px;
	top:457px;
	width:119px;
	height:40px;
	z-index:45;
	visibility:visible;
}
#siteazulr24c3 {
	position:absolute;
	left:129px;
	top:457px;
	width:10px;
	height:54px;
	z-index:46;
	visibility:visible;
}
#siteazulr25c2 {
	position:absolute;
	left:10px;
	top:497px;
	width:119px;
	height:14px;
	z-index:47;
	visibility:visible;
}
#siteazulr26c1 {
	position:absolute;
	left:0px;
	top:511px;
	width:139px;
	height:15px;
	z-index:48;
	visibility:visible;
}
#siteazulr26c12 {
	position:absolute;
	left:575px;
	top:511px;
	width:185px;
	height:136px;
	z-index:49;
	visibility:visible;
}
#siteazulr27c1 {
	position:absolute;
	left:0px;
	top:526px;
	width:10px;
	height:53px;
	z-index:50;
	visibility:visible;
}
#siteazulr27c2 {
	position:absolute;
	left:10px;
	top:526px;
	width:119px;
	height:40px;
	z-index:51;
	visibility:visible;
}
#siteazulr27c3 {
	position:absolute;
	left:129px;
	top:526px;
	width:10px;
	height:53px;
	z-index:52;
	visibility:visible;
}
#siteazulr28c2 {
	position:absolute;
	left:10px;
	top:566px;
	width:119px;
	height:13px;
	z-index:53;
	visibility:visible;
}
#siteazulr29c1 {
	position:absolute;
	left:0px;
	top:579px;
	width:139px;
	height:13px;
	z-index:54;
	visibility:visible;
}
#siteazulr30c1 {
	position:absolute;
	left:0px;
	top:592px;
	width:10px;
	height:55px;
	z-index:55;
	visibility:visible;
}
#siteazulr30c2 {
	position:absolute;
	left:10px;
	top:592px;
	width:119px;
	height:40px;
	z-index:56;
	visibility:visible;
}
#siteazulr30c3 {
	position:absolute;
	left:129px;
	top:592px;
	width:10px;
	height:55px;
	z-index:57;
	visibility:visible;
}
#siteazulr31c2 {
	position:absolute;
	left:10px;
	top:632px;
	width:119px;
	height:15px;
	z-index:58;
	visibility:visible;
}
#siteazulr32c1 {
	position:absolute;
	left:0px;
	top:647px;
	width:760px;
	height:24px;
	z-index:59;
	visibility:visible;
}

</style>
</head>

<body bgcolor="#ffffff">

<div id="siteazulr21c4"></div>
<div id="siteazulr21c7"><img name="site_azul_r21_c7" src="images/site_azul_r21_c7.jpg" width="7" height="248" border="0"></div>
<div id="siteazulr21c9"></div>
<div id="siteazulr5c5"></div>
<div id="siteazulr5c9"></div>
<div id="siteazulr5c13"></div>
<div id="siteazulr3c5"><img name="site_azul_r3_c5" src="images/site_azul_r3_c5.jpg" width="217" height="24" border="0"></div>
<div id="siteazulr3c8"><img name="site_azul_r3_c8" src="images/site_azul_r3_c8.jpg" width="218" height="24" border="0"></div>
<div id="siteazulr3c12"><img name="site_azul_r3_c12" src="images/site_azul_r3_c12.jpg" width="185" height="24" border="0"></div>
<div id="siteazulr5c7"><img name="site_azul_r5_c7" src="images/site_azul_r5_c7.jpg" width="7" height="244" border="0"></div>
<div id="siteazulr5c12"><img name="site_azul_r5_c12" src="images/site_azul_r5_c12.jpg" width="6" height="382" border="0"></div>
<div id="siteazulr17c5"><img name="site_azul_r17_c5" src="images/site_azul_r17_c5.jpg" width="217" height="26" border="0"></div>
<div id="siteazulr17c8"><img name="site_azul_r17_c8" src="images/site_azul_r17_c8.jpg" width="218" height="26" border="0"></div>
<div id="siteazulr26c12"><img name="site_azul_r26_c12" src="images/site_azul_r26_c12.jpg" width="185" height="136" border="0"></div>




<div id="siteazulr1c1"><img name="site_azul_r1_c1" src="images/site_azul_r1_c1.jpg" width="760" height="79" border="0"></div>
<div id="siteazulr2c1"><img name="site_azul_r2_c1" src="images/site_azul_r2_c1.jpg" width="139" height="26" border="0"></div>
<div id="siteazulr2c4"><img name="site_azul_r2_c4" src="images/site_azul_r2_c4.jpg" width="139" height="26" border="0"></div>
<div id="siteazulr2c6"><img name="site_azul_r2_c6" src="images/site_azul_r2_c6.jpg" width="139" height="26" border="0"></div>
<div id="siteazulr2c10"><img name="site_azul_r2_c10" src="images/site_azul_r2_c10.jpg" width="139" height="26" border="0"></div>
<div id="siteazulr2c11"><img name="site_azul_r2_c11" src="images/site_azul_r2_c11.jpg" width="139" height="26" border="0"></div>
<div id="siteazulr2c14"><img name="site_azul_r2_c14" src="images/site_azul_r2_c14.jpg" width="65" height="26" border="0"></div>
<div id="siteazulr3c1"><a href="teste.htm" target="principal"><img name="site_azul_r3_c1" src="images/site_azul_r3_c1.jpg" width="140" height="19" border="0"></a></div>

<div id="siteazulr4c1"><img name="site_azul_r4_c1" src="images/site_azul_r4_c1.jpg" width="140" height="21" border="0"></div>



<div id="siteazulr5c15"><img name="site_azul_r5_c15" src="images/site_azul_r5_c15.jpg" width="5" height="382" border="0"></div>
<div id="siteazulr6c1"><img name="site_azul_r6_c1" src="images/site_azul_r6_c1.jpg" width="140" height="20" border="0"></div>
<div id="siteazulr7c1"><img name="site_azul_r7_c1" src="images/site_azul_r7_c1.jpg" width="140" height="20" border="0"></div>
<div id="siteazulr8c1"><img name="site_azul_r8_c1" src="images/site_azul_r8_c1.jpg" width="140" height="20" border="0"></div>
<div id="siteazulr9c1"><img name="site_azul_r9_c1" src="images/site_azul_r9_c1.jpg" width="140" height="20" border="0"></div>
<div id="siteazulr10c1"><img name="site_azul_r10_c1" src="images/site_azul_r10_c1.jpg" width="140" height="20" border="0"></div>
<div id="siteazulr11c1"><img name="site_azul_r11_c1" src="images/site_azul_r11_c1.jpg" width="140" height="21" border="0"></div>
<div id="siteazulr12c1"><img name="site_azul_r12_c1" src="images/site_azul_r12_c1.jpg" width="140" height="21" border="0"></div>
<div id="siteazulr13c1"><img name="site_azul_r13_c1" src="images/site_azul_r13_c1.jpg" width="140" height="21" border="0"></div>
<div id="siteazulr14c1"><img name="site_azul_r14_c1" src="images/site_azul_r14_c1.jpg" width="139" height="14" border="0"></div>
<div id="siteazulr14c4"><img name="site_azul_r14_c4" src="images/site_azul_r14_c4.jpg" width="1" height="69" border="0"></div>
<div id="siteazulr15c1"><img name="site_azul_r15_c1" src="images/site_azul_r15_c1.jpg" width="10" height="53" border="0"></div>
<div id="siteazulr15c2"><img name="site_azul_r15_c2" src="images/site_azul_r15_c2.jpg" width="119" height="40" border="0"></div>
<div id="siteazulr15c3"><img name="site_azul_r15_c3" src="images/site_azul_r15_c3.jpg" width="10" height="53" border="0"></div>
<div id="siteazulr16c2"><img name="site_azul_r16_c2" src="images/site_azul_r16_c2.jpg" width="119" height="13" border="0"></div>


<div id="siteazulr18c1"><img name="site_azul_r18_c1" src="images/site_azul_r18_c1.jpg" width="139" height="15" border="0"></div>
<div id="siteazulr20c1"><img name="site_azul_r20_c1" src="images/site_azul_r20_c1.jpg" width="10" height="53" border="0"></div>
<div id="siteazulr20c2"><img name="site_azul_r20_c2" src="images/site_azul_r20_c2.jpg" width="119" height="40" border="0"></div>
<div id="siteazulr20c3"><img name="site_azul_r20_c3" src="images/site_azul_r20_c3.jpg" width="10" height="53" border="0"></div>

<div id="siteazulr22c2"><img name="site_azul_r22_c2" src="images/site_azul_r22_c2.jpg" width="119" height="13" border="0"></div>
<div id="siteazulr23c1"><img name="site_azul_r23_c1" src="images/site_azul_r23_c1.jpg" width="139" height="14" border="0"></div>
<div id="siteazulr24c1"><img name="site_azul_r24_c1" src="images/site_azul_r24_c1.jpg" width="10" height="54" border="0"></div>
<div id="siteazulr24c2"><img name="site_azul_r24_c2" src="images/site_azul_r24_c2.jpg" width="119" height="40" border="0"></div>
<div id="siteazulr24c3"><img name="site_azul_r24_c3" src="images/site_azul_r24_c3.jpg" width="10" height="54" border="0"></div>
<div id="siteazulr25c2"><img name="site_azul_r25_c2" src="images/site_azul_r25_c2.jpg" width="119" height="14" border="0"></div>
<div id="siteazulr26c1"><img name="site_azul_r26_c1" src="images/site_azul_r26_c1.jpg" width="139" height="15" border="0"></div>
<div id="siteazulr27c1"><img name="site_azul_r27_c1" src="images/site_azul_r27_c1.jpg" width="10" height="53" border="0"></div>
<div id="siteazulr27c2"><img name="site_azul_r27_c2" src="images/site_azul_r27_c2.jpg" width="119" height="40" border="0"></div>
<div id="siteazulr27c3"><img name="site_azul_r27_c3" src="images/site_azul_r27_c3.jpg" width="10" height="53" border="0"></div>
<div id="siteazulr28c2"><img name="site_azul_r28_c2" src="images/site_azul_r28_c2.jpg" width="119" height="13" border="0"></div>
<div id="siteazulr29c1"><img name="site_azul_r29_c1" src="images/site_azul_r29_c1.jpg" width="139" height="13" border="0"></div>
<div id="siteazulr30c1"><img name="site_azul_r30_c1" src="images/site_azul_r30_c1.jpg" width="10" height="55" border="0"></div>
<div id="siteazulr30c2"><img name="site_azul_r30_c2" src="images/site_azul_r30_c2.jpg" width="119" height="40" border="0"></div>
<div id="siteazulr30c3"><img name="site_azul_r30_c3" src="images/site_azul_r30_c3.jpg" width="10" height="55" border="0"></div>
<div id="siteazulr31c2"><img name="site_azul_r31_c2" src="images/site_azul_r31_c2.jpg" width="119" height="15" border="0"></div>
<div id="siteazulr32c1"><img name="site_azul_r32_c1" src="images/site_azul_r32_c1.jpg" width="760" height="24" border="0"></div>

</body>
</html>

brcontainer · Dezembro 21, 2007

Se eu entendi o que você disse então lhe digo

na verdade isso não é feito pelo TABELLES.

o TABELLES é para estruturar seu site

a melhor opção é se usar SERVER-SIDE(PHP,JAVA,ASP,etc)

você tem algum conhecimento em alguma dessa linguagens??

;)

Luiz Vieira · Dezembro 21, 2007

Valeu pelo aviso da codebox!!!

Conheço bem ASP e pouco de PHP.

Estou fazendo apenas o layout, e um outro cara fazendo a parte em PHP...

Como poderia fazer isso em PHP?

Não tem um jeito de abrir link através de uma DIV?

Valeu pela força!!!!

brcontainer · Dezembro 22, 2007

Não tem um jeito de abrir link através de uma DIV?

sim apenas em AJAX mas não recomendo, pois você terá problemas com cache e com o CHARSET das páginas carregadas

via AJAX.

Como poderia fazer isso em PHP?

Vou lhe falar a verdade sua página esta meio dificil de aplicar algo =/

mas vou tentar lhe ajudar

ficaria assim(nessa ideia, não é exatamente isso, vai depender um pouco de seu layout):

a parte PHP bem simples

<div><?php include($_GET["url"]);?></div>

os links de exemplo seriam assim:

<a href="?url=paginaA.php">página A</a>
<a href="?url=paginaB.php">página B</a>
<a href="?url=paginaC.php">página C</a>

não moverei seu tópico por que acho que você terá ainda problemas com a parte HTML

e sou novato em tableless...

recomendo você dar uma olhada nesses links especificos:

http://forum.imasters.com.br/index.php?showtopic=223799

e no Laboratório de Scripts (WS)

pois o seu layout está um pouco "sujo" e você pode melhorar, notei que você já esta ficando muito bom

e garanto que esses topicos lhe ajudarão ainda mais

abraço ;)

Luiz Vieira · Dezembro 22, 2007

Valeu mesmo pela ajuda silverfox! :D

Vou dar uma olhada nos tópicos que você citou e estudar um pouco mais pra melhorar o código. Abração e bom Natal http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

brcontainer · Dezembro 22, 2007

qualquer coisa volte a postar que lhe ajudaremos

no que for possivel

abraço e feliz natal tambem

DSerma · Dezembro 22, 2007

Não tem um jeito de abrir link através de uma DIV?
sim apenas em AJAX mas não recomendo, pois você terá problemas com cache e com o CHARSET das páginas carregadas
via AJAX.

Não concordo.....

Eu sempre uso AJAX para realizar este tipo de operações e nunca tive problemas ocm o Charset e nem co ma cache tb.....

Apenas colocando minha opnião. Não to discutindo ou brigando com ninguém.

Abraços...

brcontainer · Dezembro 22, 2007

Eu sempre uso AJAX para realizar este tipo de operações e nunca tive problemas ocm o Charset e nem co ma cache tb

por que provavelmente você sabe utilizar bem o AJAX tanto quanto a linguagem SERVER-SIDE ;) ,

você tem razão na, verdade isso(erro de charset) ocorre na gravação e não na leitura =/, por isso os usuarios tem tantos

problemas.

Eu passei uma tutorial de AJAX para ele ;) , mas eu acho que ajax deve ser usados por pessoas com exeperiencia na area de JavaScript e talvez ele seja novato.

Abraço ;)

Guilherme Rambo · Dezembro 22, 2007

Darkdemo, o modo como você utiliza navegação ajax não está muito legal, principalmente pelo lado de SEO.

Recomendo esse método:

- http://www.web2ponto0.com.br/como-criar-um...cione-parte-12/

- http://www.web2ponto0.com.br/como-criar-um...cione-parte-22/

[]'s

brcontainer · Dezembro 22, 2007

otimo #INSIDE# era isso que prescisavamos para responder com mais eficiencia sobre a utilização do SERVER-SIDE

para páginação, te apoio totalmente nisso

Recomendo AJAX somente para pequenas aplicações, como "formularios"(um dos mais usados), retorno de informações pequenas

sempre que aparecer alguem com as mesmas duvidas irei apontar seus links, ok?

brigadão ;)

Arquivado

Como abrir links usando tableless?

Recommended Posts

Luiz Vieira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luiz Vieira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luiz Vieira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Rambo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

select com varias categorias por horario

comando like (Mysql) no php

Alguém com pratica em subir site em codeigniter4 na Hostinger? Não consigo acessar o bd. Erro de Autenticação. O mesmo site funciona normal em outro servidor web.

Fóruns

Tempo Real

Informação importante