Ajuste no Código.

wilnet · Outubro 27, 2008

Olá Galera, amigos estou com um pequeno mas grande Problema....

Montei este script com Categorias e SubCategorias, mas não estou coneseguindo deixar padronizada. vou postar a imagem dela e em seguida o código.

Imagem Postada

E o código é este:

<link rel=stylesheet href="./estilo.css" type="text/css">
<body leftmargin="0" topmargin="0">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#e7e7ef">
  <tr>
	<td bgcolor="#0077bb"> 
	  <div align="center"><strong><img src="categorias.gif" width="120" height="19"></strong></div></td>
  </tr>
</table>

<table width="80%" border="0" align="center" bgcolor="#0077bb">
  <tr>
	<td><table width=100% border=0 cellpadding="0" cellspacing="0"  bgcolor="#f2f5f9">
  <%
Dim categoria
Dim sub_cat

set categoria = Cat_DB.Execute("select * from categorias ORDER BY nome ASC;")
'while not categoria.EOF
%>
  <tr width="100%" valign="top">
<% 
cont = -1
do while not categoria.eof 
set sub_cat= Cat_DB.Execute("select * from sub_categorias where id_cat="&categoria("id")&"")
cont = cont + 1
						if ( cont mod 4) = 0 and cont < 20 then %>
				</tr>
				<tr valign="top">
				<%end if
				set cot= Cat_DB.Execute("select count(nome_sub) as soma from sub_categorias where id_cat="&categoria("id")&"")
				%>
				  
  <td heigth="50%" valign="top"> 
	 
	  <table width="0%" border="0" cellpadding="0" cellspacing="0" bgcolor="#BCDEDE">
		<tr valign="top" style="margin-top:0;">
		  <td valign="top"><img src="Admin/icone/<%=categoria("icone")%>"></td>
		  <td valign="top"> <font class="st"> <%=categoria("nome")%> (<%=cot("soma")%>)</font></td>
		</tr>
	  </table>
	  <table bgcolor="#F9FFF9" style="margin-top:0; padding-top:0;">
		<tr style="margin-top:0; padding-top:0;" valign="top">
<%
cont2 = - 1
 do while not sub_cat.eof 
 cont2 = cont2 + 1
			if ( cont2 mod 1 ) = 0 and cont2 < 20 then %>
				</tr><tr>
			  <%end if%>
 <td style="border-right:1px dotted #000000;border-left:1px dotted #000000;border-bottom:1px dotted #000000;" valign="top"><a class=linkcat href="./listar.asp?lista=categoria&cat_id=<%=categoria("id")%>
&cat_nome=<%=sub_cat("nome_sub")%>&sub_id=<%=sub_cat("id_sub_cat")%>"><%=sub_cat("nome_sub")%></a></td>
 <% sub_cat.movenext
loop
 %>
 </tr></table><br>
  </td> 
  
	 <% 
	  categoria.movenext 
loop

'completa as colunas 

'categoria.MoveNext
'Wend
categoria.Close
set categoria = Nothing
%>
</table></td>
  </tr>
</table>

Gostaria de saber de vcs amigos como que eu poderia fazer para deixar esse código conforme a imagem que postei junto com este código.

Muito obrigado desde já pelas as ajudas.

Atenciosamente,

William

Ted k' · Outubro 27, 2008

isso está mais para CSS + HTML

Movido de ASP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Webstandards: CSS / XML / XHTML / HTML

Carlos Designer · Outubro 27, 2008

wilnet, coloca o link para gente ver o código resultado desse código!

wilnet · Outubro 27, 2008

Olá Carlos tudo bem? estou colocando o link conforme você solicitou:

Aprendiz CSS · Outubro 27, 2008

ao inves de tabela utilize uma lista

acho que vai funcionar!

abraço

Carlos Designer · Outubro 27, 2008

wilnet da forma como você esta estruturando seu layout com tabelas, é meio dificil de arrumar, pois a segunda linha de categorias esta toda dentro de uma linha da tabela <td>!

o ideal seria você estruturar seu layou usando só tableless (css+xhtml) sem tabelas, ai não tera essas complicações!

Imagem Postada

RoXbY · Outubro 27, 2008

pelo que eu entendi, se você usar colunas ao invés de linhas seria uma solução para a estrutura já utilizada.

mas mesmo assim :/

wilnet · Outubro 27, 2008

Amigos... muito obrigado mesmo por toda a atenção dada até aqui... mas o problema é que: eu não sei trabalhar com tableless, só com tabelas, e quanto ao código ASP, eu tb só fusso rsrs, estou aprendendo "sozinho", aqui qual a juda do forum, tutorial, esxemplos prontos,etc.

Assim se não for pedir muito a vcs amigos, tem como me ajudar na pratica mesmo de como ficaria essa alteração? já faz semanas que estou mexendo aqui, mas da erro no ASP. ai deixei parado aqui por um tempo, entao resolvi colocar aqui no forum.

Desde ja muito obrigado

Atenciosamente,

william

Bom dia amigos, vou tentar mudar este trabalho de tabela para tableless então... mas não sei nada de tableless e nem por onde começar a mexer nesse script....

Gostaria de pedir a gentileza da ajuda dos amigos aqui para me orientar de como posso começar a fazer essa alteração aqui.

Carlos Designer · Outubro 28, 2008

então wilnet, antes de qualquer coisa você precisa aprender um minino css+xhtml!

aqui no proprio fórum e na internet tem varios tutoriais

Aqui no forum http://forum.imasters.com.br/index.php?showtopic=124982

W3SCHOOLS http://www.w3schools.com/css/default.asp

Maujor http://www.maujor.com/index.php

Eu particularmente prefiro livros para começar a aprender pois o conteudo é muito mais organizado!

Eu recomendo esse Desenvolvendo CSS na Web é muito bom mesmo, aprendi com ele!

Ai depois você se apronfunda nos tutos da net!

Qualquer coisa estamos ai!

wilnet · Novembro 24, 2008

Olá amigos, estou de volta em tentar resolver este problema. Tentei aqui de várias formas mexer nesse código, mas sem solução, como não entendo nada de tableless, fica ainda mais dificil, cada alteração que tento fazer aqui, fica ainda mais bagunçada.

O problema é que não sei nem por onde começar essa alteração, se alguem poder me orientar como corrigir isso, obrigado.

Estou disposto também a pagar por esta alteração caso seja necessário também.

Veja o link: veja como está este código aqui.[/url]

Conto com vcs amigos...Obrigado

William

Aprendiz CSS · Novembro 24, 2008

wilnet, você vai desistir!

poste uma imagem de como deseja que fique a versão final disso!

abraço

wilnet · Novembro 25, 2008

Olá Aprendiz CSS, obrigado pela disposição em ajudar.

Estou passando as imagens abaixo:

Esta imagem é como está, ERRADA.

Imagem Postada

Esta imagem é como DEVE FICAR.

Imagem Postada

Este é código de como está:

<body leftmargin="0" topmargin="0">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#e7e7ef">
  <tr>
	<td bgcolor="#0077bb"> 
	  <div align="center"><strong><img src="categorias.gif" width="120" height="19"></strong></div></td>
  </tr>
</table>

<table width="80%" border="0" align="center" bgcolor="#0077bb">
  <tr>
	<td><table width=100% border=0 cellpadding="0" cellspacing="0"  bgcolor="#f2f5f9">
  <%
Dim categoria
Dim sub_cat

set categoria = Cat_DB.Execute("select * from categorias ORDER BY nome ASC;")
'while not categoria.EOF
%>
  <tr width="100%" valign="top">
<% 
cont = -1
do while not categoria.eof 
set sub_cat= Cat_DB.Execute("select * from sub_categorias where id_cat="&categoria("id")&"")
cont = cont + 1
						if ( cont mod 4) = 0 and cont < 20 then %>
				</tr>
				<tr valign="top">
				<%end if
				set cot= Cat_DB.Execute("select count(nome_sub) as soma from sub_categorias where id_cat="&categoria("id")&"")
				%>
				  
  <td heigth="50%" valign="top"> 
	 
	  <table width="0%" border="0" cellpadding="0" cellspacing="0" bgcolor="#BCDEDE">
		<tr valign="top" style="margin-top:0;">
		  <td valign="top"><img src="Admin/icone/<%=categoria("icone")%>"></td>
		  <td valign="top"> <font class="st"> <%=categoria("nome")%> (<%=cot("soma")%>)</font></td>
		</tr>
	  </table>
	  <table bgcolor="#F9FFF9" style="margin-top:0; padding-top:0;">
		<tr style="margin-top:0; padding-top:0;" valign="top">
<%
cont2 = - 1
 do while not sub_cat.eof 
 cont2 = cont2 + 1
			if ( cont2 mod 1 ) = 0 and cont2 < 20 then %>
				</tr><tr>
			  <%end if%>
 <td style="border-bottom:1px dotted #000000;" valign="top"><a class=linkcat href="./listar.asp?lista=categoria&cat_id=<%=categoria("id")%>
&cat_nome=<%=sub_cat("nome_sub")%>&sub_id=<%=sub_cat("id_sub_cat")%>"><%=sub_cat("nome_sub")%></a></td>
 <% sub_cat.movenext
loop
 %>
 </tr></table>	  <br></td> 
  
	 <% 
	  categoria.movenext 
loop

'completa as colunas 

'categoria.MoveNext
'Wend
categoria.Close
set categoria = Nothing
%>
</table></td>
  </tr>
</table>

Se puder me ajudar a resolver isso, fico muito grato, já estou a mais de dois meses e até agora não saio disso. se for o caso estou disposto a até pagar também pelo o serviço.

OBS: Não precisa ficar exatamente como está com essas tabelas,caso tenha que alterar, pode ficar a vontade também,desde que siga os encaixes de Categorias logo abaixo da ultima Sub-Categoria.

Desde já, muito obrigado a todos que puderem me orientar.

Atenciosamente.

Wilnet

William Bruno · Novembro 25, 2008

Não tenho conhecimento em ASP, poste somente o HTML gerado... não tenho como te ajudar com a programação do servidor tb, desconheço a sintaxe... com lógica agente dá um jeito :lol:

veja.. o jeito é pensar em colunas então... à cada 2 itens, você quebra a coluna...

O código ficou meio grande, olhe por esse link:

http://www.cenasordidas.hbe.com.br/exemplos/catColunas.html

RoXbY · Novembro 25, 2008

eu já disse.

pra tabelas, você precisará utilizar colunas e não linhas.

Crie uma tabela de 3 colunas e 1 linha, em cada coluna você cria mais outra tabela com o que você quiser, embaixo desta tabela crie outra, pronto, terá uma coluna preenchida por duas tabelas, bom, agora crie mais duas e mais duas sucessivamente nas próximas duas colunas :)

agora voi la... terás um código nojento de sujo mas do jeitinho que você quer!

E não é só isso, ligando agora você ainda ganha inteiramente grátis dois saca-rolhas sem braço :)

wilnet · Novembro 25, 2008

Olá William Bruno, valeu pela a atenção dada. olha eu verifiquei seu link, é exatamente assim que tem que ficar sim.

Tentei adaptar sua sugestão ao meu código, mas está dando erro de incompatibilidade.... até porque, os campos que você inseriu manualmente, eles aqui sao dinamicos... é pego e gerado pelo banco de dados. Mas tudo bem, tentei seguir sua ideia.

Montei assim:

<div id="listagem">

<div class="cat">
	<div><img src="Admin/icone/<%=categoria("icone")%>"> <%=categoria("nome")%> (<%=cot("soma")%>)
		<ul>
			<li>Alarmes/Som/Acessórios</li>
		</ul>
	</div>

Mas está dando esse erro a principio:

Informações técnicas (para a equipe de suporte)

Tipo de erro:
Erro de tempo de execução do Microsoft VBScript (0x800A000D)
Tipos incompatíveis

A linha 41 é essa:

<div><img src="Admin/icone/<%=categoria("icone")%>"> <%=categoria("nome")%> (<%=cot("soma")%>)

Não pude testar muito, pois tenho que sair agora, mas se tiverem ideia dos proximos passos ... agradeço... pois logo mais a tarde estarei retornando para pegar no script novamente.

Grato..

William Bruno · Novembro 25, 2008

Tentei adaptar sua sugestão ao meu código, mas está dando erro de incompatibilidade.... até porque, os campos que você inseriu manualmente, eles aqui sao dinamicos... é pego e gerado pelo banco de dados. Mas tudo bem, tentei seguir sua ideia.

Esse erro nada tem a ver com a marcação HTML.

Veja, não conheço ASP.. mas tornar isso dinâmico é apenas uma questão de construir um algorítmo, para quebrar a div e inserir outra coluna, à cada 2 respostas.

Poderia ser durante o loop que trás as categorias. Teríamos 1, 2 <quebra>, 3, 4 <quebra>, então basta que à cada contador par, você adicione um </div><div class="cat">,

e à cada registro, uma DIV, com o respectivo UL.

Em php eu faria... mas ASP não sei bem a sintaxe.

Feito porcamente em php, ficaria assim:

<div id="listagem">
<?php

$host		= "localhost";
$usuario	= "root";
$senha		= "123";
mysql_connect($host,$usuario,$senha) or die(mysql_error());
mysql_select_db("test") or die(mysql_error());


$sql = mysql_query("SELECT * FROM `categoria`");

?>

<div class="cat">
	<?php 
	$cont = 0;
	while($dados=mysql_fetch_assoc($sql)) {
	?>
	<div><?php echo $dados['nomeCategoria']; ?>
		<ul>
		<?php
			$sql2 = mysql_query("SELECT * FROM `sub` WHERE `idCategoria` = $dados[idCategoria] ");
			while($dados2=mysql_fetch_assoc($sql2)){
		?>
			<li><?php echo $dados2['nomeSubcategoria']; ?></li>
		<?php
			}//fecha loop de subcategorias
		?>
		</ul>
	</div>
	<?php
		$cont++;
		//echo $cont;
			if($cont%2==0){
				echo '</div><div class="cat">';
			}
		} //fecha loop de categorias
	?>
</div><!-- /listagem -->

Vê se te dá uma luz ai.. pq qndo inseri alguns registros no banco, funcinou certinho oq você descreveu http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

Fiz com a marcação que postei para ti.

wilnet · Novembro 25, 2008

Oi novamente William Bruno... Estou com a cabeça pirando já rsrsr... mas até que estou começando a entender um pouquinho desse comandos de Tablaless de tanto ficar fuçando aqui srsr.. isso é realmente o lado bom.

Mas vamos la´... veja como está o código agora, tirei toda as tabelas e tentei adaptar com seu código.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<!--#include file="conecta_bd.inc"-->
<head>
<link rel=stylesheet href="./estilo.css" type="text/css">
style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style: none;
}
body {
	margin-top: 40px;
	margin-left: 40px;
}
#listagem {
	width: 700px;
}
.cat {
	float: left;
	margin-right:20px;
	margin-bottom: 1px;
}
.cat ul {
	width: 160px;
	position: relative;
	left: 0px
}
.cat ul li {
	background-color: #ff0;
	margin-bottom: 0px;
}
	


</style></head>

<body leftmargin="0" topmargin="0">

<div id="listagem">
 <%
Dim categoria
Dim sub_cat

set categoria = Cat_DB.Execute("select * from categorias ORDER BY nome ASC;")
'while not categoria.EOF
%>
  
<% 
cont = -1
do while not categoria.eof 
set sub_cat= Cat_DB.Execute("select * from sub_categorias where id_cat="&categoria("id")&"")
cont = cont + 1
						if ( cont mod 4) = 0 and cont < 20 then %>
				
				<%end if
				set cot= Cat_DB.Execute("select count(nome_sub) as soma from sub_categorias where id_cat="&categoria("id")&"")
				%>

<div class="cat">
	<div><img src="Admin/icone/<%=categoria("icone")%>"> <%=categoria("nome")%> (<%=cot("soma")%>)[color="#FF0000"]</div>
		
			<%
cont2 = - 1
 do while not sub_cat.eof 
 cont2 = cont2 + 1
			if ( cont2 mod 1 ) = 0 and cont2 < 20 then %>
							 
			  <%end if%>
		 <ul>	  
			  <li><a class=linkcat href="./listar.asp?lista=categoria&cat_id=<%=categoria("id")%>
&cat_nome=<%=sub_cat("nome_sub")%>&sub_id=<%=sub_cat("id_sub_cat")%>"><%=sub_cat("nome_sub")%></a>
 <% sub_cat.movenext
loop
 %>[/color]
			[color="#FF0000"]
			</li>
		</ul>
	
</div>[/color]
[color="#4169E1"]<% 
	  categoria.movenext 
loop

'completa as colunas 

'categoria.MoveNext
'Wend
categoria.Close
set categoria = Nothing
%>

</div>
</body>
</Html>

Veja no link como ficou... veja aqui.

Por favor, se possível a vcs, continue me orientando..

Grato

William Bruno · Novembro 25, 2008

Então cara... veja... um UL comporta vários LI..

Reveja o HTML que o meu código gera... a estrutura é:

<coluna>
 <div>Categoria 1
	<ul>
	   <li>Subcategoria</li>
	   <li>Subcategoria</li>
	   <li>Subcategoria</li>
   </ul>
 </div>
 <div>Categoria 2
	<ul>
	   <li>Subcategoria</li>
	   <li>Subcategoria</li>
	   <li>Subcategoria</li>
	   <li>Subcategoria</li>
	   <li>Subcategoria</li>
   </ul>
 </div>
</coluna>

Ai as colunas que são flutuadas..

Veja que no HTML que teu código gerou, você tem um UL para cada LI.. e não é essa a idéia..

Além de que.. para definir as colunas, você só flutua à cada 2~3 Categorias... Olha novamente o HTML estático que fiz:

http://www.cenasordidas.hbe.com.br/exemplos/catColunas.html

O código com os 2 loops que passei em php, gera exatamente o HTML desse código php ai... vou colocar online com alguns registros tb..

wilnet · Novembro 26, 2008

Bom dia William Bruno, vou tentar ver onde estou errando, só me explique por favor.

A

<div> é como se fosse a <table>

<ul> como se fosse a <tr>

<li> como se fosse a <td> ou <a> ????

Ou estou falando pura besteira nisso?

Só gostaria de aprender as direnças entre eles, assim fica mais fácil de eu ver como está minha estrutura.

Grato,

William Ramos

webflex · Novembro 27, 2008

Olá,

Para um maior esclarecimento veja este link. Lá encontra muita coisa útil mesmo ;).

Cumprimentos,

webflex

Arquivado

Ajuste no Código.

Recommended Posts

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carlos Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carlos Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RoXbY 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carlos Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

RoXbY 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0