Lista

e queria saber se tem como o CSS reconhecer os nivel dele automático, tipo caso exista um nível em uma determinada linha ele coloca uma figura na linha

Você quer que apareça uma seta, um indicador, ou qualquer coisa do tipo?

Com CSS3 dá pra fazer:

li:has(ul) {

background: url('../images/icon-arrow-left.png') left top no-repeat;
}

Entretanto, isso aí não funciona nos IE8-...

Se você der uma class para cada ul deve funcionar.

Exemplo:

<ul class="nivel1">
 <li>Nivel 1</li>
 <li>Nivel 2
 <ul class="nivel2">
 <li>Nivel 2-1</li>
 <li>Nivel 2-2</li>
 <li>Nivel 2-3
 <ul class="nivel3">
 <li>Nivel 2-3-1</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Nivel 3</li>
 <li>Nivel 4</li>
</ul>

Depois no CSS só aplicar conforme a class de cada um.

>
Você quer que apareça uma seta, um indicador, ou qualquer coisa do tipo?

Com CSS3 dá pra fazer:

li:has(ul) {

background: url('../images/icon-arrow-left.png') left top no-repeat;
}

Entretanto, isso aí não funciona nos IE8-...

Pode ser qualquer coisa..

tentei colocar esse seu exemplo e não consegui.. estou testando no FF 8.0.1

Que tenho várias listas no meu layout, dai minha estrutura é a seguinte

<style>
#navSetores {
margin: 0px;
padding: 0px;
}

#navSetores li {

list-style: none;
line-height: 20px;
}

#navSetores li:has(ul) {

background: url(../img/seta.png) left top no-repeat;
}
</style>
<ul id="navSetores">
 <li>Setor 1</li>
 <li>Setor 2
 <ul>
 <li>Setor 2-1
 <ul>
 <li>Setor 2-1-1</li>
 <li>Setor 2-1-2
 <ul>
 <li>Setor 2-1-2-1</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Setor 2-2</li>
 <li>Setor 2-3</li>
 </ul>
 </li>
 <li>Setor 3</li>
 <li>Setor 4</li>
 <li>Setor 5
 <ul>
 <li>Setor 5-1
 <ul>
 <li>Setor 5-1-1
 <ul>
 <li>Setor 5-1-1-1</li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </li>
</ul>

Hoje ela esta vindo dessa forma do meu banco... mas ela é dinamica.. por isso estou tentando fazer isso com CSS

Já tentou aplicar a minha dica anterior?

Talvez se você inserir no seu css desta forma:

#navSetores ul li{} / nivel 1 /

#navSetores ul li ul li{} / nivel 2 /

#navSetores ul li ul li ul li{} / nivel 3 /

#navSetores ul li ul li ul li ul li{} / nivel 4 /

Não tenho certeza do funcionamento, muito menos se esta correto semanticamente, mas pode ser uma alternativa.

>
Já tentou aplicar a minha dica anterior?

Talvez se você inserir no seu css desta forma:

#navSetores ul li{} / nivel 1 /

#navSetores ul li ul li{} / nivel 2 /

#navSetores ul li ul li ul li{} / nivel 3 /

#navSetores ul li ul li ul li ul li{} / nivel 4 /

Não tenho certeza do funcionamento, muito menos se esta correto semanticamente, mas pode ser uma alternativa.

vlw pela dica...

Mas essa sua forma não é bem oque eu estou querendo, que eu quero que mostre a imagem apenas nas que tiverem níveis, nessa sua ela vai aparecer em todas as linhas... e meu sistema ele pode ter de nenhum a Ns níveis

Entendi. Consegue gerar classes para cada nível pelo seu sistema?

Acredito que seja o único jeito mesmo.

>
Entendi. Consegue gerar classes para cada nível pelo seu sistema?

Acredito que seja o único jeito mesmo.

Esse eh o problema... na hora de montar eu não consigo ver se ele tem filho.. soh consigo ver depois que passou

Que estou usando a seguinte função para montar minha lista

<?php
function montaSetor($ref) {
	$sql = mysql_query("SELECT * FROM setores WHERE setor_referencia='$ref' ORDER BY setor_nome ASC");

	if (mysql_num_rows($sql) > 0) {

 if ($ref == 0) {
 echo "<ul id='navSetores'>";
 } else {
 echo "<ul>";
 }

 while ($row = mysql_fetch_array($sql)) {
 $setor_id = $row["setor_id"];
 $setor_referencia = $row["setor_referencia"];
 $setor_nome = $row["setor_nome"];

 echo "<li>".$setor_nome;

 echo montaSetor($setor_id);

 echo "</li>";
 }
 echo "</ul>";
	}
}

echo montaSetor(0);
?>

Eu achei isso aqui em jQuery: http://api.jquery.com/has/

mas tb não ajuda.. pq ele colocar em todas as listas... :(

Tenta fazer um esquemático, um desenhinho aí de como você quer, pois não estou entendendo...

Estranho.. eu tinha postado a imagem de como era pra ficar... mas o forum não esta mostrando a imagem...

Vou colocar o link direto pra imagem

http://www.egwebsite.com.br/exemplo_lista.jpg

Não dá pra ver a imagem não, o site é redirecionado para a home page...

Não sei pq não esta aparecendo... mas vamos lah..

Nivel 1

Nivel 2

Nivel 4

Algo assim, ele reconhecer sozinho quando tem um nível dentro.... e colocar algum simbolo ou imagem antes para identificar

Assim funcionou:

Imagem arrow.png: /applications/core/interface/imageproxy/imageproxy.php?img=http://img59.imageshack.us/img59/4900/arrowua.png&key=1b56cce2038a978edd2f228cfae84cb99d4bb2d7bee52a5c6575bf1ccbb2f55b" alt="arrowua.png" />

<!DOCTYPE html>

<html>
<head>
<title>Listas em Árvore</title>
<style type="text/css">

	padding: 0;
	margin: 0;
}

body {

	font-family: sans-serif;
	font-size: .9em;
}

#main {
	width: 400px;
	margin: 20px;
}

ul {

	list-style: none;
}

ul li {

	padding-left: 15px;
	line-height: 20px;
}

ul li ul {

	margin-left: 15px;
}

li.has-ul {

	background: url("arrow.png") left 5px no-repeat;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li class="has-ul">Item 1
	<ul>
 <li>Item 1.1</li>
 <li class="has-ul">Item 1.2
 <ul>
 <li>Item 1.2.1</li>
 <li>Item 1.2.2</li>
 </ul>
 </li>
 <li>Item 1.3</li>
	</ul>
</li>
<li class="has-ul">Item 2
	<ul>
 <li>Item 2.1</li>
 <li>Item 2.2</li>
	</ul>
</li>
<li class="has-ul">Item 3
	<ul>
 <li>Item 3.1</li>
	</ul>
</li>
<li>Item 4</li>
</ul>
</div>
</body>
</html>

Bem Henrique, como eu disse lá em cima, dessa forma no meu caso não resolve, pq eu só vou saber quando tem nível depois que eu escrevo os sub-niveis.

Isso vai ser gerado por alguma linguagem dinâmica?

É só bolar um jeito de "marcar" os itens que possuem filhos...

Posta aí como você está fazendo...