[Resolvido] Manipular list de todas as formas possiveis

[Elbrinner 0]

Olá,

 

Estou com dificuldades na hora de modificar os elementos da lista. Tipo, quando coloco uma imagem de fundo em Li ela oculpa todo o espaço mais se coloco uma cor ela ocupa apenas o espaço do texto.

 

Tentei fazer a estrutura do html para que possa mexer de diversas formas, e editar elemento por elemento mais não sei se fiz certo.

 

meu codigo é este:

 

<div id="menu">
		 <ul class="cat">

			<li id="c13"><a href="#">Categoria 1</a>
					<ul class="subcat">				  
							<li id="s16"><a href="#">Sub 1</a></li>
							<li id="s17"><a href="#">Sub 2</a></li>
							<li id="s18"><a href="#">Sub 3</a></li>
							<li id="s19"><a href="#">Sub 4</a></li>
						  
					</ul>
			</li>
			 <li id="c14"><a href="#">Categoria 2</a>
							<ul class='subcat'> 
									 <li id="s22"><a  href="#">Sub 1</a></li>	
			 <li id="s21"><a  href="#">Sub 2</a></li>	
							</ul>
			 </li> 
			   <li id="c16"><a href="#">Categoria 3</a> </li>
			   
			<li id="c15"><a href="#">Prueba</a>
							<ul class='subcat'> 
					<li id="s23"><a  href="#">Sub 1</a></li>	
					 </ul>
							
			 </li>
			 </ul>

</div>

Se quero modificar o elemento LI que tem a class Subcat como eu tenho que fazer?

 

Eu tentei de diversas formas mais não consegui.

 

 

 

Obrigado

[William Bruno 1501]

Seja específico, ou chame diretamente.. você quer todos?

<style type="text/css">
#menu ul.cat li#c13 .subcat li {
	background-color: #f00;
}
.subcat li {
	background-color: #ff0;
}
</style>

[Elbrinner 0]

No caso, os ID que vão na lista serão usados poucas vezes.

<li id="c15"><a href="#">Prueba</a>

Isso pode gerar problemas?

[William Bruno 1501]

Não. Nenhum problema.

Só fica complicado pra você.. contanto que não se repitam, não há nenhum problema.

 

Qual é mesmo a duvida?

[Elbrinner 0]

Era isso mesmo que queria saber. Obrigado.

 

Desta forma que está tem como brincar bastante com ele né?

 

Obrigado uma vez mais

[William Bruno 1501]

Sim, dá pra atingir de muitas formas diferentes os elementos ai.

Bom, qualquer coisa volte à postar.

[Elbrinner 0]

Só ficou faltando uma coisa, como faço para atigir todos da classe CAT e SUBCAT sem chamar um por um?

 

Tem como?

 

O id sempre vai ser diferente para cada pagina e quero fazer um que se adapte a todos assim que não posso usar o por ID. O id vai ser apenas se o usuario final quiser personalizar mais o sistema.

 

Muito obrigado uma vez mais.

[William Bruno 1501]

Hum.. mas veja o teu class=cat, é o menu todo praticamente!

o subcat você pode chamar direto tb..

ul.subcat li

Ai eu estou atingindo todas as LI que estão dentro de ULs da classe "subcat".

[Elbrinner 0]

Claro, como o cat é tudo não da para fazer nada né?

 

O que eu gostaria de fazer é usar uma imagem para destacar que é uma categoria. Ou colocar uma cor para separar o que é cada coisa.

 

Eu mudando a estrutura teria como?

 

Obrigado

[William Bruno 1501]

Bom.. eu não entendi bem oque você quer fazer...

tem como colocar uma imagem do que é isso? e você qr destacar como?

 

ao clicar? ao passar o mouse? qndo tá atual?...

[Elbrinner 0]

Estou desenvolvendo um sistema no qual o usuario pode escolher o CSS ou fazer o seu proprio.

 

No caso eu quero permitir o maximo possivel para que o usuario possa fazer o menu dele da forma que ele quiser.

 

Eu vou ter varios CSS pronto no qual vou fazer varios tipo de menu tambem e preciso da flexibilidade do xhtml para fazer de diversas formas.

 

A estrutura do xhtml sempre vai ser a mesma e não tem como mudar. Por isso é importante que a estrutura esteja bem feita.

 

Da forma que está agora, eu posso fazer os tipicos menus tipo do imasters que quando passo por cima abre os submenu porem não consigo fazer o menu classico que destaca a categoria com uma cor e as subcategorias com outra.

 

Em outras palavras, quero selecionar todos os Li ul.cat e colocar uma cor de forma que não se veja na subcat. E na subcat colocar de outra cor.

 

Para colocar na subcat não tem problema, você mesmo me explico como se faz. O problema está na CAT que inclui toda a subcat. Se uso z-index eu consigo colocar a cor da subcat na frente?

 

Obrigado pelo interesse.

[Elbrinner 0]

O que quero fazer é um menu simples como este:

 

http://www.soniacostaimoveis.com

 

Sabendo chegar ai eu consigo fazer mais coisas depois.

 

Obrigado

[William Bruno 1501]

Entendi.. bom.. um jeito seria ser o mais especifico possivel, e depois sobrescrever oque não tiver de acordo.

veja.. se você estilizar a LI de class "cat", vai estilizar todo o resto, pois tb são parte dele.. e deslocando o menu, vemos que por trás da cor do "subcat", está a do "cat". Então uma maneira.. seria você declarar fixos width e height, e fazer o seguinte:

<style type="text/css">
#menu ul.cat li a {
	background-color: #ff0;
}
#menu ul.cat li ul.subcat li a {
	background-color: #f00;
}
</style>

[Elbrinner 0]

Acho que agora eu consigo fazer tudo o que preciso. Uma vez que tenha pronto eu coloco aqui para compartir com vcs.

 

Obrigado